Tissot's Indicatrix rendered with D3.
NB:- see Jason's comment about these not being "true" Tissot indicatrices.
Tissot's Indicatrix rendered with D3.
NB:- see Jason's comment about these not being "true" Tissot indicatrices.
Fine-grained control of randomly entering and exiting things in D3.js, for impeccable object constancy. Adapted from an example co-authored with Mike Bostock.
An exploration of Mike Bostock's take on Ben Fry’s zipdecode, inspired by Nelson Minar’s reimplementation. This one uses deeply nested SVG elements and classes to target only the things that need to change.
Nesting the SVG made DOM creation bearable, but this is still too slow. Use Mike's canvas approach if you're looking for the "best" way to do this.
| var data = [ ], | |
| width = 500, | |
| height = 500, | |
| id = 0; | |
| function addRandom() { | |
| data.push({ | |
| x: width * Math.random(), | |
| y: height * Math.random(), | |
| r: 10 * Math.random(), |
| TILE_SIZE = 256.0 | |
| PX_TO_COORD = 1.0 / TILE_SIZE | |
| RAD_2_DEG = 180.0 / Math::PI | |
| DEG_2_RAD = Math::PI / 180.0 | |
| TWO_PI = Math::PI * 2.0 | |
| MAX_ZOOM = 20 | |
| module TileMaps | |
| def lng_lat_to_mercator(lng, lat) | |
| # turn degrees into radians |
This animated bar chart is adapted from Mike Bostock's sample bar chart to allow redrawing and animated transitions.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| html, body { margin: 0; } | |
| .line { | |
| fill: none; | |
| stroke-width: 2.0; | |
| } | |
| .axis .tick line, .axis path.domain { |
| australian-states.json | |
| ne_10m_admin_1_states_provinces_lakes.geojson | |
| ne_10m_admin_1_states_provinces_lakes.geojson.gz |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ember Starter Kit</title> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.13.5/ember.debug.js"></script> | |
| <style id="jsbin-css"> |