The Waterman butterfly projection is available as d3.geo.polyhedron.waterman
in the geo.polyhedron D3 plugin. Implemented by Jason Davies; see his interactive rotating version.
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.
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:
- 2 hillshades:
- hillshade_grey (GIS tif)
- hillshade_trans (png)
- 1 color-relief (wikipedia style):
.DS_Store | |
build | |
node_modules |
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"]);
[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.
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.
d3.svg.legend provides for a simple legend that can be displayed horizontally or vertically and accepts a few different d3 scale types.
<!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; |
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.
- Base: Own made Wikiatlas localisator and some of Jason Davies codes.
- Dependencies: Migration to topojson v.1.0
- CSS: migration to Wikipedia map guidelines and internalize to svg