CODEWITHSUNDEEP
javascriptd3.js
J86
J86

Reputation: 15237

d3 map mouseover event slow response

I am working with d3 maps and need to have a mouseover event on the polygons (areas). I have it working, but it is a little slow and I don't know why! Here is a screencast.

What is even stranger is that I have a GeoJSON file that is even larger (in kb) compared to the above, yet that one's speed is acceptable!

What is going on here? and how I can improve the page load time and responsiveness of the mouseover event?

MAP CODE

var width  = 1000;
var height = 1100;
var rotate = 60;        // so that [-60, 0] becomes initial center of projection
var maxlat = 55;        // clip northern and southern poles (infinite in mercator)

// normally you'd look this up. this point is in the middle of uk
var center = [-1.485000, 52.567000];

// instantiate the projection object
var projection = d3.geo.conicConformal()
                  .center(center)
                  .clipAngle(180)
                  // size of the map itself, you may want to play around with this in
                  // relation to your canvas size
                  .scale(10000)
                  // center the map in the middle of the canvas
                  .translate([width / 2, height / 2])
                  .precision(.1);

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 15])
    .on("zoom", zoomed);

var svg = d3.select('#map').append('svg')
            .attr('width', width)
            .attr('height', height);

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

svg.call(zoom).call(zoom.event);

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

d3.json("data/map-england.json", function(err, data) {

  g.selectAll('path')
    .data(data.features)
    .enter().append('path')
      .attr('d', path)
      .attr('class', 'border')
      .attr('stroke-width', '.5')
      .attr('id', function(d) { return d.properties.Name; })
      .on("mouseover", function(d) {
        d3.select(this).classed("active", true );
      })
      .on("mouseout", function(d) {
        d3.select(this).classed("active", false );
      });
});

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Upvotes: 2

Views: 525

Answers (1)

J86
J86

Reputation: 15237

Simplifying the paths of the map was the answer. You'll need Node, and its package TopoJson.

On Windows, I couldn't get this package to run. I had major issues with its dependcies not supporting Windows, and dependcy versions ...etc.

So I installed a Virtual Machine running Ubuntu and I was up and running in no time.

I ran the -simplify-proportion command and got back a simplifed version of the paths. The map was then super smooth and very responsive.

Upvotes: 1

Related Questions