unable to load csv to d3 scatter plot

Question

Below is my d3 code, it works perfectly if I mention the dataset with its numbers. However, when i want to take data from a csv file, it doesn't not accept it.

*ERROR

Error: Invalid value for <circle> attribute cx="NaN"

Here how the csv looks like:

t       Or
16610   20635
14920   19532
13131   14814
15882   15745
15769   14993
15989   22557
14895   15387
17915   19758

Although if I try in google chrome,

console.log(dataset)

I get the data from csv but when i run it to apply, it just doesn't work in the browser.

I am using brackets as my IDE and google chrome as my default browser.

<body>

<h1> Hello World!! </h1>

<script type="text/javascript">

var dataset;
d3.csv("t.csv", function(d) {

dataset = d;

var h = 500;
var w = 1200;

var padding = 30;

var xscale = d3.scale.linear()
.domain([0,d3.max(dataset, function(d) { return d[0];})])
.range([padding, w- padding*2]);

var yscale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1];})])
.range([h-padding,padding]);

var rscale = d3.scale.linear()
.domain([0,d3.max(dataset , function(d) { return d[1];})])
.range([5,30]);

var xAxis   = d3.svg.axis()
.scale(xscale)
.orient("bottom");

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


var circle = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { return xscale(d[0]);})
.attr("cy", function(d) { return yscale(d[1]);})
.attr("r",function(d) { return rscale(d[1]);})
.on("mouseover", function(){d3.select(this).style("fill", "yellow");})
.on("mouseout", function(){d3.select(this).style("fill", function(dataset) { return "rgb(0,0," +(d*10) + ")";});});

var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d[0] + "," + d[1];})
.attr("x", function(d) { return xscale(d[0]);})
.attr("y", function(d) { return yscale(d[1]);})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill" ,"red");

svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, " + (h - padding) +")")
.call(xAxis);           
});

</script> 


</body>

Answer 1

I just tweaked my above code. using the below which i found right here

It worked

var dataset;

d3.csv("t.csv", function(error, d) {
  dataset = d.map(function(d) { return [ +d["t"], +d["Or"] ]; });

unable to load csv to d3 scatter plot

Question

1 answers

solution1
1 ACCPTED 2014-04-11 12:50:45

unable to load csv to d3 scatter plot

Question

1 answers

solution1 1 ACCPTED 2014-04-11 12:50:45

solution1
1 ACCPTED 2014-04-11 12:50:45