This repository contains the code used to build the datavisualizations on the following pages:
Run the following commands to make sure all libraries and build tools are installed:
$ bower install
$ npm install
Bower takes care of installing the required libraries, while npm handles installation of the build tools. Now you should be able to build the project using Gulp:
$ gulp build
Available tasks:
- build: compile and prepare the data vizualisations for distribution
- serve: compile and serve a local copy of the data vizualisations
- clean: remove all build artefacts from the output directory
All the visualizations in this package rely on data managed in a few Google spreadsheets. You can use the map.sh
script in the tools
folder to grab the latest version of the data and convert it into formats for use with the visualizations.
The map is based on data from the Natural Earth project.
Since we're pre-rendering the map, we'll download the highest resolution map data available. For this visualization we'll download the gray earth raster data (shaded relief, hypsography, and ocean bottom) and the full collection of cultural vectors.
The tiles for the base layer are rendered using TileMill with the following layers (from top to bottom):
- #cities is based on the ne_10m_populated_places_simple.shp shapefile
- #countrynames is based on the ne_10m_admin_0_countries.shp shapefile
- #roads is based on the ne_10m_roads.shp shapefile
- #urban is based on the ne_10m_urban_areas.shp shapefile filtered to only contain urban areas in Syria and Iraq
- #countries is based on the ne_10m_admin_0_countries.shp shapefile
- #borders is based on the ne_10m_admin_0_boundary_lines_land.shp shapefile
- #hypsography is based on the GRAY_HR_SR_OB.tif raster file
Before we can use the raster layer, we have to reproject the raster file to the default projection used by TileMill (more information is available in this blogpost):
gdalwarp -s_srs EPSG:4326 -t_srs EPSG:3857 -r bilinear \
-te -20037508.34 -20037508.34 20037508.34 20037508.34 \
GRAY_HR_SR_OB.tif GRAY_HR_SR_OB_MERCATOR.tif
After styling the map, we export the necessary tiles in the MBtiles format.
Since we'll be hosting the tiles ourselves, we use mb-util to generate directories of PNG files:
mb-util isil.mbtiles tiles
Made with Natural Earth. Free vector and raster map data @ naturalearthdata.com.
The counter widget uses the bomb icon from Megaicons.