Permalink
Find file
687ab10 May 14, 2014
139 lines (113 sloc) 4.58 KB
---
layout: showcase
title: Animated Symbols
---
<script type="text/javascript" src="/js/chroma.min.js"></script>
<script type="text/javascript">
$(function() {
var map, c, scale, updateMap, symbols,
key = 'ViolentCrime2011Rate',
maxRad = 30;
c = $('#map');
c.height(c.width()*.65);
map = window.m = kartograph.map('#map');
map.loadMap('map-usa.svg', function() {
map.addLayer('usa', {
styles: {
fill: '#dfdcdc',
stroke: '#fff'
}
});
$.getJSON('us-crime-cities.json', function(crimeCities) {
crimeCities = crimeCities.sort(function(a,b) {return a.Population - b.Population;}).slice(0, 150);
$.each(crimeCities, function(i,city) {
$.each(['ViolentCrime','Rape','Murder'], function(i,prop) {
$.each(['2011','2010'], function(i,yr) {
city[prop+yr+'Rate'] = city[prop+yr] / city.Population;
});
});
});
scale = kartograph.scale.linear(crimeCities, key);
colscale = chroma.scale(chroma.brewer.PiYG.slice().reverse());
function symbolAttrs(d) {
return {
r: Math.sqrt(scale(d[key]))*maxRad,
stroke: '#fff',
'stroke-width': scale(d[key])*1,
fill: colscale(scale(d[key])),
'fill-opacity': 0.5
};
}
symbols = map.addSymbols({
type: kartograph.Bubble,
data: crimeCities,
location: function(d) { return d.ll },
attrs: symbolAttrs,
title: function(d) { return $.trim(d.City)+' ('+Math.round(d[key] * 100000)+' per 100k)'; }
});
updateMap = function() {
key = $('.dataset.btn-primary').data('val')
+ $('.year.btn-primary').html()
+ $('.type.btn-primary').data('val');
scale = kartograph.scale.linear(crimeCities, key);
symbols.update({
attrs: symbolAttrs,
title: function(d) { return $.trim(d.City)+' ('+Math.round(d[key] * 100000)+' per 100k)'; }
}, 500, 'backOut');
}
});
});
$('.btn').click(function(event) {
var tgt = $(event.target), par = tgt.parent();
$('.btn', par).removeClass('btn-primary');
tgt.addClass('btn-primary');
updateMap();
});
});
</script>
<div style="position:relative">
<div id="map">
</div>
<div style="position:absolute;bottom:0px;left:20px;z-index:10">
<label>Select 2011 crime rates for</label>
<div class="btn-group" style="display:inline-block">
<button class="dataset btn-large btn btn-primary" data-val="ViolentCrime">Violence</button>
<button class="dataset btn-large btn" data-val="Rape">Rape</button>
<button class="dataset btn-large btn" data-val="Murder">Murder</button>
</div><div class="btn-group" style="display:none">
<button class="year btn btn-primary">2011</button>
<button class="year btn">2010</button>
</div><div class="btn-group" style="display:none">
<button class="type btn" data-val="" data-maxrad="50">Quantity</button>
<button class="type btn btn-primary" data-val="Rate" data-maxrad="40">Density</button>
</div>
</div>
</div>
<h2>How to do it</h2>
<p>To change symbols after you added them you need to call <code>symbolgroup.update()</code>.</p>
<pre><code>var key = 'Violence';
// a simple function that returns symbol attributes
function symbolAttrs(city) {
return {
r: Math.sqrt(scale(city[key])) * 30, // radius in pixel
fill: colscale(scale(city[key])) // color using chroma.js
};
}
// initialize symbols
symbols = map.addSymbols({
type: kartograph.Bubble,
data: crimeCities,
location: function(d) { return d.ll },
attrs: symbolAttrs
});
// a function to update the symbols..
updateMap = function() {
key = $('.crime-type').val();
scale = kartograph.scale.linear(crimeCities, key);
symbols.update({
attrs: symbolAttrs
}, 500, 'backOut');
}
// ..which gets called as the user requests it
$('.crime-type').change(updateMap);</code></pre>
<p>For more details please check the <a href="https://github.com/kartograph/kartograph.org/blob/master/showcase/animated-symbols/index.html#L14">source of this page</a> or look up the <a href="/docs/kartograph.js/symbols.html#updating-symbols">Kartograph.js documentation</a>.</p>