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
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.
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.
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.
New open source tool to help reporters rethink quotes in stories Credit: Image from Thinkstock Quotes are often the most interesting part of a story. They can help the audience relate or identify more with the topic and strengthen the reporting, but quoting a source in text often doesn't do justice to the impact their words could have in audio or video form. This is why The Times is testing quickQuote, a tool that uses videos and automatic transcription to make quotes easier to find and use in articles. "The initial problem was finding a way to make it easier and more interesting to work with video in the newsroom," said Pietro Passarelli, former newsroom developer intern at The Times, who developed quickQuote. Earlier this year, The Times also experimented with audio quotes, using the format in its multimedia coverage of the 7/7 bombings anniversary. QuickQuote, which was open-sourced last week, requires users to upload their video footage and then provides an automated transcription using natural language processing. Screenshot from quickQuote.