Kartograph Example: Violent Crimes in US Cities

Symbols

by Gregor Aisch

HTML

<script src="http://kartograph.org/js/jquery-1.10.2.min.js"></script>
<script src="http://kartograph.org/js/raphael-2.1.0.min.js"></script>
<script src="http://kartograph.org/js/kartograph.min.js"></script>
<link rel="stylesheet" href="http://kartograph.org/css/jquery.qtip.css">
<script src="http://kartograph.org/js/jquery.qtip.min.js"></script>
<script src="http://kartograph.org/js/chroma.min.js"></script>
<div id="map"></div>

CSS

body { font-family: Helvetica, Arial }

JavaScript

var svgUrl = 'http://kartograph.org/showcase/usa-projection/usa.svg',
    opts = { padding: 30 };

kartograph.map('#map').loadMap(svgUrl, mapLoaded, opts);

function mapLoaded(map) {
    map.addLayer('layer0', {
        styles: {
            stroke: '#aaa',
            fill: '#f6f4f2'
        },
        mouseenter: function(d, path) {
            path.attr('fill', Math.random() < 0.5 ? '#c04' : '#04c');
        },
        mouseleave: function(d, path) {
            path.animate({ fill: '#f6f4f2' }, 1000);
        }
    });
    
    var points_of_interest = [
        { name: 'Juneau, AK', lat: 58.3, lon: -134.416667 },
        { name: 'Honolulu, HI', lat: 21.3, lon: -157.816667 },
        { name: 'San Francisco, CA', lat: 37.783333, lon: -122.416667 }
    ];

    map.addSymbols({
        type: $K.LabeledBubble,
        data: points_of_interest,
        location: function(d) { return [d.lon, d.lat] },
        title: function(d) { return d.name; },
        radius: 3,
        center: false,
        attrs: { fill: 'black' },
        labelattrs: { 'font-size': 11 },
        buffer: true
   });
}