Adapting d3.geo.tile to show OpenStreetMap vector tiles. See also the static example.
Code derived from the d3.js 'force' example: | |
The miserables.json file contains the weighted network of coappearances of | |
characters in Victor Hugo's novel /Les Miserables/. Nodes represent characters | |
as indicated by the labels, and edges connect any pair of characters that | |
appear in the same chapter of the book. The values on the edges are the number | |
of such coappearances. The data on coappearances were taken from D. E. Knuth, | |
"The Stanford GraphBase: A Platform for Combinatorial Computing", | |
Addison-Wesley, Reading, MA (1993). |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<style type="text/css"> | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; |
!function(){function n(n){return n&&(n.ownerDocument||n.document||n).documentElement}function t(n){return n&&(n.ownerDocument&&n.ownerDocument.defaultView||n.document&&n||n.defaultView)}function e(n,t){return t>n?-1:n>t?1:n>=t?0:0/0}function r(n){return null===n?0/0:+n}function u(n){return!isNaN(n)}function i(n){return{left:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)<0?r=i+1:u=i}return r},right:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)>0?u=i:r=i+1}return r}}}function o(n){return n.length}function a(n){for(var t=1;n*t%1;)t*=10;return t}function c(n,t){for(var e in t)Object.defineProperty(n.prototype,e,{value:t[e],enumerable:!1})}function l(){this._=Object.create(null)}function s(n){return(n+="")===pa||n[0]===va?va+n:n}function f(n){return(n+="")[0]===va?n.slice(1):n}function h(n){return s(n)in this._}function g(n){return(n=s(n))in this._&&delete this._[n]}function p(){var n=[] |
This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:
- d3.tsv - load and parse data
- d3.time.format - parse dates
- d3.time.scale - x-position encoding
- d3.scale.linear - y-position encoding
- d3.scale.category10, a d3.scale.ordinal - color encoding
- d3.extent, d3.min and d3.max - compute domains
- [d3.k
These donut charts are constructed from a CSV file storing the populations of various age groups in different states. (As a practical note, a normalized stacked area chart facilitates easier comparison of values.) The chart employs a number of D3 features:
- d3.csv - load and parse data
- d3.scale.ordinal - color encoding
- d3.keys - compute column names
- d3.svg.arc - display arcs
- d3.layout.pie - compute arc angles from data
date | New York | San Francisco | Austin | |
---|---|---|---|---|
20111001 | 63.4 | 62.7 | 72.2 | |
20111002 | 58.0 | 59.9 | 67.7 | |
20111003 | 53.3 | 59.1 | 69.4 | |
20111004 | 55.7 | 58.8 | 68.0 | |
20111005 | 64.2 | 58.7 | 72.4 | |
20111006 | 58.8 | 57.0 | 77.0 | |
20111007 | 57.9 | 56.7 | 82.3 | |
20111008 | 61.8 | 56.8 | 78.9 | |
20111009 | 69.3 | 56.7 | 68.8 |
This simple area 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:
- d3.tsv - load and parse data
- d3.time.format - parse dates
- d3.time.scale - x-position encoding
- d3.scale.linear - y-position encoding
- d3.extent and d3.max - compute domains
- d3.svg.axis - display axes
- d3.svg.area - display area shape
A commented example of tweening arcs; see Pie Chart Update, II and Arc Tween (Clock) for older examples. (There’s also The Amazing Pie and Donut Transitions if you want to get fancy.) See the API reference for transition.attrTween and transition.call, and my tutorial Working with Transitions, for more technical details.
This unusual clock in polar coordinates is based on a Flash screensaver by pixelbreaker. See also the earlier Protovis version.