##Two Maps
Experiment in synching two maps together.
##Two Maps
Experiment in synching two maps together.
<div id='map'></div> | |
<ul class='layers'> | |
<li><a class='active' data-layer='mapbox.mapbox-graphite' href='#'>Mapbox Graphite</a></li> | |
</ul> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script> | |
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script> | |
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script> | |
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script> | |
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> |
This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
This also uses simple-statistics to derive a linear regression of the price changes.
Compare to Canvas Swarm.
A response to Trevor Bedford's post, Comparing performance of Processing.js and D3.js.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>SVG Swarm</title> | |
<style> | |
svg { | |
position: absolute; | |
top: 0; | |
} |
$(layer).click(function(e) { | |
$.each(map.layers, function(l) { | |
l.disable(); | |
}); | |
map.enableLayer(i); | |
$(this).addClass('active'); | |
}); |