Demonstrating ArcGeometries
This is a demonstration on how to handle ArcGeometries, exported from a TopoJSON dataset.
Demonstration steps:
| (function(r){function n(r){return r}function t(r,n){for(var t=0,e=n.length,u=Array(e);e>t;++t)u[t]=r[n[t]];return u}function e(r){function n(n,t,e,u){for(;u>e;){var f=e+u>>>1;r(n[f])<t?e=f+1:u=f}return e}function t(n,t,e,u){for(;u>e;){var f=e+u>>>1;t<r(n[f])?u=f:e=f+1}return e}return t.right=t,t.left=n,t}function u(r){function n(r,n,t){for(var u=t-n,f=(u>>>1)+1;--f>0;)e(r,f,u,n);return r}function t(r,n,t){for(var u,f=t-n;--f>0;)u=r[n],r[n]=r[n+f],r[n+f]=u,e(r,1,f,n);return r}function e(n,t,e,u){for(var f,o=n[--u+t],i=r(o);(f=t<<1)<=e&&(e>f&&r(n[u+f])>r(n[u+f+1])&&f++,!(i<=r(n[u+f])));)n[u+t]=n[u+f],t=f;n[u+t]=o}return n.sort=t,n}function f(r){function n(n,e,u,f){var o,i,a,c,l=Array(f=Math.min(u-e,f));for(i=0;f>i;++i)l[i]=n[e++];if(t(l,0,f),u>e){o=r(l[0]);do(a=r(c=n[e])>o)&&(l[0]=c,o=r(t(l,0,f)[0]));while(++e<u)}return l}var t=u(r);return n}function o(r){function n(n,t,e){for(var u=t+1;e>u;++u){for(var f=u,o=n[u],i=r(o);f>t&&r(n[f-1])>i;--f)n[f]=n[f-1];n[f]=o}return n}return n}function i(r){function n(r,n,u){return(U>u-n?e:t)(r,n,u)}function t(t,e,u){var f,o=0|(u-e)/6,i=e+o,a=u-1-o,c=e+u-1>>1,l=c-o,v=c+o,s=t[i],h=r(s),d=t[l],p=r(d),g=t[c],y=r(g),m=t[v],b=r(m),A=t[a],k=r(A);h>p&&(f=s,s=d,d=f,f=h,h=p,p=f),b>k&&(f=m,m=A,A=f,f=b,b=k,k=f),h>y&&(f=s,s=g,g=f,f=h,h=y,y=f),p>y&&(f=d,d=g,g=f,f=p,p=y,y=f),h>b&&(f=s,s=m,m=f,f=h,h=b,b=f),y>b&&(f=g,g=m,m=f,f=y,y=b,b=f),p>k&&(f=d,d=A,A=f,f=p,p=k,k=f),p>y&&(f=d,d=g,g=f,f=p,p=y,y=f),b>k&&(f=m,m=A,A=f,f=b,b=k,k=f);var x=d,w=p,E=m,O=b;t[i]=s,t[l]=t[e],t[c]=g,t[v]=t[u-1],t[a]=A;var M=e+1,U=u-2,z=O>=w&&w>=O;if(z)for(var N=M;U>=N;++N){var C=t[N],S=r(C);if(w>S)N!==M&&(t[N]=t[M],t[M]=C),++M;else if(S>w)for(;;){var q=r(t[U]);{if(!(q>w)){if(w>q){t[N]=t[M],t[M++]=t[U],t[U--]=C;break}t[N]=t[U],t[U--]=C;break}U--}}}else for(var N=M;U>=N;N++){var C=t[N],S=r(C);if(w>S)N!==M&&(t[N]=t[M],t[M]=C),++M;else if(S>O)for(;;){var q=r(t[U]);{if(!(q>O)){w>q?(t[N]=t[M],t[M++]=t[U],t[U--]=C):(t[N]=t[U],t[U--]=C);break}if(U--,N>U)break}}}if(t[e]=t[M-1],t[M-1]=x,t[u-1]=t[U+1],t[U+1]=E,n(t,e,M-1),n(t,U+2,u),z)return t;if(i>M&&U>a){for(var F,q;(F=r(t[M]))<=w&&F>=w;)++M;for(;(q=r(t[U]))<=O&&q>=O;)--U;for(var N=M;U>=N;N++){var C=t[N],S=r(C);if(w>=S&&S>=w)N!==M&&(t[N]=t[M],t[M]=C),M++;else if(O>=S&&S>=O)for(;;){var q=r(t[U]);{if(!(O>=q&&q>=O)){w>q?(t[N]=t[M],t[M++]=t[U],t[U--]=C):(t[N]=t[U],t[U--]=C);break}if(U--,N>U)break}}}}return n(t,M,U+1)}var e=o(r);return n}function a(r){return Array(r)}function c(r,n){return function(t){var e=t.length;return[r.left(t,n,0,e),r.right(t,n,0,e)]}}function l(r,n){var t=n[0],e=n[1];return function(n){var u=n.length;return[r.left(n,t,0,u),r.left(n,e,0,u)]}}function v(r){return[0,r.length]}function s(){return null}function h(){return 0}function d(r){return r+1}function p(r){return r-1}function g(r){return function(n,t){return n+ +r(t)}}function y(r){return function(n,t){return n-r(t)}}function m(){function r(r){var n=E,t=r.length;return t&&(w=w.concat(r),U=S(U,E+=t),C.forEach(function(e){e(r,n,t)})),m}function e(r){function e(n,e,u){P=n.map(r),Q=Y(A(u),0,u),P=t(P,Q);var f,o,i=Z(P),a=i[0],c=i[1];if(T)for(f=0;u>f;++f)T(P[f],o=Q[f]+e)||(U[o]|=W);else{for(f=0;a>f;++f)U[Q[f]+e]|=W;for(f=c;u>f;++f)U[Q[f]+e]|=W}if(!e)return K=P,L=Q,rn=a,nn=c,void 0;var l=K,v=L,s=0,h=0;for(K=Array(E),L=b(E,E),f=0;e>s&&u>h;++f)l[s]<P[h]?(K[f]=l[s],L[f]=v[s++]):(K[f]=P[h],L[f]=Q[h++]+e);for(;e>s;++s,++f)K[f]=l[s],L[f]=v[s];for(;u>h;++h,++f)K[f]=P[h],L[f]=Q[h]+e;i=Z(K),rn=i[0],nn=i[1]}function o(r,n,t){$.forEach(function(r){r(P,Q,n,t)}),P=Q=null}function a(r){var n=r[0],t=r[1];if(T)return T=null,B(function(r,e){return e>=n&&t>e}),rn=n,nn=t,V;var e,u,f,o=[],i=[];if(rn>n)for(e=n,u=Math.min(rn,t);u>e;++e)U[f=L[e]]^=W,o.push(f);else if(n>rn)for(e=rn,u=Math.min(n,nn);u>e;++e)U[f=L[e]]^=W,i.push(f);if(t>nn)for(e=Math.max(n,nn),u=t;u>e;++e)U[f=L[e]]^=W,o.push(f);else if(nn>t)for(e=Math.max(rn,t),u=nn;u>e;++e)U[f=L[e]]^=W,i.push(f);return rn=n,nn=t,N.forEach(function(r){r(W,o,i)}),V}function m(r){return null==r?R():Array.isArray(r)?F(r):"function"==typeof r?j(r):z(r)}function z(r){return a((Z=c(x,r))(K))}function F(r){return a((Z=l(x,r))(K))}function R(){return a((Z=v)(K))}function j(r){return Z=v,B(T=r),rn=0,nn=E,V}function B(r){var n,t,e,u=[],f=[];for(n=0;E>n;++n)!(U[t=L[n]]&W)^(e=r(K[n],t))&&(e?(U[t]&=X,u.push(t)):(U[t]|=W,f.push(t)));N.forEach(function(r){r(W,u,f)})}function D(r){for(var n,t=[],e=nn;--e>=rn&&r>0;)U[n=L[e]]||(t.push(w[n]),--r);return t}function G(r){for(var n,t=[],e=rn;nn>e&&r>0;)U[n=L[e]]||(t.push(w[n]),--r),e++;return t}function H(r){function t(n,t,u,f){function c(){++P===J&&(m=q(m,I<<=1),R=q(R,I),J=k(I))}var l,v,h,d,p,g,y=F,m=b(P,J),A=D,x=H,O=P,M=0,z=0;for(V&&(A=x=s),F=Array(P),P=0,R=O>1?S(R,E):b(E,J),O&&(h=(v=y[0]).key);f>z&&!((d=r(n[z]))>=d);)++z;for(;f>z;){for(v&&d>=h?(p=v,g=h,m[M]=P,(v=y[++M])&&(h=v.key)):(p={key:d,value:x()},g=d),F[P]=p;!(d>g||(R[l=t[z]+u]=P,U[l]&X||(p.value=A(p.value,w[l])),++z>=f));)d=r(n[z]);c()}for(;O>M;)F[m[M]=P]=y[M++],c();if(P>M)for(M=0;u>M;++M)R[M]=m[R[M]];l=N.indexOf(Q),P>1?(Q=e,T=i):(1===P?(Q=o,T=a):(Q=s,T=s),R=null),N[l]=Q}function e(r,n,t){if(r!==W&&!V){var e,u,f,o;for(e=0,f=n.length;f>e;++e)U[u=n[e]]&X||(o=F[R[u]],o.value=D(o.value,w[u]));for(e=0,f=t.length;f>e;++e)(U[u=t[e]]&X)===r&&(o=F[R[u]],o.value=G(o.value,w[u]))}}function o(r,n,t){if(r!==W&&!V){var e,u,f,o=F[0];for(e=0,f=n.length;f>e;++e)U[u=n[e]]&X||(o.value=D(o.value,w[u]));for(e=0,f=t.length;f>e;++e)(U[u=t[e]]&X)===r&&(o.value=G(o.value,w[u]))}}function i(){var r,n;for(r=0;P>r;++r)F[r].value=H();for(r=0;E>r;++r)U[r]&X||(n=F[R[r]],n.value=D(n.value,w[r]))}function a(){var r,n=F[0];for(n.value=H(),r=0;E>r;++r)U[r]&X||(n.value=D(n.value,w[r]))}function c(){return V&&(T(),V=!1),F}function l(r){var n=j(c(),0,F.length,r);return B.sort(n,0,n.length)}function v(r,n,t){return D=r,G=n,H=t,V=!0,C}function m(){return v(d,p,h)}function A(r){return v(g(r),y(r),h)}function x(r){function n(n){return r(n.value)}return j=f(n),B=u(n),C}function O(){return x(n)}function M(){return P}function z(){var r=N.indexOf(Q);return r>=0&&N.splice(r,1),r=$.indexOf(t),r>=0&&$.splice(r,1),C}var C={top:l,all:c,reduce:v,reduceCount:m,reduceSum:A,order:x,orderNatural:O,size:M,remove:z};_.push(C);var F,R,j,B,D,G,H,I=8,J=k(I),P=0,Q=s,T=s,V=!0;return arguments.length<1&&(r=n),N.push(Q),$.push(t),t(K,L,0,E),m().orderNatural()}function I(){var r=H(s),n=r.all;return delete r.all,delete r.top,delete r.order,delete r.orderNatural,delete r.size,r.value=function(){return n()[0].value},r}function J(){_.forEach(function(r){r.remove()});var r=C.indexOf(e);for(r>=0&&C.splice(r,1),r=C.indexOf(o),r>=0&&C.splice(r,1),r=0;E>r;++r)U[r]&=X;return O&=X,V}var K,L,P,Q,T,V={filter:m,filterExact:z,filterRange:F,filterFunction:j,filterAll:R,top:D,bottom:G,group:H,groupAll:I,remove:J},W=~O&-~O,X=~W,Y=i(function(r){return P[r]}),Z=v,$=[],_=[],rn=0,nn=0;return C.unshift(e),C.push(o),O|=W,(M>=32?!W:O&(1<<M)-1)&&(U=q(U,M<<=1)),e(w,0,E),o(w,0,E),V}function o(){function r(r,n){var t;if(!m)for(t=n;E>t;++t)U[t]||(a=c(a,w[t]))}function n(r,n,t){var e,u,f;if(!m){for(e=0,f=n.length;f>e;++e)U[u=n[e]]||(a=c(a,w[u]));for(e=0,f=t.length;f>e;++e)U[u=t[e]]===r&&(a=l(a,w[u]))}}function t(){var r;for(a=v(),r=0;E>r;++r)U[r]||(a=c(a,w[r]))}function e(r,n,t){return c=r,l=n,v=t,m=!0,s}function u(){return e(d,p,h)}function f(r){return e(g(r),y(r),h)}function o(){return m&&(t(),m=!1),a}function i(){var t=N.indexOf(n);return t>=0&&N.splice(t),t=C.indexOf(r),t>=0&&C.splice(t),s}var a,c,l,v,s={reduce:e,reduceCount:u,reduceSum:f,value:o,remove:i},m=!0;return N.push(n),C.push(r),r(w,0,E),u()}function a(){return E}var m={add:r,dimension:e,groupAll:o,size:a},w=[],E=0,O=0,M=8,U=z(0),N=[],C=[];return arguments.length?r(arguments[0]):m}function b(r,n){return(257>n?z:65537>n?N:C)(r)}function A(r){for(var n=b(r,r),t=-1;++t<r;)n[t]=t;return n}function k(r){return 8===r?256:16===r?65536:4294967296}m.version="1.2.0",m.permute=t;var x=m.bisect=e(n);x.by=e;var w=m.heap=u(n);w.by=u;var E=m.heapselect=f(n);E.by=f;var O=m.insertionsort=o(n);O.by=o;var M=m.quicksort=i(n);M.by=i;var U=32,z=a,N=a,C=a,S=n,q=n;"undefined"!=typeof Uint8Array&&(z=function(r){return new Uint8Array(r)},N=function(r){return new Uint16Array(r)},C=function(r){return new Uint32Array(r)},S=function(r,n){var t=new r.constructor(n);return t.set(r),t},q=function(r,n){var t;switch(n){case 16:t=N(r.length);break;case 32:t=C(r.length);break;default:throw Error("invalid array width!")}return t.set(r),t}),r.crossfilter=m})(this); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Demonstrating ArcGeometries</title> | |
| <meta charset="utf-8" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://mourner.github.io/simplify-js/simplify.js"></script> | |
| <script src="crossfilter.min.js"></script> | |
| <script src="http://bl.ocks.org/milkbread/raw/5779939/RKMapping_0.4.4.js"></script> <!--http://bl.ocks.org/milkbread/raw/5779939--> | |
| <script src="http://bl.ocks.org/milkbread/raw/5829814/RKAggregation_1.0.js"></script> <!--http://bl.ocks.org/milkbread/raw/5829814 this function needs RKMapping.js additionally--> | |
| <script src="http://bl.ocks.org/milkbread/raw/5917907/slider.js"></script> | |
| <style> | |
| @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css); | |
| @import url(http://bl.ocks.org/milkbread/raw/5743667/RKToolbox_0.1.css); | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| text-anchor:left; | |
| fill:#0f0; | |
| opacity:0.8; | |
| } | |
| #arcs{ | |
| overflow-x: auto; | |
| overflow-y: auto; | |
| padding-bottom: 15px; | |
| max-width: 100%; | |
| } | |
| #info { | |
| background-color:#c8ba09; | |
| } | |
| #overlay{ | |
| fill:None; | |
| stroke:#b30032; | |
| stroke-width:1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="arcs"style="width: 960px; height: 80px"></div> | |
| <div id="slider"style="width: 960px; height: 80px"></div> | |
| <div id="info"style="width: 960px;"></div> | |
| <script> | |
| //Sorted arcs | |
| var svg = d3.select("#arcs").append("svg") | |
| .attr("height",60); | |
| var svgGroup = svg.append('g'); | |
| var path = d3.geo.path().projection(normalize_projection); | |
| var arcBounds, sWidth = 50, selMaxVal = -1;; | |
| var scaleLat = d3.scale.linear(); | |
| var scaleLng = d3.scale.linear(); | |
| //Slider | |
| var slider = new slider(d3.select("#slider"),960,75); | |
| slider.reDefineIndicator(6); | |
| //1. Open data | |
| d3.json("vg250_states_topo.json", function(error, topology) { | |
| //define a click-action-listener of the slider | |
| slider.addClickListener(showSortedArcs); | |
| //set the featureStorage and the featureObjects | |
| var pure_features = topology.objects.vg250_bld; | |
| var featureStorage = new featureObjStorage(); | |
| pure_features.geometries.forEach(function(d){ featureStorage.addFeatObj(d); }) | |
| var featuresObjects = featureStorage.featureObjects; | |
| //2. get the ARCS from the featureObjects | |
| var arcCollection = getArcs(topology, featuresObjects); | |
| var arcCollectionArray_ = [], maxLength = 0; | |
| //we need an array of objects not an object, so loop all arcs ... simplify them AND push them to an array | |
| for (arc in arcCollection){ | |
| var cache = arcCollection[arc]; | |
| //simplify LineStrings of the arcs | |
| cache.coordinates = pointsConversion(simplify(pointsConversion(cache.coordinates, 'toObject'),0.01,false), 'toArray') | |
| arcCollectionArray_.push(cache) | |
| //directly get the maximum value (needed for the slider) | |
| if(maxLength<cache.length)maxLength=cache.length; | |
| } | |
| //now we can define the scalebar of the 'slider', because we know the maximum length | |
| slider.addScalebar([0,maxLength+100000]); | |
| //3. set up a new 'Crossfilter' and get the length-dimension | |
| var arcCollectionCF = crossfilter(arcCollectionArray_); | |
| var lengthDimension = arcCollectionCF.dimension(function(d){return d.length;}) | |
| //show the user some infos | |
| var countInfo = d3.select('#info').append('text').text('Number of Arcs: ') | |
| //4. show the sorted arcs initially | |
| showSortedArcs(); | |
| function showSortedArcs(){ | |
| //1st time: set to O, else set to slider-value | |
| if(selMaxVal!=-1)selMaxVal = slider.getIndicPosition(); | |
| else selMaxVal = 0; | |
| //Filtering | |
| lengthDimension.filterAll(); //reset filter | |
| var origCount = arcCollectionCF.groupAll().reduceCount().value(); //count elements initially | |
| lengthDimension.filter(function(d){return (d < selMaxVal)}) //filter the dataset in relation to the slider-value | |
| var counter = arcCollectionCF.groupAll().reduceCount().value(); //count elements after filtering | |
| countInfo.text('Number of Arcs: ' + counter +" (Max: "+ origCount +" | Sorting: DESC)") //give infos to user | |
| //get all filtered elements of the dataset | |
| var arcCollectionArray = lengthDimension.top(counter); | |
| //re-define the size of the svg-container ... depending on number of data-elements | |
| svg.attr("width", sWidth*counter) | |
| //1. JOIN ... bind data to the corresponding svg-elements | |
| var arcVis = svgGroup.selectAll('path').data(lengthDimension.top(counter), function(d) { return d.coordinates; }); | |
| //2. UPDATE | |
| arcVis.transition().duration(2000) | |
| .attr('stroke','#000') | |
| .attr("transform",function(d,i){return "translate("+(i+1)*sWidth+",0) scale(-1,1)"}); | |
| //3. ENTER | |
| arcVis.enter().append("path") | |
| .attr("d",setPath) //see function... | |
| .attr('fill','None') | |
| .attr('stroke','#f00') | |
| .attr('stroke-width',2) | |
| .attr("transform",function(d,i){return "translate(0,0) scale(-1,1)"}) | |
| .transition().duration(2000) | |
| .attr("transform",function(d,i){return "translate("+(i+1)*sWidth+",0) scale(-1,1)"}); | |
| //5. EXIT | |
| arcVis.exit() | |
| .transition().duration(2000) | |
| .attr("transform",function(d,i){return "translate(0,0) scale(-1,1)"}) | |
| .remove(); | |
| function setPath(d,i){ | |
| var geometry = d; | |
| arcBounds=d3.geo.bounds(d); //save arcBounds globally | |
| var new_path = path({type: 'LineString', coordinates: geometry.coordinates}) | |
| return new_path; | |
| } | |
| } | |
| }) | |
| function normalize_projection(x) { | |
| scaleLat.domain([arcBounds[0][0],arcBounds[1][0]]) | |
| .range([sWidth,0]); | |
| scaleLng.domain([arcBounds[0][1],arcBounds[1][1]]) | |
| .range([sWidth,0]); | |
| return [scaleLat(x[0]), scaleLng(x[1])] | |
| } | |
| function pointsConversion(points, direction){ | |
| var cache; | |
| if(direction=='toObject'){ | |
| cache = points.map(function(point){return {'y':point[0],'x':point[1]}}); | |
| } | |
| else if(direction=='toArray'){ | |
| cache = points.map(function(point){return [point.y,point.x]}); | |
| } | |
| return cache; | |
| } | |
| </script> | |
| </body> | |
| </html> |