1

I am trying to draw check in information in a d3 canvas. I'm using this popular script to create the map and draw the points.

I can draw roughly 12000 points, after that the script refuses to draw anything on the canvas. Could someone point out what I might be doing wrong?

<script>
    var width = 960,
        height = 480;

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

    var projection = d3.geo.equirectangular()
      .scale(153)
        .translate([width/2,height/2])


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

    var graticule = d3.geo.graticule();


    geo_data = [];
    d3.csv("data/2008.csv", function(x){
        console.log(x.length)
        for (i = 12000; i < 24000; i++) { 
          geo_data.push([x[i].lat, x[i].long])
        }        
    });

    d3.json("https://gist.githubusercontent.com/abenrob/787723ca91772591b47e/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, world) {
        svg.append("g")
          .attr("class", "land")
        .selectAll("path")
          .data([topojson.object(world, world.objects.land)])
          .enter().append("path")
          .attr("d", path);
      svg.append("g")
          .attr("class", "boundary")
        .selectAll("boundary")
          .data([topojson.object(world, world.objects.countries)])
          .enter().append("path")
          .attr("d", path);
      svg.append("g")
        .attr("class", "graticule")
        .selectAll("path")
        .data(graticule.lines)
        .enter().append("path")
        .attr("d", path);

      svg.selectAll("circle")
        .data(geo_data)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return projection(d)[0]; })
        .attr("cy", function (d) { return projection(d)[1]; })
        .attr("r", "2px")
        .attr("fill", "red")
    });

  </script>

canvas with 12000 points

The csv file contains information in this format

lat,long
 -104.934812, 39.711152
 -104.984703, 39.739154
 -105.09543, 39.802002
Buggy Coder
  • 383
  • 5
  • 17
  • `after that the script refuses to draw anything on the canvas`, what does that mean? Do you get an error? – Mark Sep 26 '17 at 17:02
  • @Mark, no error whatsoever. – Buggy Coder Sep 26 '17 at 17:03
  • Your issues are probably related to the race-condition in your code. `d3.csv` and `d3.json` are both async and your drawing of the circles may process before you get the data of the circles. At a minimum, move the `d3.csv` inside the callback of the `d3.json`. A better way, though, would be to use d3.queue. – Mark Sep 26 '17 at 17:04
  • I see! I'll try this, and get back! – Buggy Coder Sep 26 '17 at 17:11
  • 1
    Perhaps you've run out of memory. SVG is not a suitable technology for this use case. – Robert Longson Sep 26 '17 at 17:23
  • @Mark, could you kindly show how I use use d3.queue in this case? – Buggy Coder Sep 26 '17 at 17:27
  • I tried moving in the d3.csv inside d3.json. didn't help. – Buggy Coder Sep 26 '17 at 17:29
  • Can I ask what the purpose of this line is: `for (i = 12000; i < 24000; i++) { `? – Mark Sep 26 '17 at 17:49
  • I was getting about 12000 points before it would stop working. So I was just checking if I took another 12000 chunk of data (not the initial 0:12000), the program would behave differently - which it did not. – Buggy Coder Sep 26 '17 at 17:53
  • To @RobertLongson point above, what does `refuse to draw anything on the canvas mean`? Is the application still responsive? Does the browser lockup? That's a lot of SVG circles... – Mark Sep 26 '17 at 17:56
  • I meant, the output was only the map without any circles. – Buggy Coder Sep 26 '17 at 18:00

0 Answers0