CODEWITHSUNDEEP
javascriptcsvd3.jsdata-visualization
practicemakesperfect
practicemakesperfect

Reputation: 414

data is undefined after importing from a csv file with d3

I drew a world map with d3 and a json file, and are trying to draw circles on the map based on my data.

I imported my data with the d3.csv() function, as you can see below. However, data doesn't seem to be recognized for my function function plot_points(data). When I type data in the console in the function, it keeps telling me data is undefined. It's interesting because I used the exact same code for another project before, and data would be recognized as an array of object. Can you tell what's wrong?

<head>
    <script type="text/javascript">
      function draw(geo_data) {
        "use strict";
        var margin = 75,
            width = 1400 - margin,
            height = 600 - margin;

        d3.select("body")
                .append("h2")
                .text("Circle Graph");

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class', 'map');

        var projection = d3.geo.mercator()
                               .scale(150)
                               .translate([width / 2, height / 1.2]);

        var path = d3.geo.path().projection(projection);

        var map = svg.selectAll('path')
                     .data(geo_data.features)
                     .enter()
                     .append('path')
                     .attr('d', path)
                     .style('fill', 'lightBlue')
                     .style('stroke', 'black')
                     .style('stroke-width', 0.5);

        // debugger;
        // here data is undefined
        function plot_points(data) {
            // debugger;
            // here data is undefined as well
        };

        d3.csv("data/olympics_editions.csv", function(d) {
          // debugger;
          // here d is each data point/object, and seems to be working just fine
          d['Year'] = format.parse(d['Year']);
          d['Latitude'] = +d['Latitude'];
          d['Longitude'] = +d['Longitude'];
          return d;
        }, plot_points);

      };
    </script>
  </head>
  <body>
    <script type="text/javascript">
      d3.json("data/world_countries.json", draw);
    </script>
  </body>

Upvotes: 1

Views: 2787

Answers (1)

Josh
Josh

Reputation: 332

From the d3.csv documentation, the signature for the callback is as follows:

function(error, rows) {

});

try adding an error parameter to your plot_points function:

function plot_points(error,data) {

};

Upvotes: 1

Related Questions