Charting Crime Categories - Easy(ier) Programming w/Google Chart Tools - ONA 2011 Boston


Published on

Tutorial and links here:

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.

Published in: News & Politics, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Charting Crime Categories - Easy(ier) Programming w/Google Chart Tools - ONA 2011 Boston

  1. 1. Once Upon A Datum: Graphing Crime Incidents with Google Charts – “The Rapid Fire Version”<br />Michelle Minkoff,<br />Interactive Producer,<br />The Associated Press<br />
  2. 2. Where to get resources<br /><br />Working sample<br />These slides<br />Formatted data, so you can play along<br />Tutorial walkthrough<br />Cheat sheat with other charting tips/tricks to know<br />Find me to exchange ideas/ask questions/point out errors, etc. Best way is @michelleminkoff on Twitter or <br />
  3. 3. Crime stats released this week<br />Often, developing charts is done too fast to be done well, or done well, but not at deadline speed<br />Prepare for a story<br />Data released, what to do? Graphs help you report, and tell a story.<br />Go to FBI crime stats page:<br />
  4. 4.
  5. 5. How did categories of crime change (if at all)?<br />
  6. 6. What we’re after:<br />
  7. 7. Ah, deadline! What graphing library to use?<br />What is a graphing library? Tradeoff of flexibility/difficulty<br />Protovis<br />Raphael<br />Flot<br />Google Image Charts<br />Google Chart Tools (prev. Google Visualization API)<br />
  8. 8. Get the data<br />Download an Excel file<br />
  9. 9. Format the data in Excel<br />
  10. 10. Excel > JSON<br />Use Mr. Data Converter -<br />Paste data in top box<br />
  11. 11. Excel > JSON<br />Select JSON > Row Arrays<br />Copy text that is returned to you<br />
  12. 12. JSON > JSON file<br />Save that formatted data!<br />
  13. 13. Basic HTML<br />
  14. 14. Souped-up HTML<br />
  15. 15. Quick CSS<br />
  16. 16. Draw the graph<br />
  17. 17. Draw the graph (2/2)<br />
  18. 18. How do I choose my colors?<br />
  19. 19. Format numbers<br />
  20. 20. Insert it in HTML<br />As easy as bringing that code in and calling the drawVisualization() function from <script> tags in your CMS, and including the div name<br />But I’m not satisfied!<br />I want to switch states – enter the change fuction<br />
  21. 21. Changing states<br />
  22. 22. Put it all together<br />
  23. 23. How do I get it in my CMS/on my website?<br />CMS: Just need to load API<br />The inline script tag, loading the chart you’re using<br />Code that’s in our drawVisualization() function<br />A div with the same id that’s referred to in drawVisualization()<br />Whole page: Upload a four-file structure in same folder, like what we created today<br />
  24. 24. Voila! <br />And there you have it!<br />Thanks!<br />