Tutorial and links here: http://michelleminkoff.com/crime-stats/onachartingworkshoplinks.html Tips and screenshots that walk through interactive charting using the Google Chart API. Simpler programming geared toward journalists who have minimal/intermediate experience with HTML/CSS, or thereabouts. Presented at the Online News Association's September 2011 conference in Boston.

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/ 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 <script> 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!