-
-
Save ptvans/3796198 to your computer and use it in GitHub Desktop.
where have i been in the world
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"where have i been in the world","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"costofliving.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"worldcountries.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"travel.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.6289991445680069,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":934,"height":530,"hide":true},"editor_json0":{"vim":false,"emacs":false,"width":825,"height":474,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":873,"height":317,"hide":true}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var col = tributary.travel; | |
var countries = tributary.worldcountries; | |
var svg = d3.select("svg"); | |
d3.select("#display").style("background-color","#242a3e") | |
var xy = d3.geo.mercator() | |
.scale(268) | |
.translate([571, 278]) | |
//then we need a path function | |
var geopath = d3.geo.path() | |
.projection(xy) | |
var days_min = 0; | |
var days_max = d3.max(col, function(d) {return d.days}); | |
var days_scale = d3.scale.sqrt() | |
.domain([days_min, days_max]) | |
.range([1, 80]) | |
var days_color_scale = d3.scale.linear() | |
.domain([days_min, days_max]) | |
.range(["#BAE747", "#1A223D"]) | |
.interpolate(d3.interpolateHcl) | |
var chart = svg.append("g") | |
.attr("transform", "translate(" + [54, 77] + ")") | |
.attr("id","chart"); | |
chart.append("g") | |
.attr("id", "countries"); | |
chart.append("g") | |
.attr("id", "points") | |
var labels = chart.append("g") | |
.classed("labels",true) | |
.attr("id", "labels") | |
var countriesGroup = chart.select("#countries"); | |
//create a path for each country | |
countriesGroup.selectAll("path") | |
.data(countries.features) | |
.enter() | |
.append("path") | |
.attr("d", geopath) | |
.attr("id", function(d) { | |
return d.properties.name; | |
}) | |
.classed("country", true) | |
.style({ | |
fill:"#000000", | |
"fill-opacity": 0.26, | |
stroke:"#6682AC", | |
"stroke-width": 0.5, | |
"stroke-opacity": 0.5 | |
}) | |
//countriesGroup.select("#Antarctica").remove(); | |
var lbltxt = labels.selectAll("g.lbltxt") | |
.data(col,function(d){ | |
return d.city; | |
}) | |
.enter() | |
.append("g") | |
.classed("lbltxt", true) | |
.attr({ | |
"text-anchor": "middle", | |
"font-weight": 300, | |
"font-size": 9, | |
"fill-opacity":0.5, | |
"pointer-events":"none", | |
"fill": "#FFFFFF" | |
}) | |
.append("text") | |
.text(function(d) { | |
return (d.city); | |
}) | |
.attr("transform", function(d) { | |
var p = xy([d.lon, d.lat]); | |
return "translate(" + p + ")"; | |
}) | |
.attr({"alignment-baseline":"after-edge"}) | |
var points = chart.select("#points") | |
.selectAll("circle") | |
.data(col) | |
.enter() | |
.append("circle") | |
points | |
.attr("transform", function(d) { | |
var p = xy([d.lon, d.lat]); | |
return "translate(" + p + ")"; | |
}) | |
.attr({ | |
"r": function(d) { | |
return days_scale(d.days); | |
}, | |
fill: function(d) { | |
return days_color_scale(d.days); | |
}, | |
"fill-opacity": 0.4, | |
"stroke":"#C5EE6D", | |
"stroke-width": 0.5 | |
}) | |
.append("title") | |
.text(function(d) { | |
return (d.city + ", " + d.days + " days"); | |
}) | |
points | |
.on("mouseover", function(d,i) { | |
labels.selectAll("g.lbltxt") | |
.data([d],function(c){ | |
return c.city; | |
}) | |
.attr({ | |
"fill-opacity": 1, | |
"font-size": 11, | |
"font-weight": 700 | |
}) | |
.on("mouseover") | |
.attr({"fill-opacity": 1}) | |
}) | |
.on("mouseout", function(d,i) { | |
labels.selectAll("g.lbltxt") | |
.data([d],function(c){ | |
return c.city; | |
}) | |
.attr({ | |
"fill-opacity": 0.5, | |
"font-size": 9, | |
"font-weight": 300 | |
}) | |
}) | |
//TITLE TEXT | |
var shade = svg.append("rect") | |
shade.attr({ | |
rx: 9, | |
x: 392, | |
y: 294, | |
height: 87, | |
width: 437, | |
"fill-opacity": 0.25 | |
}) | |
var title = svg.append("text") | |
.text("WHERE HAVE I BEEN?") | |
.attr({ | |
"transform": "translate(" + [610, 342] + ")", | |
"text-anchor": "middle", | |
"font-weight": 300, | |
"font-size": 42, | |
"fill-opacity": 0.7, | |
"fill": "#C8D7EC" | |
}) | |
var subtitle = svg.append("text") | |
.text("(size represents duration of time spent)") | |
.attr({ | |
"transform": "translate(" + [610, 365] + ")", | |
"text-anchor": "middle", | |
"font-weight": 500, | |
"font-size": 12, | |
"fill": "#97BB6A" | |
}) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"city": "Zurich", | |
"country": " Switzerland", | |
"lat": 47.3690239, | |
"lon": 8.5380326, | |
"days": 10, | |
"year": 2012, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Davos", | |
"country": " Switzerland", | |
"lat": 46.8045, | |
"lon": 9.8367, | |
"days": 1, | |
"year": 2012, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "London", | |
"country": " United Kingdom", | |
"lat": 51.5001524, | |
"lon": -0.1262362, | |
"days": 3, | |
"year": 2012, | |
"purpose": "airport" | |
}, | |
{ | |
"city": "Paris", | |
"country": " France", | |
"lat": 48.8566667, | |
"lon": 2.3509871, | |
"days": 1, | |
"year": 2012, | |
"purpose": "airport" | |
}, | |
{ | |
"city": "Amsterdam", | |
"country": " Netherlands", | |
"lat": 52.3738007, | |
"lon": 4.8909347, | |
"days": 1, | |
"year": 2012, | |
"purpose": "airport" | |
}, | |
{ | |
"city": "Venice", | |
"country": " Italy", | |
"lat": 45.4343363, | |
"lon": 12.3387844, | |
"days": 5, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Treviso", | |
"country": " Italy", | |
"lat": 45.6667, | |
"lon": 12.25, | |
"days": 1, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Chicago", | |
"country": " United States", | |
"lat": 41.850033, | |
"lon": -87.6500523, | |
"days": 540, | |
"year": 2007, | |
"purpose": "lived" | |
}, | |
{ | |
"city": "San Francisco", | |
"country": " United States", | |
"lat": 37.775206, | |
"lon": -122.419209, | |
"days": 1080, | |
"year": 2009, | |
"purpose": "live" | |
}, | |
{ | |
"city": "Seattle", | |
"country": " United States", | |
"lat": 47.620973, | |
"lon": -122.347276, | |
"days": 4, | |
"year": 2011, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Toronto", | |
"country": " Canada", | |
"lat": 43.670233, | |
"lon": -79.386755, | |
"days": 3, | |
"year": 1990, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Reykjavik", | |
"country": " Iceland", | |
"lat": 64.135338, | |
"lon": -21.89521, | |
"days": 7, | |
"year": 2013, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "New York", | |
"country": " United States", | |
"lat": 40.756054, | |
"lon": -73.986951, | |
"days": 30, | |
"year": 2007, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Munich", | |
"country": " Germany", | |
"lat": 48.1391265, | |
"lon": 11.5801863, | |
"days": 2, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Los Angeles", | |
"country": " United States", | |
"lat": 34.0522342, | |
"lon": -118.2436849, | |
"days": 180, | |
"year": 63.97, | |
"purpose": 73.58 | |
}, | |
{ | |
"city": "San Diego", | |
"country": " United States", | |
"lat": 32.7153292, | |
"lon": -117.1572551, | |
"days": 3, | |
"year": 2011, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Phoenix", | |
"country": " United States", | |
"lat": 33.4483771, | |
"lon": -112.0740373, | |
"days": 2, | |
"year": 2009, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Koblenz", | |
"country": " Germany", | |
"lat": 50.3597, | |
"lon": 7.5978, | |
"days": 20, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Cologne", | |
"country": " Germany", | |
"lat": 50.9406645, | |
"lon": 6.9599115, | |
"days": 2, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Frankfurt", | |
"country": " Germany", | |
"lat": 50.1115118, | |
"lon": 8.6805059, | |
"days": 2, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Berlin", | |
"country": " Germany", | |
"lat": 52.5234051, | |
"lon": 13.4113999, | |
"days": 3, | |
"year": 35.8, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "Sevilla", | |
"country": " Spain", | |
"lat": 37.38264, | |
"lon": -5.9962951, | |
"days": 7, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Barcelona", | |
"country": " Spain", | |
"lat": 41.387917, | |
"lon": 2.1699187, | |
"days": 5, | |
"year": 2013, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "Hong Kong", | |
"country": " Hong Kong", | |
"lat": 22.4060834, | |
"lon": 114.1201536, | |
"days": 10, | |
"year": 2007, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Madrid", | |
"country": " Spain", | |
"lat": 40.4166909, | |
"lon": -3.7003454, | |
"days": 3, | |
"year": 2006, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Dallas", | |
"country": " United States", | |
"lat": 32.802955, | |
"lon": -96.769923, | |
"days": 1, | |
"year": 2007, | |
"purpose": "airport" | |
}, | |
{ | |
"city": "Saint Louis", | |
"country": " United States", | |
"lat": 38.6270025, | |
"lon": -90.1994042, | |
"days": 2, | |
"year": 2009, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Curitiba", | |
"country": " Brazil", | |
"lat": -25.4283563, | |
"lon": -49.2732515, | |
"days": 5, | |
"year": 2013, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "Denver", | |
"country": " United States", | |
"lat": 39.7391536, | |
"lon": -104.9847034, | |
"days": 5, | |
"year": 2008, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Austin", | |
"country": " United States", | |
"lat": 30.267153, | |
"lon": -97.7430608, | |
"days": 3, | |
"year": 2010, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Des Moines", | |
"country": " United States", | |
"lat": 41.6005448, | |
"lon": -93.6091064, | |
"days": 2, | |
"year": 2008, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Las Vegas", | |
"country": " United States", | |
"lat": 36.114646, | |
"lon": -115.172816, | |
"days": 3, | |
"year": 2011, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Santiago", | |
"country": " Chile", | |
"lat": -33.4253598, | |
"lon": -70.5664659, | |
"days": 5, | |
"year": 2013, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "Buenos Aires", | |
"country": " Argentina", | |
"lat": -34.6084175, | |
"lon": -58.3731613, | |
"days": 6, | |
"year": 2013, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "Guangzhou", | |
"country": " China", | |
"lat": 23.129163, | |
"lon": 113.264435, | |
"days": 3, | |
"year": 2008, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Krakow", | |
"country": " Poland", | |
"lat": 50.0646501, | |
"lon": 19.9449799, | |
"days": 4, | |
"year": 2012, | |
"purpose": "desire" | |
}, | |
{ | |
"city": "Negril", | |
"country": "Jamaica", | |
"lat": 18.1315, | |
"lon": -77.2736, | |
"days": 7, | |
"year": 2007, | |
"purpose": "travel" | |
}, | |
{ | |
"city": "Guatemala City", | |
"country": "Guatemala", | |
"lat": 14.6317, | |
"lon": -90.5263, | |
"days": 7, | |
"year": 2007, | |
"purpose": "travel" | |
} | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment