World tour using Wikipedia Map guidelines, more precisely the soon to come new globe locator convention. Inspired from Jason Davies world tour, merged into my localisator code.
This code is a second wave of customization.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <title>Download SVG</title> | |
| <style type="text/css"> | |
| #download{ | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: black; |
d3.svg.legend provides for a simple legend that can be displayed horizontally or vertically and accepts a few different d3 scale types.
Proof of concept of grayscale image recolored directly via D3js color scale. Wikimaps colors used.
Source: The source image is a global heightmap from the Shuttle Radar Topography Mission, released as part of NASA’s Blue Marble collection at 8km resolution. The topography data is stored in a simple 130KB black&white, 8-bit PNG. In it, darker values represent lower elevations (sea floor), lighter values represent higher elevations (mountains).
Colors are read out of the image using the Canvas API.
Data properties:
[0,255]: there are 8 bits per channel, values range thus is [0-255].0: the [deepest depression below sea level](http://en.wikipedia.org/wiki/List_of_plac
Shown is Lake Superior and the surrounding terrain, using data from NASA’s Shuttle Radar Topography Mission and [bathymetry data from NOAA][noaa].
The two images are layered using a clipping path of the lake, from Natural Earth’s 10m vector lake dataset.
Hill relief, as usual, was generated using the gdal utility suite.
[By Mike Bostock, for later reuse.]
A quick visual reference to every ColorBrewer scale; colors by Cynthia Brewer. Available in CSS and JS format. Click on a palette to log the constituent colors in hexadecimal RGB to the console.
By mbostock. Forked for later adaptation.
This choropleth uses a threshold scale for quantization, mapping arbitrary slices of a continuous domain to discrete values in the range. Unemployment rates ranging from 2 to 10% are quantized into different shades of purple.
var color = d3.scale.threshold()
.domain([.02, .04, .06, .08, .10])
.range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);
| .DS_Store | |
| build | |
| node_modules |
Action: When run, this country.makefile [download][1] the raster GIS DEM sources, process them (unzip, crop, shaded relief, resize, colorize), to output 6 elegant shaded reliefs. Can work for any country or area, given you provide WNES (West/North/East/South) geocoordinates, in decimal degrees.
Output:
By Navarro. See also: D3js: Automatic labels placement to avoid overlaps? (force repulsion)
This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using the force layout and multiple foci. The centroid of each feature will define a foci of the force. This foci will attract the label that correspond to that feature (and ignore the others). The labels will repel themselves to avoid overlapping.