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
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>Interpolating Geodata</title> | |
<meta charset="utf-8" /> | |
</head> | |
<style> | |
html,body { | |
height: 100%; | |
width: 100%; | |
margin: 0; |
WP style user-friendly selection of geo-coordinates (decimal degrees).
Click States to test me !>Click States to test me !
Alternative of: Map zoom + static frame, with more details.
Exploration around automatic centering, zooming, and responsive framing. This gist have RESPONSIVE frames.
Here, only the width is provided, the minimal height is calculated from the svg hook's width and the projected shape ratio. This tied frame is the relevant approach when waste of the webpage's space is not acceptable.
Inputs are the topojson file, a target feature (shape), and the svg canevas width=300px
. Height, if missing (as in this demo), is recalculated elegantly. There is always a 5% margin on each side of the shape.
This choropleth encodes unemployment rates from 2008 with a quantize scale ranging from 0 to 15%. A threshold scale is a useful alternative for coloring arbitrary ranges.
!function(){function t(t,a){return{type:"Feature",id:t.id,properties:t.properties,geometry:n(t.geometry,a)}}function n(t,a){if(!t)return null;if("GeometryCollection"===t.type)return{type:"GeometryCollection",geometries:object.geometries.map(function(t){return n(t,a)})};if(!la.hasOwnProperty(t.type))return null;var r=la[t.type];return d3.geo.stream(t,a(r)),r.result()}function a(){}function r(t){if((n=t.length)<4)return!1;for(var n,a=0,r=t[n-1][1]*t[0][0]-t[n-1][0]*t[0][1];++a<n;)r+=t[a-1][1]*t[a][0]-t[a-1][0]*t[a][1];return 0>=r}function e(t,n){for(var a=n[0],r=n[1],e=!1,o=0,i=t.length,h=i-1;i>o;h=o++){var u=t[o],M=u[0],s=u[1],c=t[h],f=c[0],v=c[1];s>r^v>r&&(f-M)*(r-s)/(v-s)+M>a&&(e=!e)}return e}function o(t){return t?t/Math.sin(t):1}function i(t){return t>0?1:0>t?-1:0}function h(t){return t>1?pa:-1>t?-pa:Math.asin(t)}function u(t){return t>1?0:-1>t?ba:Math.acos(t)}function M(t){return t>0?Math.sqrt(t):0}function s(t){function n(t,n){var a=Math.cos(t),e=Math.cos(n),o=Math.sin(n),i=e*a,h=-((1-i?Math.log(.5*(1+i) |
$.child_window.open(); |
license: gpl-3.0 |