Your SlideShare is downloading. ×
Charting Crime Categories - Easy(ier) Programming w/Google Chart Tools - ONA 2011 Boston
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

1,332
views

Published on

Tutorial and links here: http://michelleminkoff.com/crime-stats/onachartingworkshoplinks.html …

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.

Published in: News & Politics, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,332
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 4.
  • 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!