Introduction to Data Visualization Tools

CSUN

http://bit.ly/1f272z3

Introductions

Who am I? Who are you? What do you about data journalism? Digital journalism? What do you think are critical skillsets to be a journalist today?

What I’ve Done as a ‘Journo-Coder’ or ‘Digital Journalist’ or ‘Journalist who produces for the web’

Overview of links

Data/Digital Journalism Today

Any examples you interested in, or would like to deconstruct more?

We’re all beginners”/Overview of available tools

Learning what tools are out there to data visualizations; Maps/Charts

To learn how to data visualizations, it would be useful for you to  download Sublime, and begin using ‘Inspect Element’ in Google Chrome.

Infogram  

Example datasets to use:

1) https://variancecharts.com/data/employment_shares.csv

2) https://variancecharts.com/data/global_temp_fiveyear_mean.csv

Google 

Lots of online resources to how to use their tools!

https://sites.google.com/site/lageomedialab/home

Google Mapping Data: https://sites.google.com/site/lageomedialab/maps-engine

example: http://blogs.seattletimes.com/today/2014/05/delridge-location-gets-top-spot-in-seattle-pot-lottery/

example: https://mapsengine.google.com/map/u/0/edit?mid=zXrgnxxUs3dI.k1v7ekUcWBcg 

Google Fusion Charting Data: https://sites.google.com/site/lageomedialab/exercise-4 

Googling data and visualizing it:

1) https://www.google.com/publicdata/directory <embed>

2) http://www.google.com/trends/explore?hl=en-US#q=korean+surgery <embed>

        example:http://fusion.net/culture/story/korean-plastic-surgeries-good-patients-certificates-now-prove-618812

example: GoogleEmbeds.html

http://www.google.com/trends/embed.js?hl=en-US&q=undocumented,+illegal&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330

Knight Open Source Tools 

Timeline JS 

example: http://bulger.wbur.org/story/1977/?location=44444 

example: TunnelsTL_stylized.html

Story Map JS 

example: http://www.marketplace.org/topics/mile-marker-zero 

example:http://america.aljazeera.com/multimedia/2014/3/map-timeline-malaysiaairlinesflight370.html 

example: Example_StoryMap.html

Maps + JS

Leaflet 

example: http://leafletjs.com/examples/choropleth.html

example: http://www.texastribune.org/library/data/us-senate-runoff-results-map/ 

Others likes Leaflet:

US Map, CartoDB, MapBox  

FYI: Charts + JS

D3 JS (Good to be aware of, even though advanced), Variance: building charts only with HTML and CSS, Google Charts: with html, css, and js

What makes up a data journalism team? Computer-assisted reporter, news application developer, data visualization specialist

Other Links You Can Use

Example datasets: https://data.cityofnewyork.us/, https://www.data.gov/open-gov/, http://www.census.gov/censusexplorer/censusexplorer.html 

Sites that I used at the J-School to learn about data/coding:

1) Data basics (i.e., csv, txt, json): http://bit.ly/1rmyNCn

2) Coding basics: http://bit.ly/cuj-spring13

Where to find data and how to have a clean dataset?

Susan McGregor, Tow Center, Mark Hansen, News Web Design Class/Google Syllabus