small multiple maps

README.md

see the blog post

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"
    }]
}

ger-states.json

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>