hugolpz

$.child_window.open();

hugolpz

hugolpz

!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)

hugolpz

D3 map client & server side

Minimal demo on how to create maps both :

1. client side via d3js, topojson, & queue.js
2. server side via exact same ressources + nodejs.

JS

• d3.v3.min.js
• topojson.v1.min.js

hugolpz

hugolpz

see alsohttps://developers.google.com/maps/documentation/javascript/styling?utm_source=welovemapsdevelopers

hugolpz

While looking to add hash to maps areas I came out with this "svg patterns & d3js" gist.

hugolpz

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.

hugolpz

Click States to test me !

Alternative of: Map zoom + responsive frame, with more details.

Exploration around automatic centering, zooming. This one has STATIC frame, the frame's dimensions are not answering to the central shape.

Here, both the width and height are provided, definitively setting the canevas' dimensions, which may be a relevant approach when waste of the webpage's space is not important.

It is also projection proof.

hugolpz

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.