1 
var data=[{x: 33.46995, y: 398.86988594407546},{x: 34.78498, y: 407.06546535069833},{x: 33.21872, y: 397.3041608926882},{x: 36.82249, y: 419.76371177609417},{x: 44.56029, y: 467.98751985086545},{x: 43.82672, y: 463.4157373171466},{x: 52.71943, y: 518.8372189145773},{x: 63.84255, y: 588.1591455697828},{x: 83.53594, y: 710.8930311317798},{x: 103.09053, y: 832.7618821153723},{x: 126.41405, y: 978.1196003438209},{x: 163.13218, y: 1206.9557106057173},{x: 185.29536, y: 1345.0819142613568},{x: 178.75143, y: 1304.2985876860075},{x: 249.81555, y: 1747.1870681174632},{x: 305.96392, y: 2097.1170506178178},{x: 300.40058, y: 2062.4449939072933},{x: 314.4053, y: 2149.7257364207867},{x: 310.33848, y: 2124.380347918287},{x: 262.29109, y: 1824.9375975430276},{x: 275.85243, y: 1909.4550905509523},{x: 303.52616, y: 2081.9243510943934}];
var data1=[{x: 33.46995, y: 387.6560178},{x: 34.78498, y: 410.32030047},{x: 33.21872, y: 415.73087417},{x: 36.82249, y: 452.69999839},{x: 44.56029, y: 462.14679934},{x: 43.82672, y: 478.96549106},{x: 52.71943, y: 508.06895207},{x: 63.84255, y: 599.59290202},{x: 83.53594, y: 699.68885293},{x: 103.09053, y: 808.90107722},{x: 126.41405, y: 920.31652973},{x: 163.13218, y: 1201.11176841},{x: 185.29536, y: 1186.95275764},{x: 178.75143, y: 1323.94029587},{x: 249.81555, y: 1656.61707312},{x: 305.96392, y: 1823.04992777},{x: 300.40058, y: 1827.63785914},{x: 314.4053, y: 1856.72212139},{x: 310.33848, y: 2039.1274463},{x: 262.29109, y: 2102.390809},{x: 275.85243, y: 2274.22971053},{x: 303.52616, y: 2600.81824356}]

I have two data set above, from the them I am trying to create a graph with mix of scatter and line plot, just like in the case of a regression plot. I am able to get the line for the data1 but not the dots for data. Please help me with this! I am not sure what the problem is, maybe I am not creating the circle or the functions in the circle attributes are not working correctly.

My code is below: index.html

<!DOCTYPE html>
<htmL>
  <meta charset="utf-8">
  <head>
    <style>
      .line-chart{
        border:1px solid lightgray;
      }
      circle {
    fill: steelblue;
}
  </style>
  </head>
  <body>
      <svg class='line-chart'></svg>
      <script src="https://d3js.org/d3.v4.min.js"></script>  </body>

      <script src="./regression.js"></script>
  </body>
</htmL>

regression.js

function drawChart(data,data1) {
  var svgWidth = 600, svgHeight = 400;
  var margin = { top: 20, right: 20, bottom: 30, left: 50 };
  var width = svgWidth - margin.left - margin.right;
  var height = svgHeight - margin.top - margin.bottom;

  var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);
  var g = svg.append("g")
  .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"
  );
  var x = d3.scaleLinear().rangeRound([0, width]);

  var y = d3.scaleLinear().rangeRound([height, 0]);

  var line = d3.line()
  .x(function(d) { return x(d.x)})
  .y(function(d) { return y(d.y)})
  x.domain(d3.extent(data1, function(d) { return d.x }));
  y.domain(d3.extent(data1, function(d) { return d.y }));

  g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .append("text")
  .attr("fill", "#000")
  .text("Foreign Export ($)")
  .attr("dy", "0.71em")
  .attr("y", 20)
  .attr("x",500)
  .select(".domain")
  .remove()

  g.append("g")
   .call(d3.axisLeft(y))
   .append("text")
   .attr("fill", "#000")
   .attr("transform", "rotate(-90)")
   .attr("y", 6)
   .attr("dy", "0.90em")
   .attr("text-anchor", "center")
   .text("Price ($)")

  g.append('svg:circle') //problem
    .datum(data)
   .attr("cx", function(d) {
    return (d.x);
    })
   .attr("cy", function(d) {
    return (d.y);
    })
   .attr("r", 8);  

  g.append("path")
   .datum(data1)
   .attr("fill", "none")
   .attr("stroke", "steelblue")
   .attr("stroke-linejoin", "round")
   .attr("stroke-linecap", "round")
   .attr("stroke-width", 1.5)
   .attr("d", line);
}
drawChart(data,data1);
Improve this question

1 Answer 1

Reset to default
1

While a path is just one element (hence datum), you have several circles.

Therefore, you need an enter selection:

g.selectAll(null)
    .data(data)
    .enter()
    .append("circle")
    //etc...

Also, use the scales for both the cx and cy positions.

Here is your updated code:

var data = [{
  x: 33.46995,
  y: 398.86988594407546
}, {
  x: 34.78498,
  y: 407.06546535069833
}, {
  x: 33.21872,
  y: 397.3041608926882
}, {
  x: 36.82249,
  y: 419.76371177609417
}, {
  x: 44.56029,
  y: 467.98751985086545
}, {
  x: 43.82672,
  y: 463.4157373171466
}, {
  x: 52.71943,
  y: 518.8372189145773
}, {
  x: 63.84255,
  y: 588.1591455697828
}, {
  x: 83.53594,
  y: 710.8930311317798
}, {
  x: 103.09053,
  y: 832.7618821153723
}, {
  x: 126.41405,
  y: 978.1196003438209
}, {
  x: 163.13218,
  y: 1206.9557106057173
}, {
  x: 185.29536,
  y: 1345.0819142613568
}, {
  x: 178.75143,
  y: 1304.2985876860075
}, {
  x: 249.81555,
  y: 1747.1870681174632
}, {
  x: 305.96392,
  y: 2097.1170506178178
}, {
  x: 300.40058,
  y: 2062.4449939072933
}, {
  x: 314.4053,
  y: 2149.7257364207867
}, {
  x: 310.33848,
  y: 2124.380347918287
}, {
  x: 262.29109,
  y: 1824.9375975430276
}, {
  x: 275.85243,
  y: 1909.4550905509523
}, {
  x: 303.52616,
  y: 2081.9243510943934
}];
var data1 = [{
  x: 33.46995,
  y: 387.6560178
}, {
  x: 34.78498,
  y: 410.32030047
}, {
  x: 33.21872,
  y: 415.73087417
}, {
  x: 36.82249,
  y: 452.69999839
}, {
  x: 44.56029,
  y: 462.14679934
}, {
  x: 43.82672,
  y: 478.96549106
}, {
  x: 52.71943,
  y: 508.06895207
}, {
  x: 63.84255,
  y: 599.59290202
}, {
  x: 83.53594,
  y: 699.68885293
}, {
  x: 103.09053,
  y: 808.90107722
}, {
  x: 126.41405,
  y: 920.31652973
}, {
  x: 163.13218,
  y: 1201.11176841
}, {
  x: 185.29536,
  y: 1186.95275764
}, {
  x: 178.75143,
  y: 1323.94029587
}, {
  x: 249.81555,
  y: 1656.61707312
}, {
  x: 305.96392,
  y: 1823.04992777
}, {
  x: 300.40058,
  y: 1827.63785914
}, {
  x: 314.4053,
  y: 1856.72212139
}, {
  x: 310.33848,
  y: 2039.1274463
}, {
  x: 262.29109,
  y: 2102.390809
}, {
  x: 275.85243,
  y: 2274.22971053
}, {
  x: 303.52616,
  y: 2600.81824356
}];

function drawChart(data, data1) {
  var svgWidth = 600,
    svgHeight = 400;
  var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  };
  var width = svgWidth - margin.left - margin.right;
  var height = svgHeight - margin.top - margin.bottom;

  var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);
  var g = svg.append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")"
    );
  var x = d3.scaleLinear().rangeRound([0, width]);

  var y = d3.scaleLinear().rangeRound([height, 0]);

  var line = d3.line()
    .x(function(d) {
      return x(d.x)
    })
    .y(function(d) {
      return y(d.y)
    })
  x.domain(d3.extent(data1, function(d) {
    return d.x
  }));
  y.domain(d3.extent(data1, function(d) {
    return d.y
  }));

  g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .append("text")
    .attr("fill", "#000")
    .text("Foreign Export ($)")
    .attr("dy", "0.71em")
    .attr("y", 20)
    .attr("x", 500)
    .select(".domain")
    .remove()

  g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.90em")
    .attr("text-anchor", "center")
    .text("Price ($)")

  g.selectAll(null)
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return x(d.x);
    })
    .attr("cy", function(d) {
      return y(d.y);
    })
    .attr("r", 8);

  g.append("path")
    .datum(data1)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);
}
drawChart(data, data1);
<!DOCTYPE html>
<htmL>
  <meta charset="utf-8">

  <head>
    <style>
      .line-chart {
        border: 1px solid lightgray;
      }

      circle {
        fill: steelblue;
      }

    </style>
  </head>

  <body>
    <svg class='line-chart'></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </body>

</htmL>

Finally, it seems to me that you're swapping the datasets, maybe this is what you want:

var data = [{
  x: 33.46995,
  y: 398.86988594407546
}, {
  x: 34.78498,
  y: 407.06546535069833
}, {
  x: 33.21872,
  y: 397.3041608926882
}, {
  x: 36.82249,
  y: 419.76371177609417
}, {
  x: 44.56029,
  y: 467.98751985086545
}, {
  x: 43.82672,
  y: 463.4157373171466
}, {
  x: 52.71943,
  y: 518.8372189145773
}, {
  x: 63.84255,
  y: 588.1591455697828
}, {
  x: 83.53594,
  y: 710.8930311317798
}, {
  x: 103.09053,
  y: 832.7618821153723
}, {
  x: 126.41405,
  y: 978.1196003438209
}, {
  x: 163.13218,
  y: 1206.9557106057173
}, {
  x: 185.29536,
  y: 1345.0819142613568
}, {
  x: 178.75143,
  y: 1304.2985876860075
}, {
  x: 249.81555,
  y: 1747.1870681174632
}, {
  x: 305.96392,
  y: 2097.1170506178178
}, {
  x: 300.40058,
  y: 2062.4449939072933
}, {
  x: 314.4053,
  y: 2149.7257364207867
}, {
  x: 310.33848,
  y: 2124.380347918287
}, {
  x: 262.29109,
  y: 1824.9375975430276
}, {
  x: 275.85243,
  y: 1909.4550905509523
}, {
  x: 303.52616,
  y: 2081.9243510943934
}];
var data1 = [{
  x: 33.46995,
  y: 387.6560178
}, {
  x: 34.78498,
  y: 410.32030047
}, {
  x: 33.21872,
  y: 415.73087417
}, {
  x: 36.82249,
  y: 452.69999839
}, {
  x: 44.56029,
  y: 462.14679934
}, {
  x: 43.82672,
  y: 478.96549106
}, {
  x: 52.71943,
  y: 508.06895207
}, {
  x: 63.84255,
  y: 599.59290202
}, {
  x: 83.53594,
  y: 699.68885293
}, {
  x: 103.09053,
  y: 808.90107722
}, {
  x: 126.41405,
  y: 920.31652973
}, {
  x: 163.13218,
  y: 1201.11176841
}, {
  x: 185.29536,
  y: 1186.95275764
}, {
  x: 178.75143,
  y: 1323.94029587
}, {
  x: 249.81555,
  y: 1656.61707312
}, {
  x: 305.96392,
  y: 1823.04992777
}, {
  x: 300.40058,
  y: 1827.63785914
}, {
  x: 314.4053,
  y: 1856.72212139
}, {
  x: 310.33848,
  y: 2039.1274463
}, {
  x: 262.29109,
  y: 2102.390809
}, {
  x: 275.85243,
  y: 2274.22971053
}, {
  x: 303.52616,
  y: 2600.81824356
}];

function drawChart(data, data1) {
  var svgWidth = 600,
    svgHeight = 400;
  var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  };
  var width = svgWidth - margin.left - margin.right;
  var height = svgHeight - margin.top - margin.bottom;

  var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);
  var g = svg.append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")"
    );
  var x = d3.scaleLinear().rangeRound([0, width]);

  var y = d3.scaleLinear().rangeRound([height, 0]);

  var line = d3.line()
    .x(function(d) {
      return x(d.x)
    })
    .y(function(d) {
      return y(d.y)
    })
  x.domain(d3.extent(data1, function(d) {
    return d.x
  }));
  y.domain(d3.extent(data1, function(d) {
    return d.y
  }));

  g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .append("text")
    .attr("fill", "#000")
    .text("Foreign Export ($)")
    .attr("dy", "0.71em")
    .attr("y", 20)
    .attr("x", 500)
    .select(".domain")
    .remove()

  g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.90em")
    .attr("text-anchor", "center")
    .text("Price ($)")

  g.selectAll(null)
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return x(d.x);
    })
    .attr("cy", function(d) {
      return y(d.y);
    })
    .attr("r", 8);

  g.append("path")
    .datum(data1)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);
}
drawChart(data1, data);
<!DOCTYPE html>
<htmL>
  <meta charset="utf-8">

  <head>
    <style>
      .line-chart {
        border: 1px solid lightgray;
      }

      circle {
        fill: steelblue;
      }

    </style>
  </head>

  <body>
    <svg class='line-chart'></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </body>

</htmL>

If that's correct, you don't need neither that huge array or objects nor a <path>: just create a <line> using x1, x2, y1 and y2.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.