d3

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Examples</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <b><a href="../ex/">Examples</a></b> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='examples'>Examples</h1> <div class='gallery'> <div class='list'> <a href='calendar.html'> <img src='../calendar.png' /> </a> <h4><a href='calendar.html'>Calendar View</a></h4> <p>This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years.</p> </div> <div class='list'> <a href='chord.html'> <img src='../chord.png' /> </a> <h4><a href='chord.html'>Chord Diagram</a></h4> <p>Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering.</p> </div> <div class='list'> <a href='choropleth.html'> <img src='../choropleth.png' /> </a> <h4><a href='choropleth.html'>Choropleth Map</a></h4> <p>Choropleth maps visualize geographic distributions using a color encoding. This example shows U.S. unemployment density by county, as of 2009. An Albers equal-area projection preserves the accuracy of the representation.</p> </div> <div class='list'> <a href='cartogram.html'> <img src='../cartogram.png' /> </a> <h4><a href='cartogram.html'>Non-Contiguous Cartogram</a></h4> <p>Unlike choropleth maps, cartograms encode data using area rather than color, resulting in distorted geographic boundaries. In this example, states are rescaled around their centroid, preserving local shape but not topology.</p> </div> <div class='list'> <a href='force.html'> <img src='../force.png' /> </a> <h4><a href='force.html'>Force-Directed Graph</a></h4> <p>This simple force-directed graph shows character co-occurence in <i>Les Misérables</i>. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart.</p> </div> <div class='list'> <a href='treemap.html'> <img src='../treemap.png' /> </a> <h4><a href='treemap.html'>Treemap</a></h4> <p>A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit.</p> </div> <div class='list'> <a href='sunburst.html'> <img src='../sunburst.png' /> </a> <h4><a href='sunburst.html'>Sunburst</a></h4> <p>A sunburst is similar to the treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value.</p> </div> <div class='list'> <a href='splom.html'> <img src='../splom.png' /> </a> <h4><a href='splom.html'>Scatterplot Matrix</a></h4> <p>The scatterplot matrix visualizations pairwise correlations for multi-dimensional data; each cell in the matrix is a scatterplot. This example uses Anderson's data of iris flowers on the Gaspé Peninsula.</p> </div> <div class='list'> <a href='stack.html'> <img src='../stack.png' /> </a> <h4><a href='stack.html'>Stacked Bars</a></h4> <p>Switch between stacked and grouped layouts using sequenced transitions! Animations preserve object constancy and allow the user to follow the data across views.</p> </div> <div class='list'> <a href='tree.html'> <img src='../tree.png' /> </a> <h4><a href='tree.html'>Node-Link Tree</a></h4> <p>The <tt>tree</tt> 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.</p> </div> <div class='list'> <a href='stream.html'> <img src='../stream.png' /> </a> <h4><a href='stream.html'>Streamgraph</a></h4> <p>For continuous data such as time series, a streamgraph can be used in place of stacked bars. This example also demonstrates path transitions to interpolate between different layouts.</p> </div> <div class='list'> <a href='voronoi.html'> <img src='../voronoi.png' /> </a> <h4><a href='voronoi.html'>Voronoi Diagram</a></h4> <p>The Voronoi tesselation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction!</p> </div> <div class='list'> <a href='bullet.html'> <img src='../bullet.png' /> </a> <h4><a href='bullet.html'>Bullet Charts</a></h4> <p>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).</p> </div> <div class='list'> <a href='box.html'> <img src='../box.png' /> </a> <h4><a href='box.html'>Box Plots</a></h4> <p>A box-and-whisker plot uses simple glyphs that summarize a quantitative distribution with five standard statistics: the smallest value, lower quartile, median, upper quartile, and largest value. This summary approach allows the viewer to easily recognize differences between distributions.</p> </div> <div class='list'> <a href='pack.html'> <img src='../pack.png' /> </a> <h4><a href='pack.html'>Circle Packing</a></h4> <p>Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy.</p> </div> <div class='list'> <a href='bubble.html'> <img src='../bubble.png' /> </a> <h4><a href='bubble.html'>Bubble Chart</a></h4> <p>Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space.</p> </div> <div class='list'> <a href='cluster.html'> <img src='../cluster.png' /> </a> <h4><a href='cluster.html'>Dendrogram</a></h4> <p>A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left.</p> </div> </div><br clear='left' /> <h2 id='user_gallery'>User Gallery</h2> <div class='gallery'> <div class='list'> <a href='http://www.jasondavies.com/animated-bezier/'> <img src='../bezier.png' /> </a> <h4><a href='http://www.jasondavies.com/animated-bezier/'>Bézier Curves</a></h4> <p><a href='http://www.jasondavies.com/'>Jason Davies</a> built this interactive tool to explore how parametric Bézier curves are derived. Be sure to see his other examples on <a href='http://www.jasondavies.com/animated-trig/'>trigonometric functions</a> and the <a href='http://www.jasondavies.com/apollonian-gasket/'>Apollonian gasket</a>!</p> </div> <div class='list'> <a href='http://www.koalastothemax.com/'> <img src='../koalas.png' /> </a> <h4><a href='http://www.koalastothemax.com/'>Koalas to the Max!</a></h4> <p>This adorable example of interactive Pointillism was implemented by <a href='http://vadim.ogievetsky.com/'>Vadim Ogievetsky</a>. Move your mouse to unleash the cuteness!</p> </div> <div class='list'> <a href='http://www.visualizing.org/visualizations/urban-water-explorer/'> <img src='../water.png' /> </a> <h4><a href='http://www.visualizing.org/visualizations/urban-water-explorer/'>Urban Water Explorer</a></h4> <p><a href='http://www.janwillemtulp.com/'>Jan Willem Tulp</a> created this fun interactive visualization of global water consumption as part of the <a href='http://www.visualizing.org'>Visualizing.org</a> World Water Day challenge.</p> </div> <div class='list'> <a href='http://www.datavizchallenge.org/viz/73'> <img src='../whatdoyouworkfor.png' /> </a> <h4><a href='http://www.datavizchallenge.org/viz/73'>What Do You Work For?</a></h4> <p>What if you paid your federal taxes with your entire income starting January first? Where would your money go? Jeffrey Baumes submitted this entry to Google's Data Viz Challenge.</p> </div> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>