Data is fun. This repo is here to help you figure out the best way to use it. Here is a general workflow for a story with data involved.
The first step is to find the data. You can either stumble upon it or, if you know exists, ask nicely/FOIA for it.
When you are trying to acquire data it's important to figure out the format of the data before you get it. Your default format should always be CSV, or comma-separated values. This is a text format of a basic spreadsheet and Excel can open it easily. Several other data visualizers accept CSV easily.
You want to avoid expensive formats like SPSS which requires software to retrieve or flat PDFs which cannot be used at all. When in doubt, ask the web team.
Once you have the data you probably want to get it into a format that is easy to analyze and verify. There are many ways to go about this. The simplest and most common is just shoving it into Excel. That's a great first step. You may also want to try out Google Fusion Tables. Once you have it in a useable program you'll want to clean the data, AKA: make sure it all works properly.
Now that you have analyzed the data and understand it better, it's time to visualize it. This can get extremely complicated or can stay very simple, it's up to the data and the story. Check out our collection of useful tools and links. For 95 percent of all data you probably want either a map or a bar chart. Simple solutions for these are Google Fusion Tables (maps and graphs, seriously, they're awesome), StoryMapJS (map only) or plotly (graphs only).
Now that you have completed your data viz, you need to embed it into your story. To do so you need to find the embed code for your visualization. Now, each service hides embed codes in different places but generally they are under a 'Publish' or 'Share' button/menu. If not, Google the service and figure out how to get the embed code.
Then paste that code into the WebHTML DTtag field if you want it at the top, above the headline, or in the WebEmbed field if you want it below the story.
| Tool | Description | Difficulty (1-10) | Responsive | $$$ |
|---|---|---|---|---|
| Chartist.js | Simple responsive charts | ❓ | ✅ | ❓ |
| cssplot | CSS charts base library | ❓ | ✅ | ❓ |
| C3.js | Unofficially: D3-based chart library that eliminates the need to write D3 code. Officially: D3-based reusable chart library. | 5 | ✅ | ✅ |
| Chart.js | Simple, clean and engaging charts for designers and developers | ✅ | ❓ | |
| Dygraphs.js | The Dygraphs.js library allows developers to create interactive charts using the X and Y axis to display powerful diagrams. The more data being parsed, the higher the functionality of the graph. Line graphs only. | ❓ | ❓ | ❓ |
| D3.js | D3 is capable of creating stunning graphics via dynamically updating the DOM. | 5 | ✅ | |
| Epoch | A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations. | ❓ | ❓ | |
| InfoVis a.k.a. JIT | The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. | ❓ | ❓ | |
| The Google Visualization API | Display live data on your site: Google’s Visualization API can be called with barely any code. | 2 | ❓ | ❓ |
| Springy.js | Springy.js is a JavaScript library that relies on an algorithm to create force-directed graphs, resulting in nodes reacting in a spring-like manner on the web page. | ❓ | ❓ | |
| dimple | The aim of dimple is to open up the power and flexibility of d3 to analysts. | ❓ | ❓ | |
| Sigma | Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications. | ❓ | ✅ | |
| Raphaël | Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. | ❓ | ❓ | |
| gRaphaël | gRaphaël’s goal is to help you create stunning charts on your website. | ❓ | ❓ | |
| Ember Charts | A charting library built with the Ember.js and d3.js frameworks. | ❓ | ❓ | |
| plot.ly | Online GUI but can also be used with Python for interactives. Online GUI is in beta and cannot embed graph. May be able to soon. Has great spreadsheet and graphing interfaces. Python docs look a lot more extensive than online stuff. | online: 1 python: ❓ | ✅ | |
| matplotlib (Python) | Seems to be a simple way to create graphics. | 6 | ✅ |
| Tool | Description | Difficulty (1-10) | Responsive | $$$ |
|---|---|---|---|---|
| Topline | A jQuery wrapper for ProPublica's Stateline library, adding some no-fuss tooltips, legends and source lines. | ❓ | ✅ | Free |
| Mapbox GL | Mapbox is an open source mapping platform for developers and designers at enterprise scale. | ❓ | ❓ | ✅ |
| StoryMap JS | Super easy way to tell a story using a map. Each location acts as a slide. Note: has streets | 1 | ✅ | |
| Polymaps | Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers. | ❓ | ❓ | |
| Leaflet | An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Requires you to find map tiles. | ❓ | ❓ | |
| GitHub: View GeoJSON/TopoJSON Source | July 23, 2014 | |||
| GitHub: GeoJSON rendering improvements | June 26, 2013 | |||
| GitHub: There's a map for that | June 13, 2013 | |||
| heatmap.js | Dynamic Heatmaps for the Web. | ❓ | ❓ | |
| ColorBrewer 2.0 | A website that's got mapping-specfic color picking and generating tools. |
| Tool | Description | Difficulty (1-10) | Responsive | $$$ |
|---|---|---|---|---|
| Ember Table | Ember table allows you to render very large data sets by only rendering the rows that are being displayed. | 2 | ✅ | |
| DataTables | Responsive, tables that take a number of data types | 2 | ✅ |
| Tool | Description | Difficulty (1-10) | Responsive | $$$ |
|---|---|---|---|---|
| Odyssey | A simple way for journalists, designers, and creators to weave interactive stories. Note: no streets, only cities | 2 | ✅ | |
| Present your ideas | Slides is a place for creating, presenting and sharing presentations. | 3 | ❓ | Freemium |
| Snapshot.js | Node.js app for slicing and dicing paginated chunks of data with easy sorting and filtering. | ❓ | ❓ | |
| Parsehub.com | Turn dynamic websites into APIs | 2 | ❓ | Freemium |
- TimelineJS - Beautifully crafted timelines that are easy and intuitive to use.
- SoundCiteJS - Making inline audio easy and seamless.
- twXplorer - A smarter way to search Twitter.
- StoryMapJS - Maps that tell stories and are easy to build.
- JuxtaposeJS - Before/after slider that takes the best of all the others.
An index to the open code being written in journalism, fully tagged and searchable.
- Present your ideas: Slides is a place for creating, presenting and sharing presentations.
- Snapshot.js: Node.js app for slicing and dicing paginated chunks of data with easy sorting and filtering.
- heatmap.js: Dynamic Heatmaps for the Web.
- Parsehub.com: Turn dynamic websites into APIs
- sheetlabs: Turn your spreadsheets into APIs effortlessly.
- Elm: Elm is great for 2D and 3D games, diagrams, widgets, and websites. Graphs and charts