score:1

Here is a slightly modified version of your code whose only goal is to at least display something in your page. There would be a lot more to do to make it pretty, but at least you'll have something to start with:

d3.csv('iris.csv',function(error,data){

  data.forEach(function(d) {
    d.SepalLength= +d.SepalLength;
    d.SepalWidth = +d.SepalWidth;
    d.PetalLength = +d.PetalLength;
    d.Species = d.Species;
  });

  var w = 800;
  var h = 500;

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

  var xScale = d3.scaleLinear()
    .domain([0, d3.max(data.map(p => p.PetalLength))])
    .range([0,w]);
  var yScale = d3.scaleLinear()
    .domain([0, d3.max(data.map(p => p.SepalLength))])
    .range([h,0]);

  svg.selectAll('circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx',function(d){return xScale(d.PetalLength);})
    .attr('cy',function(d){return yScale(d.SepalLength);})
    .attr('r', 10)
    .attr('fill',function(d){return 'red';})
});

First, as you need to access data to create the svg graph, you have to include the creation of the graph within the block which extracts data. Thus you should close the d3.csv('iris.csv',function(error,data){ block after the last line which defines your graph.

This first step allows us to get rid of the error you mentioned.


Then the definition of the circles needs some tweaking:

svg.selectAll('circle')
  .data(data)
  .enter()
  .append("circle")
  .attr('cx',function(d){return xScale(d.PetalLength);})
  .attr('cy',function(d){return yScale(d.SepalLength);})
  .attr('r', 10)
  .attr('fill',function(d){return 'red';})

The append("circle") part creates the d3 circle elements.

And the r attribute defines the radius of circles.


Finally, we can tweak the scaling in order to position the circles by adjusting the scale:

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data.map(p => p.PetalLength))])
  .range([0,w]);

Related Query

More Query from same tag