This is an example of the power of the D3 library and how you can use the drag behavior of D3 to control the position and shape of the SVG element.
Another example of the D3 library to create a linechart with tooltips.
This uses Tipsy for tooltips. This chart is based on work by Nate Ross: http://natescodevault.com/2011/11/28/d3-js-data-visualizations/.
age | population | percent | |
---|---|---|---|
<5 | 2704659 | 67 | |
5-13 | 4499890 | 38 | |
14-17 | 2159981 | 91 | |
18-24 | 3853788 | 49 | |
25-44 | 14106543 | 71 | |
45-64 | 8819342 | 88 | |
=65 | 612463 | 64 |
This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
circle { | |
stroke: #fff; | |
} | |
</style> | |
<body> |
mydate | Afghan Security Forces | afghaninterpolated | U.S. Troops | usinterpolated | Other Foreign Troops | otherinterpolated | |
---|---|---|---|---|---|---|---|
November-01 | 0 | 0 | 1300 | 0 | 0 | 0 | |
December-01 | 240 | 1 | 2500 | 0 | 1667 | 1 | |
January-02 | 480 | 1 | 4067 | 0 | 3333 | 1 | |
February-02 | 720 | 1 | 5633 | 0 | 5000 | 0 | |
March-02 | 960 | 1 | 7200 | 0 | 5000 | 0 | |
April-02 | 1200 | 1 | 7425 | 0 | 5000 | 0 | |
May-02 | 1440 | 1 | 7650 | 0 | 4500 | 0 | |
June-02 | 1680 | 1 | 7875 | 0 | 5000 | 0 | |
July-02 | 1920 | 1 | 8100 | 0 | 4900 | 1 |
The tree
layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<title>Mike Heavers - Projects</title> | |
<script type="text/javascript" src="http://mikeheavers.com/transfers/projects/js/d3.v2.min.js"></script> | |
<script type="text/javascript" src="http://mikeheavers.com/transfers/projects/js/packages.js"></script> | |
<link type="text/css" rel="stylesheet" href="http://mikeheavers.com/transfers/projects/css/bundle-radial.css"/> | |
</head> | |
<body> |
[ | |
{ | |
"result": 10, | |
"finished_at": "2011-12-01" }, | |
{ | |
"result": 20, | |
"finished_at": "2011-12-03" }, | |
{ | |
"result": 30, | |
"finished_at": "2011-12-05" }, |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
<title>Mobile Patent Suits</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style type="text/css"> | |
path.link { | |
fill: none; |