This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using collision detection. This is a proof of concept more than anything, not polished in any way.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
<script type="text/javascript" src="https://raw.github.com/larskotthoff/d3/varline/src/svg/line-variable.js"></script> | |
</head> | |
<body> | |
<div id="linevar"></div> |
This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:
- d3.tsv - load and parse data
- d3.format - format percentages
- d3.scale.ordinal - x-position encoding
- d3.scale.linear - y-position encoding
- d3.max - compute domains
- d3.svg.axis - display axes
{ | |
"name": "flare", | |
"children": [ | |
{ | |
"name": "analytics", | |
"children": [ | |
{ | |
"name": "cluster", | |
"children": [ | |
{"name": "AgglomerativeCluster", "size": 3938}, |
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). |
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
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.
Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.
Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The "update" button randomizes the values slightly to demonstrate transitions.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
rect { | |
stroke: #fff; | |
} | |
</style> | |
<body> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
<title>Testing Pie Chart</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script> | |
<!-- Source for example located at: http://bl.ocks.org/1203641 --> |