Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/pippinlee/open-journalism-project

Resource to bring code and journalism together for fun
https://github.com/pippinlee/open-journalism-project

data-journalism javascript journalism news tutorial

Last synced: 7 months ago
JSON representation

Resource to bring code and journalism together for fun

Awesome Lists containing this project

README 

          
# Open Journalism Project



*Resource(s) to bring code and journalism together for fun*



##Contribute?



**Yes, we love contributions.**



**This site is a work in progress, but can ALWAYS use better, improved copy. Also important is continuing to make the list of resources of libraries, tools, and examples more thorough.**



**The goal is to show the accessible nature of the open web to anyone interested in the intersection of the web and news.**



To help contribute first `git clone` this project. Then in the project directory run:



`jekyll serve --watch --baseurl ''`



You'll then be able to go to `localhost:4000` in your browser to view the site. The above `--watch` command allows your edits to a page like data.md or _posts.scss to be seen without having to restart the server.



The above `--baseurl ''` allows the site to run locally without using the github url structure.



To test that everything is working, open up `data.md` in your text editor and add a sentence to the How We Got Here section. Save the file with your changes, then you should be able to go back to your browser and refresh the page to see the changes.



If you want to submit a pull request with a fix or addition, it's also recommended you fork and create new branches for cleaner work flow.



## Content

* 🌍 [Mapping](#user-content-mapping-)



* 📈 [Data](#user-content-data-)



* 🙊 [Security](#user-content-security-)



* 🔮 [Command line tools](#user-content-command-line-tools-)



* 📷 [Media](#user-content-media-)



* 👏 [Open source](#user-content-open-source-)



								



### Mapping 🌍

****



**Mapbox**



Site: [mapbox.com](https://www.mapbox.com/)



Github: [github.com/mapbox](https://github.com/mapbox)



* **Tutorials**

	* [Mapbox crashcourse](https://www.mapbox.com/tilemill/docs/crashcourse/introduction/)

	* [Mapbox studio tutorial](http://www.digital-geography.com/mapbox-studio-tutorial-1-installation-gui-first-map/#.VK45U2TF8m8)

* **Examples**

	* [What can you build with Mapbox](https://www.mapbox.com/showcase/)



**Leaflet**



Site: [leafletjs.com](http://leafletjs.com/)



Github: [github.com/Leaflet](https://github.com/Leaflet/Leaflet)



* **Tutorials**

	* [Leaflet quick start](http://leafletjs.com/examples/quick-start.html)

	* [Lay group and layer control](http://leafletjs.com/examples/layers-control.html)

	* [Leaflet on mobile](http://leafletjs.com/examples/mobile.html)

	* [Setting up Leaflet with Basemap](http://giscollective.org/tutorials/web-mapping/leaflet-1/)

	* [Getting started with Leaflet](http://switch2osm.org/using-tiles/getting-started-with-leaflet/)

	* [Creating an interactive map with Leaflet and OpenStreetMap](http://asmaloney.com/2014/01/code/creating-an-interactive-map-with-leaflet-and-openstreetmap/)

	* [Ebook: Leaflet Tips and Tricks](https://leanpub.com/leaflet-tips-and-tricks/read)

* **Examples**

	* [Holiday lights 2012](http://www.spokesman.com/maps/holiday-lights-2012/)

	* [Where shooting occur in Chicago](http://crime.chicagotribune.com/chicago/shootings/)



	



**Tilemill**



Site: [mapbox.com/tilemill](https://www.mapbox.com/tilemill/)



Github: [github.com/mapbox/tilemill](https://github.com/mapbox/tilemill)



* **Tutorials**

	* [The insanely illustrated guide to your first data-driven tilemill map](http://dataforradicals.com/the-insanely-illustrated-guide-to-your-first-tile-mill-map/)

	* [Video: Use TileMill with Open Data](http://vimeo.com/64578563)

	* [Cartography with TileMill](http://learnosm.org/en/map-design/tilemill/)

	* [Digital mapping with TileMill](http://www.lizhannaford.com/journalism/beginners-easy-guide-to-digital-mapping-with-tilemill/)



**QGIS**



Site: [qgis.org](http://www.qgis.org/en/site/)



* **Tutorials**

	* [Havard QGIS 2.0 Workshop](http://maps.cga.harvard.edu/qgis/)



**OpenStreetMap**



Site: [openstreetmap.org](http://www.openstreetmap.org/)



### Data 📈

****



**D3.js**



Site: [d3js.org](http://d3js.org/)



Github: [github.com/mbostock/d3](https://github.com/mbostock/d3)



* **Tutorials**

	* [code.minnpost.com/simple-map-d3/](http://code.minnpost.com/simple-map-d3/)

	* [Dashing D3.js ebook](https://www.dashingd3js.com/table-of-contents)

	* [Official D3.js list of tutorials](https://github.com/mbostock/d3/wiki/Tutorials)

* **Examples**

	* [How Obama Won Re-election](http://www.nytimes.com/interactive/2012/11/07/us/politics/obamas-diverse-base-of-support.html)

	* [Racing Against History](http://www.nytimes.com/interactive/2012/08/01/sports/olympics/racing-against-history.html)



**Raphael.js**



Site: [raphaeljs.com](http://raphaeljs.com/)



Github: [github.com/DmitryBaranovskiy/raphael](https://github.com/DmitryBaranovskiy/raphael/)



* **Tutorials**

	* [An introduction to Raphael JS library, Tutsplus+](http://code.tutsplus.com/tutorials/an-introduction-to-the-raphael-js-library--net-7186)

	* [Intro to Raphael, HTML5 Rocks](http://www.html5rocks.com/en/tutorials/raphael/intro/)

	* [Raphael JS tutorial part I](http://www.varunpant.com/posts/raphael-js-tutorial-part-i)

	* [Using Raphael with SVGs](http://alistapart.com/article/svg-with-a-little-help-from-raphael)

	* [Create a responsive and interactive animation with Raphael.js](http://speckyboy.com/2014/08/27/creating-responsive-interactive-animations-raphael-js-2/)

	* VIDEO: [Raphael Part I](https://www.youtube.com/watch?v=IPy77zMsd0Y) [Raphael Part II](https://www.youtube.com/watch?v=mI1Vajr3Fiw)

* **Examples**

	* [Canada map and data](http://pippinlee.com/canada/)

	* [Easing with Raphael.js](http://raphaeljs.com/easing.html)



**Kimono**



Site: [KimonoLabs.com](https://www.kimonolabs.com/)



Github: [github.com/kimonolabs](https://github.com/kimonolabs)



* **Tutorials**

	* [Interactive: Create your first API](https://www.kimonolabs.com/learn/create-first-api)

	* [Web scraping with Kimono Labs](http://moz.com/blog/web-scraping-with-kimono-labs)

	* [Video: Using Kimono](https://www.kimonolabs.com/learn/videos)

	

	



**Chart.js**



Site: [chartjs.org](http://www.chartjs.org/)



Github: [github.com/nnnick/Chart.js](https://github.com/nnnick/Chart.js/)



* **Tutorials**

	* [Build a dynamic dashboard with ChartJS](http://webdesign.tutsplus.com/tutorials/build-a-dynamic-dashboard-with-chartjs--webdesign-14363)

	* [Create animated charts with Chart.JS](http://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/	)

	* [Getting started with Chart.js](http://kushagragour.in/blog/2013/06/getting-started-with-chartjs/)

* **Examples**

	* Thing1



**Chartbuilder**



Site: [quartz.github.io/Chartbuilder](http://quartz.github.io/Chartbuilder/)



Github: [github.com/Quartz/Chartbuilder](https://github.com/Quartz/Chartbuilder/)



* **Tutorial**

	* [How to turn everyone in your newsroom into graphics editors with Chartbuilder](http://www.niemanlab.org/2013/07/how-to-turn-everyone-in-your-newsroom-into-a-graphics-editor/)

	* [How to use Chartbuilder to make simple graphics fast](http://www.poynter.org/how-tos/220572/how-to-use-chartbuilder-to-make-simple-graphics-fast/

)



* **Examples**

	* [Water cleanup commences, New Hampshire Public Radio](http://nhpr.org/post/water-cleanup-commences-beede-story-shows-superfund-laws-flaws)

	* [Bike Sales in Europe, NPR](http://www.npr.org/blogs/parallels/2013/10/24/240493422/in-most-every-european-country-bikes-are-outselling-cars)

	* [Small business still reeling from credit crunch](http://www.cnbc.com/id/101009116)



**Sheetsee.js**



Site: [jlord.us/sheetsee.js](http://jlord.us/sheetsee.js/)



Github: [github.com/jlord/sheetsee.js](https://github.com/jlord/sheetsee.js)



* **Tutorial**

	* [About sheetsee.js](https://github.com/jlord/sheetsee.js/blob/master/docs/about.md)

	* [Sheetsee.js: the basics](https://github.com/jlord/sheetsee.js/blob/master/docs/basics.md)

	* [Jessica Lord on Sheetsee.js](https://source.opennews.org/en-US/articles/jessica-lord-sheetseejs/)

* **Examples**

	* [Mapping hack spots](http://jlord.us/hack-spots/)

	* [Budget visualization](http://seepennywork.in/#)



**Tabletop.js**



Github: [github.com/jsoma/tabletop](https://github.com/jsoma/tabletop)



* **Tutorial**

	* [Tabletop.js's Github README](https://github.com/jsoma/tabletop)

	* [Why I don't use Tabletop.js in production](https://gist.github.com/jsvine/3295633)

	* [Using spreadsheets and Tabletop.js as a Web App Backend](http://www.mikeball.us/blog/using-google-spreadsheets-and-tabletop-as-a-back-end/)

	* [Web-based data tables with Tabletop.js](http://dataforradicals.com/creating-interactive-web-based-data-tables-with-tabletop-js/)

	* [Creating a styled data project with Tabletop and Handlebars](http://montrealgazette.com/news/local-news/creating-a-styled-data-project-with-tabletop-and-handlebars)



* **Examples**

	* [Internet Indians, Al Jazeera](http://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.html)

	* [Mayor Tracker 2013, WNYC](http://project.wnyc.org/mayortracker2013/)

	* [Mapsheet](https://github.com/jsoma/mapsheet)

	* [You Might Be the 47 Percent If..., Mother Jones](http://www.motherjones.com/politics/2012/09/charts-47-percent-romney-tax-data)

	* [Police Departments, Massachusetts](http://dataforradicals.com/js/tabletop-to-datatables/)

	* [Mother Jones News Quiz](http://www.motherjones.com/politics/2013/02/back-line-green-card-immigration-reform-quiz)



**Fusion Tables**



Site: [support.google.com/fusiontables/answer/2571232](https://support.google.com/fusiontables/answer/2571232)



* **Tutorials**

	* [Google's Fusion Tables tutorials](https://support.google.com/fusiontables/answer/184641?hl=en)

	* [Mountain Bike trails](http://blog.mtbguru.com/2010/02/24/mtbguru-tracks-as-seen-through-google-fusion-tables/)

	* [Mapping population densities by the block](http://montrealgazette.com/news/local-news/mapping-population-densities-by-the-block)

	* [Mapping with Fusion Tables](http://www.smalldatajournalism.com/projects/one-offs/mapping-with-fusion-tables/)

	* [Video: Google Fusion Table map visualization tutorial](https://www.youtube.com/watch?v=ok7gz4nAnFE)



* **Examples**

	* [Mapping the riots with poverty, Guardian](http://www.theguardian.com/news/datablog/interactive/2011/aug/10/poverty-riots-mapped)

	* [Newspaper Map](http://newspapermap.com/)

	* [What's the most congested street in Toronto, Globe and Mail](http://www.theglobeandmail.com/news/toronto/have-your-say-whats-the-most-congested-street-in-toronto/article2361996/)

	* [Hurricane zones, WNYC](http://project.wnyc.org/hurricane-zones/hurricane-zones.html)



	

**Other data links**



* [Comparing Paper.js, Processesing.js, and Raphael.js](http://www.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/)

* [Differences between Raphael.js and D3.js](http://stackoverflow.com/questions/15219732/d3-js-vs-raphael-js)

* [Data Journalism Handbook](http://datajournalismhandbook.org/1.0/en/delivering_data_7.html)

* [Flowing Data: learning R and visualizations](http://flowingdata.com/)



### Security 🙊

****



**Onionshare**



Site: [onionshare.org](https://onionshare.org/)



Github: [github.com/micahflee/onionshare](https://github.com/nnnick/Chart.js/)



* **Tutorials**

	* [github.com/micahflee/onionshare/blob/master/README.md](https://github.com/micahflee/onionshare/blob/master/README.md)



**SecureDrop**



Site: [freedom.press/securedrop](https://freedom.press/securedrop/)



Github: [github.com/freedomofpress/securedrop](https://github.com/freedomofpress/securedrop/)



* **Tutorials**

	* [Using SecureDrop with the Washington Post](http://pagebuilder.washingtonpost.com/pb/securedrop/)

* **Examples**

	* [The Guardian uses SecureDrop for confidential stories](https://securedrop.theguardian.com/)

	* [Using SecureDrop with The Intercept](https://firstlook.org/theintercept/securedrop/	)

	* [Using SecureDrop with ProPublica](https://securedrop.propublica.org/)



**Tor**



Site: [torproject.org](https://www.torproject.org)



Github: [github.com/TheTorProject](https://github.com/TheTorProject)



* **Tutorials**

	* [Installing Tor on different systems](https://www.torproject.org/docs/installguide.html.en)

	* [A beginner's guide to Tor](http://www.digitaltrends.com/computing/a-beginners-guide-to-tor-how-to-navigate-through-the-underground-internet/)

* **Examples**

	* [Who uses Tor?](https://www.torproject.org/about/torusers.html.en)



**Cryptocat**



Site: [crypto.cat](https://crypto.cat/)



Github: [github.com/cryptocat/cryptocat](https://github.com/cryptocat/cryptocat)



* **Tutorials**

	* [Video: How to use cryptocat](https://www.youtube.com/watch?v=3BeHR2nfaQg)

	* [Video: Encrypt your chats with cats](https://www.youtube.com/watch?v=Hhv-XyTXmQY)



**Other security links**



* [Why King George III Can Encrypt](https://freedom-to-tinker.com/blog/randomwalker/why-king-george-iii-can-encrypt/) 

* [minilock.io](https://minilock.io/)



### Command line tools 🔮

****



**youtube-dl**



Site: [rg3.github.io/youtube-dl](http://rg3.github.io/youtube-dl/)



Github: [github.com/rg3/youtube-dl](https://github.com/rg3/youtube-dl)



* **Tutorials**

	* [rg3 documentation](http://rg3.github.io/youtube-dl/documentation.html)

	* [Downloading videos from Youtube](http://community.linuxmint.com/tutorial/view/1040)



**gifme**



Site: [github.com/holman/gifme](https://github.com/holman/gifme/)



Github: [github.com/holman/gifme](https://github.com/holman/gifme/)



### Media 📷

****



**Popcorn.js**



Site: [popcornjs.org](http://popcornjs.org/)



Github: [github.com/mozilla/popcorn-js](https://github.com/mozilla/popcorn-js)



* **Tutorials**

	* [https://dseifried.wordpress.com/2011/06/28/an-overview-of-popcorn-js-streetview/](https://dseifried.wordpress.com/2011/06/28/an-overview-of-popcorn-js-streetview/)



* **Examples**

	* [Radiolab](http://hyper-audio.org/r/)

	* [Al Jazeera: Internet Indians](http://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.html)



**Soundcite**



Site: [soundcite.knightlab.com](http://soundcite.knightlab.com/)



Github: [github.com/NUKnightLab/soundcite](https://github.com/NUKnightLab/soundcite)



* **Tutorials**

	* [Soundcite tutorial](http://vimeo.com/68383495)



* **Examples**

	* [An interview with Chance the rapper, WBEZ](http://www.wbez.org/blogs/jim-derogatis/2013-05/chance-rapper-paints-giddy-yet-profound-picture-south-side-life-107164)

	* [Wendy Davis, Washington Post](http://www.washingtonpost.com/blogs/the-fix/wp/2013/06/26/this-tweetstorm-was-planned-in-advance/)



### Open Source 👏

***



**Github**



Site: [github.com](https://github.com/)



* **Tutorials**

	* [Hello World on Github](https://guides.github.com/activities/hello-world/)

	* [Git - The simpel guide](http://rogerdudler.github.io/git-guide/)

	* [Git flight rules](https://github.com/k88hudson/git-flight-rules)

	* [How to Github](https://gun.io/blog/how-to-github-fork-branch-and-pull-request/)

	* [Interactive: Try Git](https://try.github.io/levels/1/challenges/1)

	

**Other resources about open source and journalism**



* [Mozilla's Source](https://source.opennews.org/en-US/)



Canadian news orgs in open source | Github

:--------------------------------:| :-----------: | :-----------:

Ubyssey         				   | [github.com/ubyssey/](https://github.com/ubyssey)         

Globe and Mail         			   | [github.com/globeandmail](https://github.com/globeandmail)        

Toronto Star         			   | [  ]()         

National Post         			   | []()         



US news orgs in open source 	   | Github

:--------------------------------:| :-----------: | :-----------:

NYTimes         				   | [github.com/nytimes](https://github.com/nytimes/) & [github.com/nytlabs](https://github.com/nytlabs)

Knightlab (Northwestern)          | [github.com/NUKnightLab](https://github.com/NUKnightLab)        

Propublica         				   | [github.com/propublica](https://github.com/propublica/)         

NPR       			  			   | [github.com/npr](https://github.com/npr) & [github.com/nprapps](https://github.com/nprapps) 

Chicago Tribune					   | [github.com/newsapps](https://github.com/newsapps)

LA Times 						   | [github.com/datadesk](https://github.com/datadesk)

Texas Tribune        			   | [github.com/texastribune](https://github.com/texastribune)

Washington Post					   | [github.com/washingtonpost](https://github.com/washingtonpost)

Boston Globe					   | [github.com/BostonGlobe](https://github.com/BostonGlobe)

WNYC							   | [github.com/wnyc](https://github.com/wnyc)

Columbia U School of Journalism   | [github.com/jsieben](https://github.com/jsieben)

Vox Media						   | [github.com/voxmedia](https://github.com/voxmedia)

Al Jazeera America				   | [github.com/ajam](https://github.com/ajam)

Time Magazine					   | [github.com/TimeMagazine](https://github.com/TimeMagazine)

HuffPost Data					   | [https://github.com/huffpostdata](https://github.com/huffpostdata)

BuzzFeedNews					   | [github.com/BuzzFeedNews](https://github.com/BuzzFeedNews)

FiveThirtyEight					   | [github.com/fivethirtyeight](https://github.com/fivethirtyeight)

USC Annenberg J-School			   | [https://github.com/uscannenberg](https://github.com/uscannenberg)