A visualization of fake data that shows connections between points on a map.
forked from mbostock's block: Equirectangular (Plate Carrée)
forked from maureentsakiris's block: Invitations
Built with blockbuilder.org
license: mit |
A visualization of fake data that shows connections between points on a map.
forked from mbostock's block: Equirectangular (Plate Carrée)
forked from maureentsakiris's block: Invitations
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, | |
userColor = "orange", | |
userSize = 4, | |
linkColor = "orange"; | |
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); | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "graticule") | |
.attr("d", path); | |
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) { | |
if (error) throw error; | |
svg.insert("path", ".graticule") | |
.datum(topojson.feature(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
d3.csv("invitation_chain.csv", type, function (data){ | |
svg.selectAll("circle").data(data).enter().append("circle") | |
.attr("r", userSize) | |
.attr("fill", userColor) | |
.attr("cx", function (d){ return d.projected[0]; }) | |
.attr("cy", function (d){ return d.projected[1]; }); | |
var links = generateLinks(data); | |
svg.selectAll("line").data(links).enter().append("line") | |
.attr("r", 4) | |
.attr("stroke", linkColor) | |
.attr("stroke-width", "1px") | |
.attr("x1", function (d){ return d.projected[0]; }) | |
.attr("y1", function (d){ return d.projected[1]; }) | |
.attr("x2", function (d){ return d.projected_invited_by[0]; }) | |
.attr("y2", function (d){ return d.projected_invited_by[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; | |
} | |
function generateLinks(data){ | |
locationsByUser = {}; | |
data.forEach(function (d){ | |
locationsByUser[d.user_name] = d.projected; | |
}); | |
return data.filter(function (d){ | |
return d.invited_by_user_name; | |
}).map(function (d){ | |
d.projected_invited_by = locationsByUser[d.invited_by_user_name]; | |
//console.log(d.projected_invited_by); | |
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 |