Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpmckenna8/8894003 to your computer and use it in GitHub Desktop.
Save mpmckenna8/8894003 to your computer and use it in GitHub Desktop.
Download ZIP
S'Mile Map Demo
Raw
readme.md

SMile Map start

Starting out a map for S'Mile. Countries are identified by their ISO 3166-1 numeric code. Now to find some cool data from the UNHCR and the S'Mile platform itself to make this map amazing. It is really just generally copied from http://bl.ocks.org/mbostock/4180634 with a little styling.

For now I'll settle for eh, but don't let that stop you making it better and checking out and getting involved with S-Mile, to get refugees your bonus airline miles so they can reconnect with their families in person.

https://github.com/carloskcheung/S-mile

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/*//Uncomment if you want to add those lat/long lines
svg{
Background:black;
}
*/
body {
background: #fcfcfa;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #000080;
opacity:.4;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: purple;
stroke-width: .5px;
}
.country {
fill: #99d8c9;
}
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .1;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 580;
var color = d3.scale.category10();
var projection = d3.geo.kavrayskiy7()
.scale(170)
.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("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
var countries = topojson.feature(world, world.objects.countries).features,
neighbors = topojson.neighbors(world.objects.countries.geometries);
svg.selectAll(".country")
.data(countries)
.enter().insert("path", ".graticule")
.attr("class", "country")
.attr("d", path)
// .style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); });
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Display the source blob
Display the rendered blob
Raw
world-50m.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment