D3.js is a JavaScript library for manipulating documents based on data. [source]
D3 allows the user to dynamically create and update content in a web browser by looping through a data set (or multiple) and applying data-driven styles and transformations to either DOM elements or an HTML5 canvas.
Added in HTML5, the HTML element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering. [source]
We prefer canvas over SVG for performance and flexibility reasons. SVGs live in the DOM, which adds memory and rendering overhead, whereas canvas graphics exist for as long as it takes to draw the image onto the canvas. Canvas graphics may also be animated and otherwise process in ways that SVGs cannot.
Leaflet.js is a mapping library that allows us to display map tiles and data together easily.
Leaflet has two primary functions for us:
- Displaying basemap tiles
- Displaying polygonal data on the map (in most cases)
We then use D3.js, Turf.js, and/or Three.js to augment and extend the existing data.
Turf.js is an extremely powerful geospatial analysis library.
Three.js is a 2D and 3D graphics library written for WebGL and canvas.