D3.js - Assigning X and Y axis domain as max and min of data

Question

Working with JSON data, I am able to set a domain X and Y to the minimum and maximum value of their respective data attributes, using

.y(d3.scale.linear().domain([0, d3.max(data, function(d) { return d.peopleVisited + 100; })]))

Here is an exemplary jsFiddle : http://jsfiddle.net/5H3Ay/15/

Can someone please suggest how to achieve this with csv data, using d3.csv()?

Answer 1

There should not be any difference in setting the domain, as long as you format your (CSV-) data properly.

The D3 Wiki page for CSV says that, using d3.csv.parse(string[, accessor]):

[For] the following CSV file:

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

The resulting JavaScript array is:

[
  {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
  {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]

... which is a valid JSON array. If you add peopleVisited as a header field in your CSV-file, your code should work already.

Just set up your data variable with csv.parse().

Edit You can load your CSV, for example, by calling d3.csv() with an accessor function like this:

var data = d3.map();
d3.csv("../path/to/your/file.csv", /* accessor */ function(d) {
    data.set(d.id, d.peopleVisited);
});

... which uses the column id as the key.