My first map using d3.js.
This is a map of spain with province boundaries, populated places and random colors.
Followed the instructions at Let’s Make a Map.
Makefile is provided.
My first map using d3.js.
This is a map of spain with province boundaries, populated places and random colors.
Followed the instructions at Let’s Make a Map.
Makefile is provided.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
</body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 450; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.json("es.json", function(error, es) { | |
if (error) return console.error(error); | |
console.log(es); | |
var subunits = topojson.feature(es, es.objects.subunits); | |
var provinces = topojson.feature(es, es.objects.provinces); | |
var projection = d3.geo.mercator() | |
.scale(2300) | |
.center([0, 40]) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path() | |
.projection(projection); | |
svg.selectAll(".province") | |
.data(provinces.features) | |
.enter() | |
.append("path") | |
.attr("class", function(d) { return "province " + d.id; }) | |
.attr("d", path) | |
.style('fill', function(d) { return d3.hsl(Math.random() * 100, 0.5, 0.5); }); | |
svg.selectAll(".subunit") | |
.data(subunits.features) | |
.enter() | |
.append("path") | |
.attr("class", function(d) { return "subunit " + d.id; }) | |
.attr("d", path); | |
svg.append("path") | |
.datum(topojson.mesh(es, es.objects.subunits, function(a, b) { return a !== b && a.id !== "ESP"; })) | |
.attr("d", path) | |
.attr("class", "subunit-boundary"); | |
svg.append("path") | |
.datum(topojson.feature(es, es.objects.places)) | |
.attr("d", path) | |
.attr("class", "place"); | |
svg.selectAll(".place-label") | |
.data(topojson.feature(es, es.objects.places).features) | |
.enter().append("text") | |
.attr("class", "place-label") | |
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.properties.name; }); | |
svg.selectAll(".place-label") | |
.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) | |
.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }); | |
}); | |
</script> | |
</html> |
all: es.json | |
es.json: subunits.json places.json provinces.json | |
topojson \ | |
-o es.json \ | |
--id-property SU_A3 \ | |
--properties name=NAME \ | |
-- \ | |
subunits.json \ | |
provinces.json \ | |
places.json | |
subunits.json: ne_10m_admin_0_map_subunits.shp | |
ogr2ogr \ | |
-f GeoJSON \ | |
-where "ADM0_A3 IN ('ESP')" \ | |
subunits.json \ | |
ne_10m_admin_0_map_subunits.shp | |
ne_10m_admin_0_map_subunits.shp: ne_10m_admin_0_map_subunits.zip | |
unzip ne_10m_admin_0_map_subunits.zip | |
ne_10m_admin_0_map_subunits.zip: | |
wget http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_0_map_subunits.zip | |
provinces.json: ne_10m_admin_1_states_provinces.shp | |
ogr2ogr \ | |
-f GeoJSON \ | |
-where "ADM0_A3 IN ('ESP')" \ | |
provinces.json \ | |
ne_10m_admin_1_states_provinces.shp | |
ne_10m_admin_1_states_provinces.shp: ne_10m_admin_1_states_provinces.zip | |
unzip ne_10m_admin_1_states_provinces.zip | |
ne_10m_admin_1_states_provinces.zip: | |
wget http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_1_states_provinces.zip | |
places.json: ne_10m_populated_places.shp | |
ogr2ogr \ | |
-f GeoJSON \ | |
-where "ISO_A2 = 'ES' AND SCALERANK < 8" \ | |
places.json \ | |
ne_10m_populated_places.shp | |
ne_10m_populated_places.shp: ne_10m_populated_places.zip | |
unzip ne_10m_populated_places.zip | |
ne_10m_populated_places.zip: | |
wget http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_populated_places.zip | |
clean: | |
rm -rf es.json subunits.json places.json provinces.json | |
distclean: clean | |
rm -rf ne_* |
.subunit.ESC { fill: #ddc; } | |
.subunit.ESI { fill: #cdd; } | |
.subunit.ESX { fill: transparent; } | |
.subunit.SEC { fill: #dcd; } | |
.subunit.SEM { display: none; } | |
.subunit { | |
stroke: #000; | |
stroke-linejoin: round; | |
} | |
.subunit-boundary { | |
fill: none; | |
stroke: #777; | |
stroke-linejoin: round; | |
} | |
.province { | |
stroke: #000; | |
stroke-dasharray: 2,2; | |
stroke-linejoin: round; | |
} | |
.place-label { | |
font-size: 0.5em; | |
} | |