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?
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 D3 v4 Blogs Books Courses D3.js in Motion (Video Course)Curran Kelleher, Manning Publications, September 2017D3 4.x: Mastering Data Visualization Nick Zhu & Matt Dionis, Packt. Talks and Videos Meetups Research Papers D3: Data-Driven DocumentsMichael Bostock, Vadim Ogievetsky, Jeffrey HeerIEEE Trans.
Analyzing the Top 30 Infographics on Visually Ever wonder what makes an infographic successful? Why do some infographics accumulate more than 1 million views and others, barely 100? We’ve talked about viral infographics before, from a creative process standpoint: the story, data and design of an infographic all play a role in whether it will appeal to the masses, as does the way it is promoted. But what does viral content have in common? The primary statistic used is unique pageviews accumulated since the Visual.ly website launched in July 2011. The graphics can be grouped into buckets based on four dimensions: 1. We’ll look at content type (1), design type (3), and data visualization (4) in this post, and leave a study of content domains, or topics, for another day. Four Content Types (The SVG charts embedded below link to the individual graphics, but may not appear in some browsers). 1. 54,097 avg. unique views per graphic (excluding outlier) 2. 45,440 avg. unique views per graphic (excluding outlier) 3. 4. Six Design Types
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. I originally created the talk for the amazing OpenVis Conf 2013 in Boston, put on by Bocoup. The audience was data visualization folks, so it was a novel take on the topic for many of them. Encouraged by others, I submitted the talk to Fluent 2014 and CSUN 2014, and was accepted at both.
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”). These data are generally meaningless until they have been processed. 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.
D3js Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai faite sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie. A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Manipuler ou créer une div avec d3.js Ajouter et manipuler un rectangle SVG Dessiner plusieurs éléments dans un groupe svg Gérer des données au format JSON et dessiner en fonction de ces données Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class “node”. Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter(). selectAll() data() La methode data() permet de “binder” (attacher) des données à des éléments sélectionnés par la methode selectAll(). enter() Ressources
20 tools and resources every journalist should experiment with Tools have always come from the need to carry out a specific task more effectively. It's one of the main differences between human beings and the rest of the animal kingdom. We may still be slaves to the same old evolutionary urges but we sure know how to eat noodles in style. In journalism, an abstract tool for uncovering the most interesting and insightful information about society, we can generally boil the workflow down to four stages: finding, reporting, producing and distributing stories. So with that in mind, here are a range of tools which will – hopefully – help you carry out your journalism tasks more effectively. 1. A somewhat simplistic start to the list, maybe, but Google has many tricks that every self-respecting journalist should be taking advantage of. While it is very good for a spot of online shopping and business, journalists need to learn a few tweaks and tips to improve their online searching with the use of search operators. The site search function (e.g. 2. 3. 4. 5.
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). In the example below you can see the end result that we are after: a scatterplot with a tooltip visible on a hover or mouseover event. Another benefit of the Voronoi is that it is also easier to get a sense of a region, especially a rather empty region. Below you see the idea.
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). The states can also be colored on a scale to indicate data, with a color like blue representing a low number and red representing a high number, leaving a number in between to be purple. 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. Let’s start with our base map.