0

I'm learning d3.js, and I'm trying to create a bar chart from a .csv file (names of students and their grades). I wrote the code below, but it doesn't generate any bar chart, and I can't understand why. Can you help, please? Thank you!

Here's my .csv file:

Name,Grade John,95 Jennifer,96 Hank,100 Christina,98 Paul,88 Amy,76 Raul,72 Samantha,70 Sean,68 Abby,90 Sally,85

  <script type="text/javascript">


    d3.csv("votiOne.csv", function(data) {

      var canvas = d3.select("body")
          .append("svg")
          .attr("width", 500)
          .attr("height", 500);

      canvas.selectAll("rect")
          .data(data)
          .enter()
              .append("rect")
              .attr("width", function (d) { return d.Grade; })
              .attr("height", 50)
              .attr("y", function (d, i) { return i * 50; })
              .attr("fill", "blue");

    })


  </script>
nrusin
  • 5
  • 2
  • 1
    Possible duplicate of [Parse and upload a csv file in D3.js V5](https://stackoverflow.com/questions/50110717/parse-and-upload-a-csv-file-in-d3-js-v5) – altocumulus Feb 17 '19 at 13:51

1 Answers1

0

It works depending on the d3 version you are using:

For d3 version 4, the code should work:

...
<script src="https://d3js.org/d3.v4.min.js"></script>
...
d3.csv("votiOne.csv", function(data) {
...

For d3 version 5, the code is using a Promise (see also this SO Question) and looks like this:

...
<script src="https://d3js.org/d3.v5.min.js"></script>
...
d3.csv("votiOne.csv").then(function(data) {
...

Full working examples:

ee2Dev
  • 1,938
  • 20
  • 29