Let’s Make a Map In this tutorial, I’ll cover how to make a modest map from scratch using D3 and TopoJSON. I’ll show you a few places where you can find free geographic data online, and how to convert it into a format that is both efficient and convenient for display. I won’t cover thematic mapping, but the map we’ll make includes labels for populated places and you can extend this technique to geographic visualizations such as graduated symbol maps and choropleths. Without further ado, here’s the map: Shown are the four constituent countries of the United Kingdom: Scotland, Northern Ireland, Wales and England. As maps go, it’s not particularly interesting, but the simplicity should serve adequately to demonstrate the basics of map-making. #Finding Data The first task for any map is finding geometry. Unfortunately, government data can sometimes be hard to find or use. For a crowdsourced alternative, GeoCommons is a platform for sharing geographic datasets. #Installing Tools brew install gdal #Converting Data
Mapping with D3 | Visible Data Trying out D3's geographic features. Hover over a county: There's nothing special about this map. It's just US counties and states, with minimal interaction. I wanted to try out D3's mapping capabilities, and this made for good practice. The Good Creating a simple map in D3 is remarkably easy. var counties = map.append('g') .attr('class', 'counties') .selectAll('path') .data(countylines.features) .enter().append('path') .attr('d', d3.geo.path()); Where countylines is a GeoJSON object and map is an SVG selection. The Bad GeoJSON files can be big, and loading them can take ... awhile. One possible solution to this is TopoJSON. The Ugly Mapping is still hard.
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). These simple visualizations make large amounts of data easy to understand at a glance, allowing insights that would take much longer if you’re looking at a table of numbers. There have been tutorials for Python and Excel, but none that we’ve seen yet for D3 — and D3 is one of the easiest ways to make choropleth maps for the web. Once you have your data encoded on a webpage using D3, you can access it and display it in new ways. Let’s start with our base map. With the SVG embedded in your HTML, if you open it up in a browser you should see a map.
Creating Animated Bubble Charts in D3 - Jim Vallandingham Update: I moved the code to its own github repo - to make it easier to consume and maintain. Update #2 I’ve rewritten this tutorial in straight JavaScript. So if you aren’t that in to CoffeeScript, check the new one out! Recently, the New York Times featured a bubble chart of the proposed budget for 2013 by Shan Carter . It features some nice, organic, animations, and smooth transitions that add a lot of visual appeal to the graphic. This was all done using D3.js . As FlowingData commenters point out , the use of bubbles may or may not be the best way to display this dataset. In this post, we attempt to tease out some of the details of how this graphic works. #Simple Animated Bubble Chart In order to better understand the budget visualization, I’ve created a similar bubble chart that displays information about what education-based donations the Gates Foundation has made. You can see the full visualization here And the visualization code is on github #D3’s Force Layout #nodes #gravity #friction
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 I’ve created a basic bubble cloud visualization that tries to replicate some of the functionality of the NYT version. Try clicking on the bubbles, then try dragging them around. The source code is available for download and use in your own projects. Ready to get started?
On the tenth day of Xmas, get dirty with data using d3.js | 12 Devs of Xmas 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”). Information is what you get after you’ve processed the data. Knowledge is perhaps the most difficult to define, but the definition which I think makes most sense in this instance is how we use our past experiences to decide what to do based on information. So what are we going to build, and what with? There are a number of tools out there to help you to create charts and visualisations. A brief introduction to d3 There are four main parts to a d3 project:
Simple D3JS Dashboard index.html# Histogram Histogram This chart shows a histogram of a Bates distribution. The data is randomly generated. The values are then binned at regular intervals using D3’s histogram layout. See also this histogram of a log-normal distribution of time durations. index.html# Creating Animations and Transitions With D3 For the ambitious, this is a great intro to creating your own animations and transitions in d3.js. If you get in over your head, drop by the Visually Marketplace to hire one of our talented developers. In interactive visualisation, there is the word reactive. Well, maybe not literally, but close enough. The fact is that reactivity, or the propension of a visualisation to respond to user actions, can really help engage the user in a visualisation, and help them understand its results. So I’ll go ahead and state that animation, if done right, can make any interactive data visualization better. How is that? When coupled with interaction, it’s a very useful way to give feedback to the user. That said, animation can definitely ruin your visualization, too. Animation is very prominent. So we’ve seen how animation is helpful in data visualization. The principle If you know how to draw in d3, you almost know how to animate. Animations are called “transitions” in d3 for a reason. How this is done
Object Constancy The chart shows multiple slices of a dataset, transitioning smoothly when the age bracket changes. The x-axis rescales to accommodate the change in maximum value, while bars reshuffle along the y-axis to preserve sorted order. Graphical elements enter and exit: Hawaii enters the top ten for the 65 and older age brackets, but fades out in younger ones. The axis ticks change suitably, from whole percentages to fifths. Old values fade-out while the new values fade-in, both translating to preserve a valid display across the transition. Animated transitions are pretty, but they also serve a purpose: they make it easier to follow the data. #Key Functions To achieve object constancy with D3.js, specify a key function as the second argument to selection.data. A suitable key function for this data returns the State property, a FIPS code: function key(d) { return d.State; } When you join the top-ten states to the bars, three selections are returned: #When Constancy Matters
How to Make an Interactive Network Visualization Networks! They are all around us. The universe is filled with systems and structures that can be organized as networks. Recently, we have seen them used to convict criminals, visualize friendships, and even to describe cereal ingredient combinations. We can understand their power to describe our complex world from Manuel Lima's wonderful talk on organized complexity. In this tutorial, we will focus on creating an interactive network visualization that will allow us to get details about the nodes in the network, rearrange the network into different layouts, and sort, filter, and search through our data. In this example, each node is a song. Try out the visualization on different songs to see how the different layouts and filters look with the different graphs. Technology This visualization is a JavaScript based web application written using the powerful D3 visualization library. jQuery is also used for some DOM element manipulation. Quick CoffeeScript Notes Functions Indentation matters