background preloader

Home · mbostock/d3 Wiki

Home · mbostock/d3 Wiki
Wiki D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. Resources Browser Support

Related:  D3jsD3

Gallery · mbostock/d3 Wiki Wiki ▸ Gallery Welcome to the D3 gallery! More examples are available on If you want to share an example and don't have your own hosting, consider using Gist and If you want to share or view live examples try or Interactive Data Visualization for the Web Enhanced with examples hosted on JS Bin, courtesy of Remy Sharp and his company, Left Logic. About the Author Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art.

Node-Link Tree 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. The world’s top 50 billionaires: A demographic breakdown. Top 50 Billionaire Breakdown If you asked anyone to picture the wealthiest person in the world at any given time, you could bet on some common denominators: probably a man; probably somehow attached to the words “multinational” or “conglomerate”; probably on a yacht off a private island. With Slate’s Top 50 Billionaire Breakdown, we attempt to visualize the richest of the rich by paring them into demographic categories: age, location, industry, source of wealth, education, and religious affiliation. Some of the sortings are heartening: There are more self-made men than born-rich kids in the top 50, and the self-made billionaires’ total wealth is bigger.

Line Chart Line Chart This simple line 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 datad3.time.format - parse datesd3.time.scale - x-position encodingd3.scale.linear - y-position encodingd3.extent - compute domainsd3.svg.axis - display axesd3.svg.line - display line shape Cubism.js Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Understanding selectAll, data, enter, append sequence in D3.js If you are new to D3.js and have looked at the various D3.js examples on the web to learn it, you have most probably come across a sequence of selectAll(), data(), enter() and append() statements as shown in Example 1 below. To a newcomer to D3.js, it is not obvious how these methods work. At least, initially, I did not find it easy to understand their functioning.

D3 Tutorial: Axes Last updated 2012 December 30 Having mastered the use of D3 scales, we now have this scatterplot: Let’s add horizontal and vertical axes, so we can do away with the horrible red numbers cluttering up our chart. Introducing Axes Much like the scale functions, D3’s axes are actually functions whose parameters you define. Unlike scales, when an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including lines, labels, and ticks.

How to set up python web server by cabbagetreecustard Dec 20

Related:  D3Js