CODEWITHSUNDEEP
csvd3.jsdrawing
English Grad
English Grad

Reputation: 1395

Drawing from a csv in D3

I am trying to draw circles from a csv that has a bunch of x and y coordinates in it. I am new to D3 and don't know where to go next. here is the code

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
  </head>
  <body>
    <script type="text/javascript">

d3.xml("brussels3.svg", "image/svg+xml", function(xml) {
   document.body.appendChild(xml.documentElement);

d3.csv("brusselsconverteddata.csv")
    .row(function(d) { return {key: +d.key, value: +d.value}; })
    .get(function(error, rows) { console.log(rows); });

   var svg = d3.select('svg');

   svg.append("circle")
    .style("stroke", "gray")
    .style("fill", "black")
    .attr("r", 15)
    .attr("cx", 2142)
    .attr("cy", 2209)
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "black");});


});



    </script>
  </body>
</html>

I am not sure how to iterate over the list of coordinates in D3. I am confused as to what to put in the cx and cy .attr to iterate the list.

Upvotes: 0

Views: 1376

Answers (1)

tomtomtom
tomtomtom

Reputation: 1522

you should set up the callback of the csv better, at the moment it lacks the second part, d3.csv("brusselsconverteddata.csv", function (error, dataset) { //draw something here }); also the circle should be generated like so:

svg.selectAll("circles")
.data(dataset)
.enter()
.append("circle")
.attr("r", //your radius value)
.attr("cx", function (d) { return d.the_x_value_in_the_csv; })
.attr("cy", function (d) { return d.the_y_value_in_the_csv; })

and so on

Upvotes: 1

Related Questions