Graph The Data From A Csv File

This page needs to display a graph that reads the data from a CSV file. I have been following a tutorial on TheCodingTutorials. I'm also trying to follow the Multi-Column Data tu

Solution 1:

Because your data contains a header row as its first row, you should be using d3.csv.parse instead of d3.csv.parseRows. The CSV documentation explains the differences.

The result of parsing will be something that looks like this:

[
    {"names": "john", "data": 78},
    {"names": "brad", "data": 105},
    ...
]

So, when you use this data to create your rect elements, you get an object bound to each rect. Then when you use selection.attr or selection.style the d value you are passed will be the bound object. This means you will need to reference the property you want, either as d.names or d.data. Each column in the file will be a different property on the object (as shown above).

One other thing to consider is possibly replacing d3.text with d3.csv to retrieve the file and parse the data in one step.