I am unable to get the output for the code below

Question

I am trying to get the data for my chart from data.csv file

 <!DOCTYPE html>
 <html>
 <head>
 <title>D3 test</title>
      <style>

   .grid .tick {
   stroke: lightgrey;
    opacity: 0.7;
  }
  .grid path {
stroke-width: 0;
   }
.chart {
 }
.main text {
  font: 10px sans-serif;
  }
.axis line, .axis path {
 shape-rendering: crispEdges;
  stroke: black;
  fill: none;
  }
 circle {
 fill: steelblue;
   }



      </style>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js">   

                </script>
       <script src="http://d3js.org/d3.v3.min.js"></script>
      <script src="http://d3js.org/topojson.v1.min.js"></script>
      </head>
  <body>
  <div class='content'>
    <!-- /the chart goes here -->
       </div>

        <script type="text/javascript" src="scatterchart.js"></script>

      </body>
    </html>

And the code for scatterchart.js

         var data = []
        d3.csv("data.csv", function(csvData) {

         data = csvData.forEach(function(d) { return [ +d.first, +d.second ] });
          console.log(data);

           var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);


       var margin = {
        top: 20,
       right: 15,
       bottom: 60,
       left: 25
        }, width = 950 - margin.left - margin.right,
        height = 480 - margin.top - margin.bottom;

      var x = d3.scale.linear()
      .domain([0, d3.max(data, function (d) {
      return d[0];
        })])
       .range([0, width]);

       var y = d3.scale.linear()
      .domain([0, d3.max(data, function (d) {
    return d[1];
        })])
      //.range([height, 0]) //flip y
     .range([0, height]);

  var chart = d3.select('body')
   .append('svg:svg')
   .attr('width', width + margin.right + margin.left)
   .attr('height', height + margin.top + margin.bottom)
   .attr('class', 'chart');

  var main = chart.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .attr('width', width)
  .attr('height', height)
  .attr('class', 'main');

     // draw the x axis
    var xAxis = d3.svg.axis()
      .scale(x)
     //.orient('bottom')
     .orient('top'); // adjust ticks to new x axis position

      main.append('g')
     //.attr('transform', 'translate(0,' + height + ')')
     .attr('transform', 'translate(0,0)') // move x axis up
       .attr('class', 'main axis date')
     .call(xAxis);

       // draw the y axis
        var yAxis = d3.svg.axis()
       .scale(y)
       .orient('left');

       main.append('g')
      .attr('transform', 'translate(0,0)')
      .attr('class', 'main axis date')
      .call(yAxis);

      var g = main.append("svg:g");

       g.selectAll("scatter-dots")
      .data(data)
      .enter().append("svg:circle")
      .attr("cx", function (d, i) {
         return x(d[0]);
           }) 
         .attr("cy", function (d) {
      return y(d[1]);
       }) 
      .attr("r", 5)
      .style("fill", function (d) { return color(d[0]);}) ;

  // begin of drawing lines
         var line = d3.svg.line()
      .x(function(d){return x(d[0]);})
     .y(function(d){return y(d[1]);})
      .interpolate("linear");  

        g.append("path")
      .attr("d", function(d) { return line(data)})
       .attr("transform", "translate(0,0)")
        .style("stroke-width", 2)
      .style("stroke", "steelblue")
      .style("fill", "none");
     // end of drawing lines

        main.append("g")
      .attr("class", "grid")
       .attr("transform", "translate(0," + height + ")")
       .call(make_x_axis()
       .tickSize(-height, 0, 0)
       .tickFormat(""))

       main.append("g")
      .attr("class", "grid")
      .call(make_y_axis()
      .tickSize(-width, 0, 0)
       .tickFormat(""))

       function make_x_axis() {
       return d3.svg.axis()
       .scale(x)
      .orient("bottom")
     .ticks(30)
       }

      function make_y_axis() {
     return d3.svg.axis()
      .scale(y)
     .orient("left")
       .ticks(17)
     }
     });

And data.csv is

 first,second
  2,2
  3,3
  4,4
  5,4
  5.5,5
  6,6
  6,7
  6.5,8
  6.5,16
  17,16

The error that I'm getting in console window is [undefined scatterchart.js:6] [TypeError: n is undefined d3.v3.min.js:3]

How to get the output ?

Answer 1

The issue is in the forEach loop. I'm not entirely sure you're using it the correct way. Try this out:

csvData.forEach(function (d,i) {
    data[i] = {
      first: +d.first, 
      second: +d.second
    } 
});

What this is doing is creating an array of objects whereas in your code you were trying to return an array of arrays with 2 elements.

You can also change d[0] and d[1] to d.first and d.second if you want it's really a preference thing. I think the dot notation makes things clearer but there are times when you need to use bracket notation.

Also, you'll have to ensure that you're using data everywhere and not csvData as there's a mixture in your code.

You can find a working example here .

I am unable to get the output for the code below

Question

1 answers

solution1
0 ACCPTED 2014-03-24 11:57:02

I am unable to get the output for the code below

Question

1 answers

solution1 0 ACCPTED 2014-03-24 11:57:02

solution1
0 ACCPTED 2014-03-24 11:57:02