Compare to Canvas Swarm.
A response to Trevor Bedford's post, Comparing performance of Processing.js and D3.js.
Compare to Canvas Swarm.
A response to Trevor Bedford's post, Comparing performance of Processing.js and D3.js.
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.
<!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> |
<!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> |
<div id='map'></div> | |
<ul class='layers'> | |
<li><a class='active' data-layer='mapbox.mapbox-graphite' href='#'>Mapbox Graphite</a></li> | |
</ul> |
##Two Maps
Experiment in synching two maps together.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Wax Interactivity</title> | |
</head> | |
<body> | |
<style> | |
#map { | |
width: 100%; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Modest Maps JS</title> | |
<script type="text/javascript" src="https://raw.github.com/stamen/modestmaps-js/master/modestmaps.js"></script> | |
<script type="text/javascript"> | |
var map; | |
function initMap() { | |
// some test |