Tutorials · mbostock/d3 Wiki
Wiki ▸ Tutorials Please feel free to add links to your work!! Tutorials may not be up-to-date with the latest version 4.0 of D3; consider reading them alongside the latest release notes, the 4.0 summary, and the 4.0 changes. Introductions & Core Concepts Specific Techniques
Building a Bubble Cloud - Jim Vallandingham
For the 2012 Republican and Democratic national conventions, Mike Bostock , Shan Carter , and Matthew Ericson have created a series of visualizations highlighting the words being used in the speeches of both gatherings. These word-cloud-like word bubble clouds (what I’ll call bubble clouds, unless you can think of a better name) serve as a great interface for looking at the differences in the two conventions and for browsing through quotes from the talks. Check them out here: While there is a lot that could be discussed about all the little things that contribute to the quality and polish of these visualizations, in this tutorial we will look at some of the implementation details that make them tick. Bubble Cloud Demo
Invisible Visualization – Reinventing Fire
Last year, I put together a talk called “Invisible Visualization” on making accessible data visualizations. Several people have asked me about it, so I thought I’d write a post about it. By “accessible”, I mean able to be consumed and understood by people with a variety of sensory needs, including people with visual limitations, cognitive impairments, mobility challenges, and other considerations. I provided a few simple ways to expose the data in SVG images, but mostly I described different constraints and suggested ways of thinking about the problems. I didn’t want to lecture people about the need for making their content accessible; I wanted to excite them about the possibilities of doing so.
On the tenth day of Xmas, get dirty with data using d3.js
I’d like to start off by asking what seems like quite a simple question: What is the difference between data and information? And taking it a step further, where does knowledge fit into this definition? Not as easy to answer as you might expect, is it! Before we start getting our hands dirty creating some awesome data visualisations, it’s going to be useful to learn the definitions of – and difference between – these three words. Data is a set of unprocessed facts (the word comes from the latin datum which means “that which is given”).
Using a D3 Voronoi grid on top of your chart to improve UX
EDIT: I’ve updated this tutorial in August 2016 when Franck Lebeau came with a great improvement on the final step In this tutorial, I’ll show you how you can add an invisible Voronoi grid over a scatterplot which will improve the experience of the viewer when hovering over the plot. I’ve taken a dataset from the Worldbank database that contains the total GDP & GDP per capita (current US $) and the life expectancy at birth for all countries in the World. I choose these indicators because they are known for most countries in the world. I just needed a dataset with a few hundred datapoints to have a nicely filled scatterplot, so using something with countries suffices (just as a note, the numbers are from 2010).
Data Visualization Libraries Based on D3.JS - Mike McDearmon
There are a lot of ways to visualize data on the Web (with more emerging every day), but the flexibility, versatility, and energized development community surrounding D3.js makes it a great option to explore. The following list of D3 plugins, extensions, and applications below is by no means comprehensive, but oughta be enough to keep you busy for a while. If you’re just getting your feet wet with D3.js, here are some great learning resources to get you acclimated:D3 for mere mortals: Great introductory lessons for those starting from scratch.Try D3 Now: Another great resource for learning about core D3 concepts.Data-Driven Documents (paper): An academic article by Mike Bostock with loads of footnotes.Learning D3, Scott Becker: A quick and effective tutorial series to get yourself up and running.Dashing D3: A very thorough tutorial series covering a LOT more than just D3.Interactive Data Visualization for the Web is a fantastic book by Scott Murray.
How to Make Choropleth Maps in D3
Even if you think you don’t know what a choropleth map is, chances are you’ve seen one. And come November 2012, you’ll see plenty: one iconic example of a choropleth map is a map of the United States, laid out in red and blue, showing the results of a presidential election. Choropleth maps can be simple, like in the example above, where the color of the state indicates whether the state goes in one direction (Democrat) or the other (Republican).
EVL Creative Coding Research Group at UIC
Angus Forbes and Paul Murray are visiting the The New York Times Research & Development group on Decemeber 17th. Marco Cavallo’s Team Italy is one of the winning teams for the Chicago Hackathon for Wildlife. Angus Forbes is awarded an Applications and Core Technology University Research (ACT-UR) grant from Keysight Technologies to develop novel visualization tools for electronic measurements.
Data Visualization 101: Pie Charts
In our Data Visualization 101 series, we cover each chart type to help you sharpen your data visualization skills. Pie charts are one of the oldest and most popular ways to visualize data. This classic chart is the perfect example of the power of data visualization: a simple, easy-to-understand presentation that helps readers instantly identify the parts of a whole. Without further ado, here’s everything you need to know about the pie chart. What It Is The typical pie chart is divided into sections that illustrate a numerical proportion.
