Best way to center multiple geojson features in a small multiples chart

Question

I am making a small multiples chart that visualizes multiple neighborhoods.

Imagine something like this, but with neighborhoods not a country:

iraq

My issue is, when I append each path in an enter() method, each neighborhood skews such that its position reflects its position in the city at large. I want each neighborhood centered.

This image displays my trouble (each neighborhood offset from the others):

nyc2

I can use Mike Bostock's instructions for centering a map, which are all well and good. But then I need to recenter every neighborhood. How can I do that such that I'm passing an instance of d into the data.bounds() method and redefining each projection?

Here's how the initial definition of centering happens:

(function run() { 
    d3.json("./data/output.geojson", function(error, map) {


    var b = path.bounds(map),
 s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][4] - b[0][5]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][6] + b[0][7])) / 2];

projection
    .scale(s)
    .translate(t);


  var chart = d3.select("#charts").selectAll("svg")
           .data(map.features)
           .enter()
           .append("svg")
               .attr("width", mapWidth )
               .attr("height", mapHeight )
               .append("g")

              chart
                .append("path")
                .attr("d", path)
                .style("fill","steelblue");

    });

})()

Will it be necessary to make each map projection its own instance of data entry with the .data().enter() pattern?

Edit:

Final version looks like this:

final

Lars Kotthoff · Accepted Answer · 2014-09-23T21:15:14.700

2

You can use .each():

chart.append("path")
  .each(function(d) {
    var b = path.bounds(d),
        s = 1.5 / Math.max((b[1][0] - b[0][0]) / mapWidth, (b[1][1] - b[0][1]) / mapHeight),
        t = [(mapWidth - s * (b[1][0] + b[0][0])) / 2, (mapHeight - s * (b[1][1] + b[0][1])) / 2];

    projection.scale(s).translate(t);
    d3.select(this).attr("d", path);
  });

This doesn't quite work because the bounds of a feature depend on the projection the path is using. By changing the projection, you're also changing the bounds of subsequent features. To fix that, reset the projection parameters to their previous values after setting the d attribute:

var os = projection.scale(),
    ot = projection.translate();

// ...

projection.scale(s).translate(t);
d3.select(this).attr("d", path);
projection.scale(os).translate(ot);

edited Sep 23 '14 at 21:15

answered Sep 23 '14 at 20:26

Lars Kotthoff

107,425
16
204
204

For some reason, the data is not populating the path -- getting NaN values. – Union find Sep 23 '14 at 20:32
Implementation is the same: chart.append("path") .each(function(d) { var b = path.bounds(d), s = 1.5 / Math.max((b[1][0] - b[0][0]) / mapWidth, (b[1][4] - b[0][5]) / mapHeight), t = [(mapWidth - s * (b[1][0] + b[0][0])) / 2, (mapHeight - s * (b[1][6] + b[0][7])) / 2]; console.log(b) projection.scale(s).translate(t); d3.select(this).attr("d", path); }) .style("fill","#d2d2d2") .style("stroke","#777777"); – Union find Sep 23 '14 at 20:37
Very odd because console.log(map.features[0]) works and is the same as d in the first .enter() iteration – Union find Sep 23 '14 at 20:40
It's able to compute "b" for the first d. Subsequent objects do not compute d (and s and t are never computed..) – Union find Sep 23 '14 at 20:46
Hmm, that should work. Did you verify that the code is called for all elements in your selection? – Lars Kotthoff Sep 23 '14 at 20:51
It is. For the first d, the b variable is populated with the arrays. The s and t variables are assigned NaN values, though. First the subsequent d iterations (there must be a better way of saying this?) all values go to NaN. – Union find Sep 23 '14 at 20:53
Yes (aditional characters..) – Union find Sep 23 '14 at 20:57
Oh wait, of course. By changing the projection, the bounds of subsequent features will also change. Hang on, will edit. – Lars Kotthoff Sep 23 '14 at 21:00
Ok, please see above for now hopefully working solution. – Lars Kotthoff Sep 23 '14 at 21:03
The bounds are being calculated properly. S and t are still NaN however. – Union find Sep 23 '14 at 21:05
Hmm, does it work if you define the projection inside the `.each()`? – Lars Kotthoff Sep 23 '14 at 21:07
I'm not sure what you mean. S and t are necessarily for the projection? – Union find Sep 23 '14 at 21:07
Instead of modifying the same projection, define it and the path inside `.each()` -- `var projection = ...`. – Lars Kotthoff Sep 23 '14 at 21:08
The issue seems to be that b[0][5] is undefined (as are other b specified arrays). The shape of the array is 2x2 I think.. – Union find Sep 23 '14 at 21:10
b contains two two dimensional arrays – Union find Sep 23 '14 at 21:11
Ahhh yes, it's a bounding box. Not sure how that code you've posted worked for you in the first place? – Lars Kotthoff Sep 23 '14 at 21:11
I think because it was for the entire map of objects, not the individual features. The above code is from Bostock. – Union find Sep 23 '14 at 21:12
Do you know how the bounding box is constructed? Will need to figure out the data structure otherwise. – Union find Sep 23 '14 at 21:13
The code you've posted isn't the code from the question you've linked to. Let me fix in my answer. – Lars Kotthoff Sep 23 '14 at 21:13
Oh you're right. That's a bug in Stackoverflow, actually. – Union find Sep 23 '14 at 21:14
See: http://meta.stackexchange.com/questions/184140/markdown-editor-messing-with-arrays-of-arrays Will fix my post too. Time to test. – Union find Sep 23 '14 at 21:15
Great! Annoying that SO messes up things here though. – Lars Kotthoff Sep 23 '14 at 21:17

Best way to center multiple geojson features in a small multiples chart

1 Answers1