once upon a datum: graphing crime incidents with google charts – “the rapid fire version”...
Post on 20-Jan-2016
220 Views
Preview:
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 resourcesBit.ly/onagraphingcrimestats
Working sampleThese slidesFormatted data, so you can play alongTutorial walkthroughCheat 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 dataDownload 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 > JSONSelect JSON > Row Arrays
Copy text that is returned to you
JSON > JSON fileSave 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 HTMLAs 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!
top related