---
layout: showcase
title: Chart Maps
---

<script type="text/javascript" src="/js/jquery.csv.js"></script>
<script type="text/javascript">

$(function() {
    var map, updateMap, symbols,
        mc = $('#map');

    map = kartograph.map('#map');

    map.loadCSS('style.css', function() {

        map.loadMap('spain.svg', function() {
            map.addLayer('context');
            map.addLayer('spain', { key: 'nuts', title: function(d) {
                return d.nuts
            } });

            $.get('unemployment-es.csv', function(data) {
                data = $.parseCSV(data);

                updateMap = function() {
                    var scale,
                        prop = $('.gender.btn-primary').data('val')+'-'+$('.age.btn-primary').data('val'),
                        type = $('.chart.btn-primary').data('val');

                    scale = kartograph.scale.linear(data.rows, 'AREA');

                    if (symbols) symbols.remove();

                    symbols = map.addSymbols({
                        data: data.rows,
                        type: kartograph[type],
                        colors: ['#1f68b4', '#aaceff'],
                        border: '#fff',
                        values: function(d) { return [d[prop],100-d[prop]] },
                        location: function(d) { return 'spain.'+d.GEO; },
                        radius: function(d) { return Math.max(8, Math.sqrt(scale(d.AREA))*35) }
                    });

                };

                updateMap();
            });
        });
    });

    $('.btn').click(function(event) {
        var tgt = $(event.target), par = tgt.parent();
        $('.btn', par).removeClass('btn-primary');
        tgt.addClass('btn-primary');
        updateMap();
    });
});
</script>

<div class="map-container">
    <div id="map-overlay"></div>
    <div id="map" style="height:500px;margin-bottom:20px"></div>
</div>
<div class="row">
    <div class="span4 content">
        <p>
        One disadvantage of choropleth maps is that you always need to look at the legend in order to read the actual numbers. While this is inevitable for absolute quantities, there are more effective ways for visualizing percentages.
        </p>
        <p>
        This map shows how unemployment rates in Spain.
        </p>
    </div>
    <div class="span3" style="position:relative">

        <div >
            <label style="width:80px;vertical-align:text-bottom;display:inline-block">Gender: </label>
            <div class="btn-group" style="display:inline-block">
                <button class="gender btn btn-primary" data-val="T">Total</button>
                <button class="gender btn" data-val="M">Male</button>
                <button class="gender btn" data-val="F">Female</button>
            </div>
        </div>
        <div >
            <label style="width:80px;vertical-align:text-bottom;display:inline-block">Age:</label>
            <div class="btn-group" style="display:inline-block">
                <button class="age btn btn-primary" data-val="Y15-24">15-24</button>
                <button class="age btn" data-val="Y-GE25">25+</button>
            </div>
        </div>
        <div>
            <label style="width:80px;vertical-align:text-bottom;display:inline-block">Chart: </label>
            <div class="btn-group" style="display:inline-block">
                <button class="chart btn btn-primary" data-val="PieChart">Pie</button>
                <button class="chart btn" data-val="StackedBarChart">Bar</button>
            </div>
        </div>
    </div>
<div>
