Projects walkthroughs, tool teardowns, interviews, and more.
Articles tagged: D3
What I Learned Recreating One Chart Using 24 ToolsPosted on
Lessons learned from trying to create one chart with as many applications, libraries, and programming languages as possible.
How (And Why) We Built A World Series Simulator
By Chris HaganPosted on
We created a tool that allowed users to peek under the hood of the MLB playoffs by simulating the postseason as many times as they wanted, which we hope taught even baseball fans something new about their sport.
Interactive Data Journalism: A One-Semester SyllabusPosted on
Data journalism draws on a remarkable array of skills—everything from statistics to graphic design to FOIA requests.
Automating XKCD-Style Narrative Charts
By Simon ElveryPosted on
I’ve been exploring how to tell complex stories on the web for quite a long time. When presenting a complex story to an audience, the goal is often to simplify the complexity without sacrificing so much detail that important elements are lost. XKCD’s movie narrative charts do this in a novel and effective way. On one hand, they provide the ability to see the shape of the story in one easily digested image. While at the same time they allow you to drill deeper, getting into the structure and detail of the story.
How We Made a Story That Changes Based on Your Birth Year
By Lindsay Muscato and Soo OhPosted on
Vox’s recent interactive on teen health asks the user for their birth year and then, based on that, changes the text of the story. We thought it was a fascinatingly personal way to contextualize CDC health data, leveraging readers’ innate curiosity about how they stack up. We talked to developer Soo Oh about the process.
How We Made “Failure Factories”
By Nathaniel Lash and Adam PlayfordPosted on
For several weeks, the Tampa Bay Times has been publishing Failure Factories, a series exploring the effects of the Pinellas County school district’s decision to resegregate its schools. On the web we decided to try something new: kicking off the series with a D3-powered graphic that used data to show readers how dire the situation is for black students in south St. Petersburg. We were aiming for a brief and engaging piece that would invest readers in the stories to come. In that sense, our experiment was successful. #FailureFactories was trending in the Tampa Bay region before the first day of the project ran. We heard from readers across the country that they were waiting anxiously for the series, and both the graphic and the 5,000-word first installment in the series have been among the most viewed stories we’ve published this year.
Animating Maps with D3 and TopoJSONPosted on
An exploration of an easy way to animate paths in SVG maps.
Comparing the Net Cost of College
By Soo Oh, Erika Owens, and Beckie SupianoPosted on
The Chronicle of Higher Education set out to compare net cost of colleges and found an unexpected discrepancy. The team describes the piece they created to help explain the difficulty in comparing net costs.
All About the WSJ’s Penalty Kick Interactive
By Chris Canipe and Tom MeagherPosted on
In the days before the World Cup’s knockout stages, with their potential for games to end in shootout finishes, The Wall Street Journal unveiled an app that visualized the tendencies of the top penalty kicks takers on the teams advancing in the tournament. Chris Canipe, senior news apps developer on the Wall Street Journal’s interactive graphics desk, talked with me about the thinking behind the project and how he and his colleagues put it together. What follows are edited excerpts from our conversation.
Meet Bloomberg’s DataviewPosted on
One of our most recent works, “How Americans Die,” is an instance of what we call a “dataview.” The impetus behind dataview was a hope to provide clear and concise storytelling, while giving the supporting data more prominence and explorability.
How We Made “NSA Files: Decoded”
By Feilding Cage and Gabriel DancePosted on
The Guardian’s Gabriel Dance and Feilding Cage break down their process, from storyboards and video production to major design changes and development challenges.
Mapping Made Simple, Now with Bonus UIPosted on
Introducing the double-whammy of Simple Map D3 and Tulip, a new mapping app from MinnPost.
Década Votada, a News App to Track Voting RecordsPosted on
In April 2013, Hacks/Hackers Buenos Aires hosted a hackathon on D3.js. As part of a project co-sponsored by the International Center for Journalists, Knight-Mozilla OpenNews provided seed funding to the winning project, an app called “Década votada” (q decade in votes).
The NYT’s Visual Election Outcome Explorer
By Mike BostockPosted on
Mike Bostock explains how he and Shan Carter created the 512 Paths interactive feature, from early sketches to complete implementation.