#30DayMapChallenge Day 2. Lines
Autumn – coloring streams by their flow order in QGIS
Here’s one of the maps I have made for the #30DayMapChallenge on Twitter in 2021. You can find out more about the challenge and my other maps in this post.
Goal: A map with lines.
Live: https://maptheclouds.com/playground/30-day-map-challenge/lines/
Tweet: https://twitter.com/maptheclouds/status/1455593450720595984
Code: https://github.com/alexaac/map-challenges/tree/master/lines
Description:
The visualization shows the Yosemite Valley river network and catchment area, and is made by coloring streams by their flow order in QGIS.
Data: OpenTopography
Tags: #D3js #QGIS #mapshaper #canvas #LiDAR #hidrology #river #channels
Inspiration:
https://observablehq.com/@jipexu/chinese-rivers
https://www.youtube.com/watch?v=xwiHQlmEEjw
https://angrytools.com/gradient/
Challenges: For this map, I already had a elevation model surface for Yosemite derived from LiDAR files downloaded from OpenTopography.
I got the chance to make some GIS analysis in QGIS, play with styling and gradients in JavaScript and CSS, and display the result in the browser.
I have used QGIS to extract the river network (you can watch a tutorial that explains how to do this, ‘Deriving River Network & Catchments from a DEM using QGIS’), and mapped it in the browser using D3.js and Canvas.
What is interesting about the map is the leaves effect, from setting a fillStyle to the river lines, and the sky gradient. I have coloured the leaves by stream order, except for the main river.
I have created gradients for three elements on the page, in the title, for the legend and as a background for the map.
Here’s how I have obtained the gradient in the title, as background for the unicode symbol, with CSS:
Here is the code for creating the gradient for the legend, with D3.js:
And here is the code for creating the map background:
Initially, you could zoom and pan, but because the file was too large, it was loading slowly, and I didn’t want to handle this, I have added a fallback static image on the page. If you have patience, maybe you will se the interactive map on the page, too, after a while.
TODO: create tiles and show details by zoom level, fix pan.