Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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