##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'); | |
| }); |