Philippe Rivière Fil

Generating an SVG from a set of shapefiles

The USGS provides detailed downloads of fire perimeters, with timestamped files that can be used to show the spread of a major fire over time.

Using the 2017 Thomas fire as an example, we'll process this data into a single SVG file with all the different perimeter measurements.

This index page contains links to a series of shapefiles of the fire boundary, each one with a timestamp:

https://rmgsc.cr.usgs.gov/outgoing/GeoMAC/2017_fire_data/California/Thomas/

Making a big image zoomable

When you have a giant image and you want to make it easy to pan and zoom without downloading the whole 50MB image into someone's browser, a nice workaround is to cut that image into tiles at different zoom levels and view it as it were a map. An example where I've used this technique is The "Snowpiercer" Scenario.

One way to cut your big image into the requisite tiles is with gdal2tiles.py.

Alternatively, this Node script will do the cutting after you install node-canvas and mkdirp:

const fs = require("fs"),

https://blog.datawrapper.de/weekly39/

	license: mit
	height: 1500
	border: no
	scrolling: no

	# python3 version, derived from python2 version https://gist.github.com/dergachev/7028596
	#
	# taken from http://www.piware.de/2011/01/creating-an-https-server-in-python/
	# generate server.xml with the following command:
	# openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
	# run as follows:
	# python3 simple-https-server.py
	# then in your browser, visit:
	# https://localhost:4443

	<html>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="voronoi.js"></script>
	<body>
	<script>
	var width = 960;
	var height = 500;

	var data = d3.range(200).map(function(d) {
	var y = d3.randomNormal(height / 2,80)();

	#ifdef GL_ES
	precision mediump float;
	precision mediump int;
	#endif

	varying vec4 vertColor;
	varying vec3 vertNormal;
	varying vec3 vertLightDir;

	varying vec4 vertTexCoord;