D3.JS to create a Stacked Area Chart

Question

I'm trying to reproduce the following Stacked Area Chart , which was updated January 5, 2018.

In order to do that, need to have an index.html , with the code provided, and a data.tsv , containing the data to be displayed.

The index.html can be seen bellow:

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom;

var parseDate = d3.timeParse("%Y %b %d");

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var stack = d3.stack();

var area = d3.area()
    .x(function(d, i) { return x(d.data.date); })
    .y0(function(d) { return y(d[0]); })
    .y1(function(d) { return y(d[1]); });

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(1);

  x.domain(d3.extent(data, function(d) { return d.date; }));
  z.domain(keys);
  stack.keys(keys);

  var layer = g.selectAll(".layer")
    .data(stack(data))
    .enter().append("g")
      .attr("class", "layer");

  layer.append("path")
      .attr("class", "area")
      .style("fill", function(d) { return z(d.key); })
      .attr("d", area);

  layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; })
    .append("text")
      .attr("x", width - 6)
      .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); })
      .attr("dy", ".35em")
      .style("font", "10px sans-serif")
      .style("text-anchor", "end")
      .text(function(d) { return d.key; });

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"));
});

function type(d, i, columns) {
  d.date = parseDate(d.date);
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100;
  return d;
}

</script>

The data.tsv can be seen partially in the next image (and it's exactly the same as the one available in Stacked Area Chart ):

After having those files, just uploaded them to a specific location ( home/knocktorius/data.knocktorius.com ) in a server and wanted to see it working.

This is the result I get:

How can I fix this to make it look like the one in the link?

I've tried already the following:

Use .csv instead of .tsv, changing the code accordingly (got the same result);
Change the link in the d3 script from

//d3js.org/d3.v4.min.js

to

http://d3js.org/d3.v4.min.js

Create a different .tsv file containing different data and changing the code accordingly. The result was the exact same.
Change for a different technique with a different dataset (but also .tsv) and see if the problem persists. The result is the same, shows the axis but not the data.
Check the error log. The error showing up is:
AH01276: Cannot serve directory /home/knocktorius/public_html/: No matching DirectoryIndex (index.php,index.php5,index.php4,index.php3,index.perl,index‌.pl,index.plx,index.‌ppl,index.cgi,index.‌jsp,index.js,index.j‌p,index.phtml,index.‌shtml,index.xhtml,in‌dex.html,index.htm,i‌ndex.wml,Default.htm‌l,Default.htm,defaul‌t.html,default.htm,h‌ome.html,home.htm) found, and server-generated directory index forbidden by Options directive
Check the console, under Network and it appears the file data.tsv with the correct data, as you can see in the next image:
1. Create a different subdomain associated with a different domain than before. No errors in the console log and the same result appears: can see the axis and the it doesnt get populated with data.
2. Used a different technique with JSON data. The result worked out fine:

I'm going to use the Stacked Area Chart this time, which is my goal since the beginning, pass the data to JSON and do the needed code modifications.

Keep you posted.

Answer 1

The way to make it work was to download the d3.v4.min.js from its location and change the index.html accordingly from:

<script src="http://d3js.org/d3.v4.min.js"></script>

to:

<script src="d3.v4.min.js"></script>

The result was the following:

D3.JS to create a Stacked Area Chart

Question

1 answers

solution1
0 ACCPTED 2018-01-27 14:01:14

D3.JS to create a Stacked Area Chart

Question

1 answers

solution1 0 ACCPTED 2018-01-27 14:01:14

solution1
0 ACCPTED 2018-01-27 14:01:14