Skip to content

Instantly share code, notes, and snippets.

@chrtze

chrtze/README.md

Created October 21, 2014 18:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrtze/440f276856cf707963f5 to your computer and use it in GitHub Desktop.
Save chrtze/440f276856cf707963f5 to your computer and use it in GitHub Desktop.
Download ZIP
small multiple maps
Raw
data.json
{
"data": [{
"values": {
"Hessen": 93,
"Sachsen-Anhalt": 46,
"Mecklenburg-Vorpommern": 38,
"Nordrhein-Westfalen": 67,
"Saarland": 8,
"Brandenburg": 40,
"Schleswig-Holstein": 11,
"Bremen": 81,
"Niedersachsen": 99,
"Berlin": 95,
"Baden-Württemberg": 1,
"Thüringen": 83,
"Hamburg": 54,
"Bayern": 11,
"Rheinland-Pfalz": 4,
"Sachsen": 86
},
"key": "2004"
}, {
"values": {
"Hessen": 100,
"Sachsen-Anhalt": 43,
"Mecklenburg-Vorpommern": 81,
"Nordrhein-Westfalen": 76,
"Saarland": 83,
"Brandenburg": 42,
"Schleswig-Holstein": 32,
"Bremen": 53,
"Niedersachsen": 43,
"Berlin": 33,
"Baden-Württemberg": 77,
"Thüringen": 99,
"Hamburg": 99,
"Bayern": 76,
"Rheinland-Pfalz": 44,
"Sachsen": 81
},
"key": "2005"
}, {
"values": {
"Hessen": 31,
"Sachsen-Anhalt": 60,
"Mecklenburg-Vorpommern": 87,
"Nordrhein-Westfalen": 80,
"Saarland": 9,
"Brandenburg": 25,
"Schleswig-Holstein": 8,
"Bremen": 35,
"Niedersachsen": 99,
"Berlin": 57,
"Baden-Württemberg": 67,
"Thüringen": 94,
"Hamburg": 4,
"Bayern": 16,
"Rheinland-Pfalz": 28,
"Sachsen": 9
},
"key": "2006"
}, {
"values": {
"Hessen": 6,
"Sachsen-Anhalt": 94,
"Mecklenburg-Vorpommern": 14,
"Nordrhein-Westfalen": 62,
"Saarland": 22,
"Brandenburg": 52,
"Schleswig-Holstein": 15,
"Bremen": 28,
"Niedersachsen": 41,
"Berlin": 72,
"Baden-Württemberg": 48,
"Thüringen": 10,
"Hamburg": 40,
"Bayern": 41,
"Rheinland-Pfalz": 82,
"Sachsen": 69
},
"key": "2007"
}, {
"values": {
"Hessen": 19,
"Sachsen-Anhalt": 54,
"Mecklenburg-Vorpommern": 5,
"Nordrhein-Westfalen": 70,
"Saarland": 13,
"Brandenburg": 58,
"Schleswig-Holstein": 88,
"Bremen": 16,
"Niedersachsen": 6,
"Berlin": 86,
"Baden-Württemberg": 59,
"Thüringen": 84,
"Hamburg": 60,
"Bayern": 23,
"Rheinland-Pfalz": 15,
"Sachsen": 11
},
"key": "2008"
}, {
"values": {
"Hessen": 7,
"Sachsen-Anhalt": 2,
"Mecklenburg-Vorpommern": 13,
"Nordrhein-Westfalen": 20,
"Saarland": 8,
"Brandenburg": 88,
"Schleswig-Holstein": 17,
"Bremen": 68,
"Niedersachsen": 63,
"Berlin": 27,
"Baden-Württemberg": 41,
"Thüringen": 28,
"Hamburg": 43,
"Bayern": 98,
"Rheinland-Pfalz": 29,
"Sachsen": 5
},
"key": "2009"
}, {
"values": {
"Hessen": 40,
"Sachsen-Anhalt": 65,
"Mecklenburg-Vorpommern": 29,
"Nordrhein-Westfalen": 40,
"Saarland": 6,
"Brandenburg": 92,
"Schleswig-Holstein": 32,
"Bremen": 53,
"Niedersachsen": 77,
"Berlin": 14,
"Baden-Württemberg": 35,
"Thüringen": 28,
"Hamburg": 92,
"Bayern": 90,
"Rheinland-Pfalz": 59,
"Sachsen": 36
},
"key": "2010"
}, {
"values": {
"Hessen": 6,
"Sachsen-Anhalt": 34,
"Mecklenburg-Vorpommern": 17,
"Nordrhein-Westfalen": 96,
"Saarland": 72,
"Brandenburg": 89,
"Schleswig-Holstein": 60,
"Bremen": 5,
"Niedersachsen": 97,
"Berlin": 19,
"Baden-Württemberg": 26,
"Thüringen": 47,
"Hamburg": 22,
"Bayern": 29,
"Rheinland-Pfalz": 51,
"Sachsen": 11
},
"key": "2011"
}, {
"values": {
"Hessen": 33,
"Sachsen-Anhalt": 58,
"Mecklenburg-Vorpommern": 17,
"Nordrhein-Westfalen": 50,
"Saarland": 26,
"Brandenburg": 62,
"Schleswig-Holstein": 100,
"Bremen": 86,
"Niedersachsen": 64,
"Berlin": 86,
"Baden-Württemberg": 5,
"Thüringen": 97,
"Hamburg": 55,
"Bayern": 84,
"Rheinland-Pfalz": 63,
"Sachsen": 34
},
"key": "2012"
}, {
"values": {
"Hessen": 50,
"Sachsen-Anhalt": 47,
"Mecklenburg-Vorpommern": 73,
"Nordrhein-Westfalen": 30,
"Saarland": 67,
"Brandenburg": 34,
"Schleswig-Holstein": 84,
"Bremen": 62,
"Niedersachsen": 12,
"Berlin": 93,
"Baden-Württemberg": 15,
"Thüringen": 9,
"Hamburg": 85,
"Bayern": 5,
"Rheinland-Pfalz": 55,
"Sachsen": 47
},
"key": "2013"
}]
}
Display the source blob
Display the rendered blob
Raw
ger-states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Small Multiple Maps</title>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='http://d3js.org/queue.v1.min.js'></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
#vis {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
#vis div {
float: left;
position: relative;
}
#vis path {
fill: #2ca25f;
stroke: #FFF;
stroke-width: 1px;
}
#vis p.legend {
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
font-weight: bold;
font-size: 11px;
}
</style>
</head>
<body>
<div id='vis'></div>
<script>
var Vis = (function(d3) {
var geojson;
queue()
.defer(d3.json, 'ger-states.json')
.defer(d3.json, 'data.json')
.await(visualize);
var width = 150,
height = 180;
var projection = d3.geo.mercator().scale(600).translate([-30, 700]),
path = d3.geo.path().projection(projection),
opacity = d3.scale.linear().domain([0, 100]).range([0.2, 1]);
function visualize(error, states, data) {
var visualizationWrapper = d3.select('#vis');
data.data.forEach(function(data, i) {
var wrapper = visualizationWrapper
.append('div')
.style({
width: width + 'px',
height: height + 'px'
});
createMap(wrapper, states, data)
});
}
function createMap(wrapper, geo, data) {
wrapper.append('p')
.text(data.key)
.attr('class', 'legend');
var svg = wrapper.append('svg')
.attr({
width: width,
height: height
});
svg.selectAll('path')
.data(geo.features)
.enter()
.append('path')
.attr('d', path)
.style('opacity', function(d) {
var value = data.values[d.properties.GEN];
return opacity(value);
})
.attr('class', function(d) {
return d.properties.GEN.toLowerCase()
})
.on('mouseenter', function(d, i) {
notify('.' + d.properties.GEN.toLowerCase(), 'select')
})
.on('mouseleave', function(d) {
notify('.' + d.properties.GEN.toLowerCase(), 'unselect')
})
.on('select', function(self) {
var geoData = self.data();
self.node().parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = data.values[geoData[0].properties.GEN];
})
.on('unselect', function(self) {
self.node().parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = data.key;
})
function notify(selector, eventName) {
d3.selectAll(selector)[0].forEach(function(el, i) {
var shape = d3.select(el);
shape.on(eventName)(shape);
});
}
}
})(d3);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment