Once Upon A Datum: Graphing Crime Incidents with Google Charts – “ The Rapid Fire Version ”

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

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

ProtovisRaphaelFlotGoogle Image ChartsGoogle 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 ArraysCopy 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 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

Voila!And there you have it!Thanks!