This file shows how to use the geoAlbersUsaTerritories projection from d3-composite-projections.
To change the file, edit draw.js and run
browserify draw.js > bundle.js
The dependencies are installed with:
npm install d3-composite-projections d3-geo d3-request d3-selection d3-transition topojson
| gistup |
Testing the new albsersUsaTerritories projection, which includes all the territories represented in US Congress:
The next d3-composite-projections will include it.
The idea was by Micah Stubbs
Play the video once loaded to see the example.
I took the idea from this tweet.
I created the path with the help of Geojson.io, and it's not exact. The idea was showing the possibility of syncing the video with the path.
The video is a timelapse (I don't dare driving this fast) taken at the paradise valley close to Agadir, Morocco. Go there if you have the opportunity!
The code should be improved. I think that some times don't work if play is pressed beffore the video ends loading.
This exampe shows the temperature at 840 hPa and the geopotential height at 850 hPa from the GFS model (date 27/7/2016).
The idea is showing how to use the d3-marching-squares library as in the previous example, but adding isolines.
The colors represent the temperature and the lines the geopotential height. The example should have a scale, but the d3-legend library doesn't seem to work with d3 v4. The isolines should be labaled too, and this is a quite difficult task.
The example is created with npm and browserify, so if you want to play a little with it:
This example shows how to use the d3-marching-squares library.
The gist reads a GeoTIFF file, gets its data, calculates the zones for each interval and draws it on an html5 canvas element.
The data is an output of the GFS meteorological model (surface temperature), transformed using the grib api tools
The d3-marching-squares library is based on the MarchingSquares.js library.
The GeoTIFF file is read using the npm geotiff library
Based on this awesome post by John Nelson, the example simulates a chalk drawing on a blackboard.
I've used the new D3js 4.0 version and Canvas instead of SVG, since this could be a nice background for some visalization.
The most basic map using d3js v4.0. Just to learn a little about using the new version...
| licence: mit |
| licence: mit | |
| height: 550 |
