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

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!