• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Charting Crime Categories - Easy(ier) Programming w/Google Chart Tools - ONA 2011 Boston
 

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

on

  • 1,550 views

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.

Statistics

Views

Total Views
1,550
Views on SlideShare
1,504
Embed Views
46

Actions

Likes
0
Downloads
2
Comments
0

5 Embeds 46

http://storify.com 26
http://copyeditor.tumblr.com 14
http://www.clasesdeperiodismo.com 4
http://paper.li 1
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Once Upon A Datum: Graphing Crime Incidents with Google Charts – “The Rapid Fire Version”
      Michelle Minkoff,
      Interactive Producer,
      The Associated Press
    • 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.
    • 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
    • How did categories of crime change (if at all)?
    • What we’re after: michelleminkoff.com/crime-stats
    • 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)
    • Get the data
      Download an Excel file
    • Format the data in Excel
    • Excel > JSON
      Use Mr. Data Converter - http://shancarter.com/data_converter/
      Paste data in top box
    • Excel > JSON
      Select JSON > Row Arrays
      Copy text that is returned to you
    • JSON > JSON file
      Save that formatted data!
    • Basic HTML
    • Souped-up HTML
    • Quick CSS
    • Draw the graph
    • Draw the graph (2/2)
    • How do I choose my colors?
    • Format numbers
    • 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
    • Changing states
    • Put it all together
    • 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
    • Voila!
      And there you have it!
      Thanks!