d3.js chart won't display using tsv file

Question

I am a d3js noobie so please bear with me. I'm following Mike Bostock's step-by-step tutorial on how to create a bar chart with external data files. I am using the file format tsv, which I created by entering data into Excel, saving it as a txt file then renaming the extension to tsv. I then set up a local web server with python -m SimpleHTTPServer per this SO answer

While all the files appear in the Directory Listing, the bar chart is still absent. No errors appear in my console. I'm wondering if it's a problem with how the values are separated in my tsv file though it appears the same as the example. I'd really appreciate any help as I'm eager to get started with d3js.

Edit: I'm not sure if this is relevant, but the files on local server appear at the address: http://0.0.0.0:8000/

Here's the js (copied directly from the tutorial):

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8">
<script>

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width);

d3.tsv("data2.tsv", type, function(error, data) {
  x.domain([0, d3.max(data, function(d) { return d.value; })]);

  chart.attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight - 1);
d
  bar.append("text")
      .attr("x", function(d) { return x(d.value) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>

and the tsv file:

name    value
Locke   4
Reyes   8
Ford    15
Jarrah  16
Shephard    23
Kwon    42

Excel creates file with its own file type chracteristics, so xls or xlsx is different then tsv. tsv stands for Tab Separated Value and the values inside are indented with tabs. It is just plain text file properly formated. You should save the file as tsv in Excel if you want to use it with d3.tsv() function. Otherwise you can also use csv(Comma Separated Value) file which is similar to tsv except all is separated with commas. Check d3.csv() in the d3 API reference. — Vlad, Dec 14 '16 at 14:04
d3.tsv() or d3.csv() cannot read xls or xlsx files and changing the file type from xls or xlsx to tsv or txt will not make the file readable in d3. — Vlad, Dec 14 '16 at 14:05
You should have the file locally in you web application root folder called as: data2.tsv — Vlad, Dec 14 '16 at 14:07
Thanks for the help, i didn't copy the DOCTYPE tag and style tags so that's why nothing was showing up. — I Like, Dec 14 '16 at 20:01

score 1 · Answer 1 · answered Dec 14 '16 at 18:42

1

Two issues most likely:

You do no close this tag:

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8">
And d3.js v4 flattened the namespace from d3.js v3 so:

var x = d3.scale.linear()

should read:

 var x = d3.scaleLinear()

answered Dec 14 '16 at 18:42

Andrew Reid

37,021
7
64
83

d3.js chart won't display using tsv file

1 Answers1