Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”
description
Transcript of Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”
![Page 1: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/1.jpg)
Once Upon A Datum: Graphing Crime
Incidents with Google Charts – “The Rapid Fire
Version”Michelle Minkoff,
Interactive Producer,The Associated Press
![Page 2: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/2.jpg)
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 [email protected].
![Page 3: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/3.jpg)
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 storyData 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
![Page 4: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/4.jpg)
![Page 5: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/5.jpg)
How did categories of crime change (if at all)?
![Page 6: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/6.jpg)
What we’re after: michelleminkoff.com/crime-stats
![Page 7: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/7.jpg)
Ah, deadline! What graphing library to use?
What is a graphing library? Tradeoff of flexibility/difficulty
ProtovisRaphaelFlotGoogle Image ChartsGoogle Chart Tools (prev. Google Visualization
API)
![Page 8: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/8.jpg)
Get the dataDownload an Excel file
![Page 9: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/9.jpg)
Format the data in Excel
![Page 10: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/10.jpg)
Excel > JSON
Use Mr. Data Converter - http://shancarter.com/data_converter/
Paste data in top box
![Page 11: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/11.jpg)
Excel > JSONSelect JSON > Row ArraysCopy text that is returned to you
![Page 12: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/12.jpg)
JSON > JSON fileSave that formatted data!
![Page 13: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/13.jpg)
Basic HTML
![Page 14: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/14.jpg)
Souped-up HTML
![Page 15: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/15.jpg)
Quick CSS
![Page 16: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/16.jpg)
Draw the graph
![Page 17: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/17.jpg)
Draw the graph (2/2)
![Page 18: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/18.jpg)
How do I choose my colors?
![Page 19: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/19.jpg)
Format numbers
![Page 20: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/20.jpg)
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
![Page 21: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/21.jpg)
Changing states
![Page 22: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/22.jpg)
Put it all together
![Page 23: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/23.jpg)
How do I get it in my CMS/on my website?
CMS: Just need to load APIThe inline script tag, loading the chart you’re
usingCode that’s in our drawVisualization() functionA 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
![Page 24: Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”](https://reader035.fdocuments.net/reader035/viewer/2022081604/5681634b550346895dd3dd91/html5/thumbnails/24.jpg)
Voila!And there you have it!Thanks!