Gallery · mbostock/d3 Wiki Wiki ▸ Gallery Welcome to the D3 gallery! More examples are available for forking on Observable; see D3’s profile and the visualization collection. Please share your work on Observable, or tweet us a link! Visual Index Basic Charts Techniques, Interaction & Animation Maps Statistics Examples Collections The New York Times visualizations Jerome Cukier Jason Davies Jim Vallandingham Institute for Health Metrics and Evaluation Peter Cook Charts and Chart Components Bar Chart Histogram Pareto Chart Line and Area Chart Pie Chart Scatterplot and Bubble chart Parallel Coordinates, Parallel sets and Sankey Sunburst and Partition layout Force Layout Tree Misc Trees and Graphs Chord Layout (Circular Network) Maps Misc Charts Miscellaneous visualizations Charts using the reusable API Useful snippets Tools Interoperability Online Editors Products Store Apps
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. Twitter: @alignedleft Interactive Data Visualization for the Web By Scott Murray $23.99 Read Online Buy the Ebook This online version of Interactive Data Visualization for the Web includes 44 examples that will show you how to best represent your interactive data. Be sure to get the full ebook bundle on oreilly.com, which includes downloadable, DRM-free PDF, EPUB, and Mobi versions of the book, as well as free, lifetime updates. This step-by-step guide is ideal whether you’re a designer or visual artist with no programming experience, a reporter exploring the new frontier of data journalism, or anyone who wants to visualize and share data.
D3.js - Data-Driven Documents Cubism.js Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Cubism.js is a D3 plugin for visualizing time series. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Effective Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Area (120px)7.6 Area (30px)7.6 In contrast, horizon charts reduce vertical space without losing resolution. Horizon, 1-band (120px)7.6 Horizon, 2-band (60px)7.6 Horizon, 3-band (40px)7.6 Horizon, 4-band (30px)7.6 By combining position and color, horizon charts improve perception: position is highly effective at discriminating small changes, while color differentiates large changes. Flexible Cubism is data-source agnostic. Want to learn more?
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. The key to understanding the working of these methods is in the following paragraph in Data Keys section on "The key function also determines the enter and exit selections: the new data for which there is no corresponding key in the old data become the enter selection, and the old data for which there is no corresponding key in the new data become the exit selection. and in Mike Bostock's response in this thread. Don't worry if the above excerpt makes little sense at this point. Carefully study the following two examples and their outputs. Example 1 Output of Example 1 Example 2 Output of Example 2
Interactive Data Visualization for the Web Now we’ll integrate everything we’ve learned so far to generate a simple bar chart as an SVG image. We’ll start by adapting the div bar chart code to draw its bars with SVG instead, giving us more flexibility over the visual presentation. Then we’ll add labels, so we can see the data values clearly. First, we need to decide on the size of the new SVG: //Width and heightvar w = 500;var h = 100; Of course, you could name w and h something else, like svgWidth and svgHeight. Then, we tell D3 to create an empty SVG element and add it to the DOM: //Create SVG elementvar svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); To recap, this inserts a new <svg> element just before the closing </body> tag, and assigns the SVG a width and height of 500 by 100 pixels. Next, instead of creating divs, we generate rects and add them to svg: svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 100); Beautiful, no?