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