Data-driven journalism camp in Berlin, november 2016. Example files.

Code editor if needed:

• http://www.sublimetext.com
• https://atom.io

Generic tools:

• http://papaparse.com to parse CSV (be careful a local or an online server is needed, cf Mamp)
• https://color.adobe.com/fr/ to deal with color charts
• http://www.regexr.com to try a write regular expressions, useful to analyse huge portion or to make replacement in text.

Charts, timeline and other dataviz library or tools:

• https://www.infogr.am
• https://cloud.highcharts.com
• https://developers.google.com/chart/
• http://timeline.knightlab.com
• http://www.aeontimeline.com
• https://d3js.org
• http://leafletjs.com
• https://github.com/Leaflet/Leaflet.markercluster
• https://github.com/makinacorpus/Leaflet.TextPath
• https://github.com/bbecquet/Leaflet.PolylineDecorator
• https://github.com/teralytics/Leaflet.D3SvgOverlay
• http://geojson.io/
• https://www.mapbox.com
• http://www.tableau.com

To export chart has an image, and be able to download it

• https://jsfiddle.net/eueygc2e/8/ (bubble charts)
• https://jsfiddle.net/e1auxam2/1/ (bar charts)
• https://jsfiddle.net/eueygc2e/10/ (bubble charts)

• http://timeline.knightlab.com
• link to the spreadsheet template (to save in your google drive)

A simple leaflet starter file, with open street map data. Leaflet is an opensource map library, that can be used with external data (Openstreetmap or mapbox) or even bitmap pictures. For this last example

Data downloaded from refugeehackathon

To be able to work with the file without a web server (online or offline), some modifications were brought to the file : var refugee_data= was added at the start, in order to store the geojson in a variable And we replaced the string "UNKNOWN" by "Feature" in a code editor such as sublime, but this can be done in any tiny text editor with a search/replace functionnality.

Then we added 2 parts in the code :

• That part go before the script tag with the javascript code

<!-- this is the link to the modified geojson -->
<script src="refugee_help_map.geojson" type="text/javascript"></script>

• That one goes after the map declaration in the javascript part

// this is scanning the geojson file
L.geoJSON(refugee_data, {
	style: function(feature) {},
	onEachFeature: forEachPointFinded //this is the call to a function for each point
}).addTo(map);

// this is the declaration of the function forEachPointFinded
function forEachPointFinded(feature, layer) {
	// if a description is found
	if (feature.properties.description) {
		// we add a popup on the click event
		// the content of the popup is the Name and the description
		layer.bindPopup("<h1>"+feature.properties.Name+"</h1><div>"+feature.properties.description+"</div>");
	}
}

For more complicated ways to include geojson, you may read this article : External GeoJSON and Leaflet: The Other Way(s)

A polyline is geometrical linear path, composed of differents points. Here is the code to include a polyline :

// this is how to add a line composed of differents points
var polyline  = L.polyline( [
		[52.354659, 13.028051], // 1st point
		[52.707861, 13.696250]	// 2nd point, ...
	],
	{
		color: 'red', 			// color
		weight:4,				// weight of the line
		opacity:0.5				// opacity of the line
	}
).addTo(map);					// we add it on the map