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

2. 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 is @michelleminkoff on Twitter or meminkoff@gmail.com.

3. 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: http://www.fbi.gov/about- us/cjis/ucr/crime-in-the-u.s/2010/crime-in-the-u.s.-2010

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

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

7. 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)

8. Get the data Download an Excel file

9. Format the data in Excel

10. Excel > JSON Use Mr. Data Converter - http://shancarter.com/data_converter/ http://shancarter.com/data_converter/ Paste data in top box

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

12. JSON > JSON file Save that formatted data!

13. Basic HTML

14. Souped-up HTML

15. Quick CSS

16. Draw the graph

17. Draw the graph (2/2)

18. How do I choose my colors?

19. Format numbers

20. 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

21. Changing states

22. Put it all together

23. 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

24. Voila! And there you have it! Thanks!