Geek Answers Handbook

Simple Line Example D3

I am new to D3 and slowly get up to speed in this library. I am trying to get this simple D3 area diagram to work, but I am having trouble displaying the actual area. I can make the axis correctly display the correct ranges for the data, but not a single area is displayed on the graph itself.

I am fueling JSON data that looks like this and it looks like they are consuming data as best as possible.

[{"Date":"Date","Close":"Close"},{"Date":"20130125","Close":"75.03"},{"Date":"20130124","Close":"75.32"},{"Date":"20130123","Close":"74.29"},{"Date":"20130122","Close":"74.16"},{"Date":"20130118","Close":"75.04"},{"Date":"20130117","Close":"75.26"},{"Date":"20130116","Close":"74.34"},{"Date":"20130115","Close":"76.94"},{"Date":"20130114","Close":"76.55"}]

This is my code.

  var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y%m%d").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var area = d3.svg.area() .x(function(d) { return x(d.Date); }) .y0(height) .y1(function(d) { return y(d.Close); }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.json('JSONstockPriceOverTime.php', function (data) { data.forEach(function(d) { d.Date = parseDate(d.Date); d.Close = +d.Close; }); x.domain(d3.extent(data, function(d) { return d.Date; })); y.domain([0, d3.max(data, function(d) { return d.Close; })]); svg.append("path") .datum(data) .attr("class", "area") .attr("d", area); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Price ($)"); });

And I have this style applied

  <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .area { fill: steelblue; } </style>
+4
source share
1 answer

Remove the start part of the json file (JSONstockPriceOverTime.php);

{"Date":"Date","Close":"Close"},

Since it has the Date and Close variables defined as part of the json format, you don’t need to include header information such as a csv file and add an “error” to your json boot line

d3.json("JSONstockPriceOverTime.php", function(error, data) {

and you should all go (worked for me).

You are making good progress.

+4
source

More articles:


All Articles