Menu
I am trying to use d3.csv load iris.csv data then make a scatterplot. But the data is empty when I use debugger look inside the data.
Here is the code:
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var outerWidth = 300;
var outerHeight = 250;
var rMin = 5; // "r" stands for radius
var rMax = 20;
var xColumn = "sepal_length";
var yColumn = "petal_length";
var rColumn = "sepal_width";
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var xScale = d3.scale.linear().range([0, outerWidth]);
var yScale = d3.scale.linear().range([outerHeight, 0]);
var rScale = d3.scale.linear().range([rMin, rMax]);
function render(data) {
xScale.domain(d3.extent(data, function(d){ return d[xColumn]; }));
yScale.domain(d3.extent(data, function(d){ return d[yColumn]; }));
rScale.domain(d3.extent(data, function(d){ return d[rColumn]; }));
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle");
circles
.attr("cx", function(d){ return xScale(d[xColumn]); })
.attr("cy", function(d){ return yScale(d[yColumn]); })
.attr("r", function(d){ return rScale(d[rColumn]); });
circles.exit().remove();
}
function type(d) {
d.sepal_length = +d.sepal_length;
d.sepal_width = +d.sepal_width;
d.petal_length = +d.petal_length;
d.petal_width = +d.petal_width;
}
d3.csv("iris.csv", type, render);
</script>
</body>
</html>
Here is the csv file:
sepal_length,sepal_width,petal_length,petal_width,class
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3.0,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-setosa
5.0,3.6,1.4,0.2,Iris-setosa
5.4,3.9,1.7,0.4,Iris-setosa
4.6,3.4,1.4,0.3,Iris-setosa
5.0,3.4,1.5,0.2,Iris-setosa
4.4,2.9,1.4,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
5.4,3.7,1.5,0.2,Iris-setosa
4.8,3.4,1.6,0.2,Iris-setosa
4.8,3.0,1.4,0.1,Iris-setosa
4.3,3.0,1.1,0.1,Iris-setosa
Here is the the picture for debug
And here is the picture for iris.csv file
Can someone help me figure out what's went wrong ? Thanks
307
asked Apr 13 '26 04:04
I believe this is based off of a tutorial by Curran Kelleher? I was also having trouble with this exercise since there have been a few updates to d3 since he made the tutorial. I got stuck on the last bit of code:
d3.csv("iris.csv", type, render);
in d3 version 5, that will not work. They are now doing
d3.csv("iris.csv").then(render)
More information can be found at https://github.com/d3/d3/blob/master/CHANGES.md.
188
This is just a guess, because I didn't verify it:
Your type function does not return anything.
According to the d3 CSV description, the second method of d3.csv() is called the "accessor"-method:
An optional accessor function may be specified, which is then passed to d3.csv.parse
The documentation of csv.parse() says this:
An optional accessor function may be specified as the second argument. This function is invoked for each row in the CSV file, being passed the current row and index as two arguments. The return value of the function replaces the element in the returned array of rows; if the function returns null, the row is stripped from the returned array of rows
So I suppose that because of nothing is returned by type, the element is removed from the list and this is why you have 0 results. If you would return d; it could work.
Again, it's just a guess by looking at the documentation, maybe I'm totally wrong. If this didn't help, I'm sorry.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
