This example shows one way to plot the centroids of geometies using d3.path.centroid. You can also pan and zoom.
The idea here is to provide a starting point for sized donut charts, or Polar Area Small Diagrams, for all countries, on a map. The centroids however are not quite right. The US looks off-center, skewed I suppose by Alaska.
forked from mbostock's block: Equirectangular (Plate Carrée)
forked from curran's block: Invitations Links Map
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| stroke-width: .5px; | |
| stroke-opacity: .5; | |
| } | |
| .land { | |
| fill: #222; | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 480, | |
| radius = 6, | |
| fill = "rgba(255, 49, 255, 0.388)", | |
| stroke = "rgba(0, 0, 0, 0.5)", | |
| strokeWidth = 0.1; | |
| var projection = d3.geo.equirectangular() | |
| .scale(153) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var graticule = d3.geo.graticule(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var zoom = d3.behavior.zoom() | |
| .scaleExtent([1, 20]) | |
| .on("zoom", zoomed); | |
| var g = svg.append("g"); | |
| // This invisible rect catches events for the zooming interaction. | |
| var rect = svg.append("rect") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("fill", "none") | |
| .style("pointer-events", "all") | |
| .call(zoom); | |
| g.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| function zoomed(){ | |
| g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| } | |
| d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) { | |
| if (error) throw error; | |
| g.insert("path", ".graticule") | |
| .datum(topojson.feature(world, world.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| g.insert("path", ".graticule") | |
| .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| var features = topojson.feature(world, world.objects.countries).features; | |
| var centroids = features.map(function (feature){ | |
| return path.centroid(feature); | |
| }); | |
| g.selectAll(".centroid").data(centroids) | |
| .enter().append("circle") | |
| .attr("class", "centroid") | |
| .attr("fill", fill) | |
| .attr("stroke", stroke) | |
| .attr("stroke-width", strokeWidth) | |
| .attr("r", radius) | |
| .attr("cx", function (d){ return d[0]; }) | |
| .attr("cy", function (d){ return d[1]; }); | |
| }); | |
| function type(d){ | |
| // This should actually be [d.longitude, d.latitude] | |
| // It looks like these are reversed in the data. | |
| d.projected = projection([d.latitude, d.longitude]); | |
| return d; | |
| } | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
| person_name | city | longitude | latitude | user_name | invited_by_user_name | date_joined | |
|---|---|---|---|---|---|---|---|
| Chini | Lima | -12.111062 | -77.031591 | Chini | 1448760609 | ||
| Manin | Selaya | 43.217365 | -3.807661 | Manin | Chini | 1448820431 | |
| Sonia | Madrid | 40.416775 | -3.703790 | Sonia | Manin | 1448906609 | |
| Alisa | Berlin | 52.501939 | 13.419998 | Alisa | Sonia | 1449383312 | |
| Maria | Esles | 43.282646 | -3.805119 | Maria | Alisa | 1449529704 | |
| Lippe | Esles | 43.282646 | -3.805119 | Lippe | Maria | 1449712220 | |
| Farid | Prague | 50.075538 | 14.437800 | Farid | Lippe | 1449748992 | |
| Hordur | Reykjavik | 64.126521 | -21.817439 | Hordur | Farid | 1449868421 | |
| Nona | Athens | 37.944072 | 23.726570 | Nona | Hordur | 1449886264 | |
| Kathleen | Bern | 46.947974 | 7.447447 | Kathleen | Nona | 1450260248 | |
| Flo | Munich | 48.201196 | 11.614568 | Flo | Kathleen | 1450267096 | |
| Inaki | Santander | 43.462306 | -3.809980 | Inaki | Flo | 1450306735 | |
| Melissa | Kapaa | 22.088139 | -159.337982 | Melissa | Inaki | 1450437055 | |
| Charlie | Boo de Guarnizo | 43.412077 | -3.843160 | Charlie | Melissa | 1450675859 | |
| Xavi | Tarragona | 41.118883 | 1.244491 | Xavi | Charlie | 1450852289 | |
| Shannon | Bothell | 47.762320 | -122.205403 | Shannon | Xavi | 1450916416 | |
| Canan | Brussels | 50.850340 | 4.351710 | Canan | Shannon | 1450992330 | |
| Elisa | Berlin | 52.487600 | 13.438030 | Elisa | Canan | 1451287788 | |
| Barbara | Recife | -8.057838 | -34.882897 | Barbara | Elisa | 1451903727 | |
| Franca | Munich | 48.135125 | 11.581981 | Franca | Barbara | 1451979271 | |
| Scott | Lausanne | 46.519653 | 6.632273 | Scott | Franca | 1452037361 | |
| Benji | Dublin | 53.349805 | -6.260310 | Benji | Scott | 1452052412 | |
| Baba | Garching | 48.252050 | 11.659620 | Baba | Benji | 1452111282 | |
| Janet | London | 51.507351 | -0.127758 | Janet | Baba | 1452119239 | |
| Kelsey | Los Angeles | 34.052234 | -118.243685 | Kelsey | Janet | 1452157676 | |
| Megan | Seattle | 47.606209 | -122.332071 | Megan | Kelsey | 1452232529 | |
| Viktoria | Lugansk | 48.574041 | 39.307815 | Viktoria | Megan | 1452445134 | |
| Matthias | Berlin | 52.483810 | 13.440940 | Matthias | Viktoria | 1453061872 | |
| Eric | Nice | 43.710173 | 7.261953 | Eric | Matthias | 1453194221 | |
| Soern | Oslo | 59.913869 | 10.752245 | Soern | Eric | 1453257390 | |
| Angela | Mytilene | 39.106738 | 26.557275 | Angela | Soern | 1453332443 | |
| Nassos | Kiel | 54.347260 | 10.134514 | Nassos | Angela | 1453365451 | |
| Katya | Moscow | 55.755826 | 37.617300 | Katya | Nassos | 1453851367 | |
| Xenia | Kiev | 50.450100 | 30.523400 | Xenia | Katya | 1454006641 | |
| Patricia | Bucharest | 44.426767 | 26.102538 | Patricia | Xenia | 1454008636 | |
| Katie | Sydney | -33.867487 | 151.206990 | Katie | Patricia | 1454123563 | |
| Fio | Lima | -12.046374 | -77.042793 | Fio | Katie | 1454199445 | |
| Wolle | Cologne | 50.937531 | 6.960279 | Wolle | Fio | 1454263756 | |
| Guille | Barcelona | 41.385064 | 2.173403 | Guille | Wolle | 1454267750 | |
| Lorenzo | Turin | 45.070312 | 7.686856 | Lorenzo | Guille | 1454398699 | |
| Tom | Washington D.C | 38.907192 | -77.036871 | Tom | Lorenzo | 1454505741 | |
| Sully | Istanbul | 41.008238 | 28.978359 | Sully | Tom | 1454663315 | |
| Rafo | Lima | -12.143727 | -77.019023 | Rafo | Sully | 1454720278 | |
| Ruth | Madrid | 40.416775 | -3.703790 | Ruth | Rafo | 1454829329 | |
| Stephanie | Honolulu | 21.313149 | -158.008999 | Stephanie | Ruth | 1454962518 | |
| Grisha | Moscow | 55.755826 | 37.617300 | Grisha | Stephanie | 1455176916 | |
| Bill | Elko | 40.832421 | -115.763123 | Bill | Grisha | 1455258388 | |
| Ethna | Berlin | 52.520007 | 13.404954 | Ethna | Bill | 1455312885 | |
| Christos | Brighton | 50.822530 | -0.137163 | Christos | Ethna | 1455841414 | |
| Maureen | Kiel | 54.337072 | 10.135699 | Maureen | Christos | 1455922500 |
