Once Upon A Datum: Graphing Crime Incidents with Google Charts – “The Rapid Fire Version” Michelle Minkoff, Interactive Producer, The Associated Press

Where to get resources Bit.ly/onagraphingcrimestats Working sample These slides Formatted data, so you can play along Tutorial walkthrough Cheat sheat with other charting tips/tricks to know Find me to exchange ideas/ask questions/point out errors, etc. Best way on Twitter or

Crime stats released this week Often, developing charts is done too fast to be done well, or done well, but not at deadline speed Prepare for a story Data released, what to do? Graphs help you report, and tell a story. Go to FBI crime stats page: us/cjis/ucr/crime-in-the-u.s/2010/crime-in-the-u.s.-2010

How did categories of crime change (if at all)?

What we’re after: michelleminkoff.com/crime-stats

Ah, deadline! What graphing library to use? What is a graphing library? Tradeoff of flexibility/difficulty Protovis Raphael Flot Google Image Charts Google Chart Tools (prev. Google Visualization API)

Get the data Download an Excel file

Format the data in Excel

Excel > JSON Use Mr. Data Converter Paste data in top box

Excel > JSON Select JSON > Row Arrays Copy text that is returned to you

JSON > JSON file Save that formatted data!

Basic HTML

Souped-up HTML

Quick CSS

Draw the graph

Draw the graph (2/2)

How do I choose my colors?

Format numbers

Insert it in HTML As easy as bringing that code in and calling the drawVisualization() function from tags in your CMS, and including the div name But I’m not satisfied! I want to switch states – enter the change fuction

Changing states

Put it all together

How do I get it in my CMS/on my website? CMS: Just need to load API The inline script tag, loading the chart you’re using Code that’s in our drawVisualization() function A div with the same id that’s referred to in drawVisualization() Whole page: Upload a four-file structure in same folder, like what we created today

Voila! And there you have it! Thanks!