Skip to content

Instantly share code, notes, and snippets.

@allardw
Last active October 12, 2017 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save allardw/21b2885a1de45e0694e1 to your computer and use it in GitHub Desktop.
Save allardw/21b2885a1de45e0694e1 to your computer and use it in GitHub Desktop.
Commutes 2012 - Oldskool style
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path.gems {
fill: white;
stroke: black;
stroke-width: 0.24;
}
</style>
<div id="viz"></div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="textures.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("#viz").append("svg")
.attr("width",width)
.attr("height",height)
.attr("id", "root")
.append("g")
.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
.append("g");
var text = d3.select("#root").append("text")
.text("Click on a municipality...")
.attr("id","legend")
.attr("transform","translate(10,15)");
var path,
banenByID;
var tl = textures.lines()
.size(1.5)
.strokeWidth(0.8)
.background("white");
svg.call(tl);
var tc = textures.circles()
.size(2)
.radius(0.25)
.background("white");
svg.call(tc);
var colours = ["#fef0d9","#fdd49e","#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#990000", "#990000"];
var heatmapColour = d3.scale.linear()
.domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
.range(colours);
var c = d3.scale.linear().domain([0,10]).range([0,1]);
queue()
.defer(d3.json,"https://dl.dropboxusercontent.com/s/k066kxpah3aw8oy/nlGem2012wgs.json?dl=1")
.defer(d3.tsv,"https://dl.dropboxusercontent.com/s/w3ojz1g4458s8yr/nlGemForens2012.tsv?dl=1")
.await(ready);
function ready(error, mapdata,_banen) {
var gemIdByName = {};
mapdata.features.forEach(function(d) {
gemIdByName[d.properties.name] = d.properties.code;
});
banenByID = {};
_banen.forEach(function(d) {
banenByID[d.gemcode] = d;
});
var center = d3.geo.centroid(mapdata);
var scale = 100;
var offset = [width/2, height/2];
var projection = d3.geo.mercator()
.scale(scale)
.center(center)
.translate(offset);
path = d3.geo.path()
.projection(projection);
var bounds = path.bounds(mapdata);
var hscale = scale*width / (bounds[1][0] - bounds[0][0]);
var vscale = scale*height / (bounds[1][1] - bounds[0][1]);
var scale = (hscale < vscale) ? hscale : vscale;
var offset = [width - (bounds[0][0] + bounds[1][0])/2,
height -20 -(bounds[0][1] + bounds[1][1])/2];
projection = d3.geo.mercator()
.center(center)
.scale(scale)
.translate(offset);
path = path.projection(projection);
var cont = svg.append("g");
var conts = cont.selectAll(".cont")
.data(mapdata.features)
.enter().append("path")
.attr("d", path)
.attr("class","cont")
.style("stroke","black")
.style("stroke-width",2)
.style("fill","white");
var map = svg.append("g");
var gems = map.selectAll(".gems")
.data(mapdata.features)
.enter().append("path")
.attr("d", path)
.attr("class", function(d) {return "gems G"+pad(d.properties.GEMNR,4)})
.on("click",function(d){doIt(d)});
var arrows = svg.selectAll("arrows")
.data(mapdata.features).enter()
.append("g")
.attr("transform", function (d) {
cx = path.centroid(d)[0];
cy = path.centroid(d)[1];
return "translate("+cx+","+cy+")"; });
var arrow = arrows.append("g")
.attr("class","a")
.style("display", "none");
arrow.append("path")
.attr("class",function (d) {return "arrow p" + d.properties.GEMNR})
.attr("d", "M6 0 L1 0.5 L-6 0.5 L-6 -0.5 L1 -0.5 Z")
.style("fill", "black");
};
function doIt(d) {
center = path.centroid(d);
code = "G"+pad(d.properties.GEMNR,4);
banen = banenByID[code];
d3.selectAll(".gems")
.style("fill", function(d) {
co = "G"+pad(d.properties.GEMNR,4);
b = path.bounds(d);
v=banen[co];
if (co == code) { color = tl.url()}
else {color = (v=="" || v==0) ? "white":tc.url()};
return color});
d3.selectAll(".a")
.style("display", function(d) {
co = "G"+pad(d.properties.GEMNR,4);
v=banen[co];
disp = (v=="" || v==0 || co == code) ? "none":"inline";
return disp})
.call(compassAngle, center, 2000)
.call(compassWidth,500);
d3.select("#legend")
.text(function() {return "Commutes to "+d.properties.GEMNM})
}
function compassAngle(p, center, duration) {
p.transition("compassAngle")
.duration(duration)
.ease("elastic-in")
.attr("transform", function(d) {return "rotate("+angleDeg(path.centroid(d),center)+")"});
}
function compassWidth(p, duration) {
p.selectAll(".arrow").transition("compassWidth")
.duration(duration)
//.style("stroke-width", function(d) {return banen["G"+pad(d.properties.GEMNR,4)]})
.attr("transform", function(d) {
v = banen["G"+pad(d.properties.GEMNR,4)];
return "scale(1 " + v +")"});
}
function angleDeg(p1,p2) {
return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180 / Math.PI;
}
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
</script>
(function(){var rand,umd,slice=[].slice;rand=function(){return(Math.random().toString(36)+"00000000000000000").replace(/[^a-z]+/g,"").slice(0,5)};umd=function(factory){if(typeof exports==="object"){return module.exports=factory()}else if(typeof define==="function"&&define.amd){return define([],factory)}else{return this.textures=factory()}};umd(function(){return{circles:function(){var background,circles,complement,fill,id,radius,size,stroke,strokeWidth;size=20;background="";radius=2;complement=false;fill="#343434";stroke="#343434";strokeWidth=0;id=rand();circles=function(){var corner,g,i,len,ref,results;g=this.append("defs").append("pattern").attr({id:id,patternUnits:"userSpaceOnUse",width:size,height:size});if(background){g.append("rect").attr({width:size,height:size,fill:background})}g.append("circle").attr({cx:size/2,cy:size/2,r:radius,fill:fill,stroke:stroke,"stroke-width":strokeWidth});if(complement){ref=[[0,0],[0,size],[size,0],[size,size]];results=[];for(i=0,len=ref.length;i<len;i++){corner=ref[i];results.push(g.append("circle").attr({cx:corner[0],cy:corner[1],r:radius,fill:fill,stroke:stroke,"stroke-width":strokeWidth}))}return results}};circles.heavier=function(_){if(!arguments.length){radius=radius*2}else{radius=_?radius*2*_:radius*2}return circles};circles.lighter=function(_){if(!arguments.length){radius=radius/2}else{radius=_?radius/(2*_):radius/2}return circles};circles.thinner=function(_){if(!arguments.length){size=size*2}else{size=_?size*2*_:size*2}return circles};circles.thicker=function(_){if(!arguments.length){size=size/2}else{size=_?size/(2*_):size/2}return circles};circles.background=function(_){background=_;return circles};circles.size=function(_){size=_;return circles};circles.complement=function(){complement=true;return circles};circles.radius=function(_){radius=_;return circles};circles.fill=function(_){fill=_;return circles};circles.stroke=function(_){stroke=_;return circles};circles.strokeWidth=function(_){strokeWidth=_;return circles};circles.id=function(_){if(!arguments.length){return id}else{id=_;return circles}};circles.url=function(){return"url(#"+id+")"};return circles},lines:function(){var background,id,lines,orientation,path,shapeRendering,size,stroke,strokeWidth;size=20;strokeWidth=2;stroke="#343434";id=rand();background="";orientation=["diagonal"];shapeRendering="auto";path=function(orientation){switch(orientation){case"0/8":return function(s){return"M "+s/2+", 0 l 0, "+s}(size);case"vertical":return function(s){return"M "+s/2+", 0 l 0, "+s}(size);case"1/8":return function(s){return"M "+s/4+",0 l "+s/2+","+s+" M "+-s/4+",0 l "+s/2+","+s+"\nM "+s*3/4+",0 l "+s/2+","+s}(size);case"2/8":return function(s){return"M 0,"+s+" l "+s+","+-s+" M "+-s/4+","+s/4+" l "+s/2+","+-s/2+"\nM "+3/4*s+","+5/4*s+" l "+s/2+","+-s/2}(size);case"diagonal":return function(s){return"M 0,"+s+" l "+s+","+-s+" M "+-s/4+","+s/4+" l "+s/2+","+-s/2+"\nM "+3/4*s+","+5/4*s+" l "+s/2+","+-s/2}(size);case"3/8":return function(s){return"M 0,"+3/4*s+" l "+s+","+-s/2+" M 0,"+s/4+" l "+s+","+-s/2+"\nM 0,"+s*5/4+" l "+s+","+-s/2}(size);case"4/8":return function(s){return"M 0,"+s/2+" l "+s+",0"}(size);case"horizontal":return function(s){return"M 0,"+s/2+" l "+s+",0"}(size);case"5/8":return function(s){return"M 0,"+-s/4+" l "+s+","+s/2+"M 0,"+s/4+" l "+s+","+s/2+"\nM 0,"+s*3/4+" l "+s+","+s/2}(size);case"6/8":return function(s){return"M 0,0 l "+s+","+s+" M "+-s/4+","+3/4*s+" l "+s/2+","+s/2+"\nM "+s*3/4+","+-s/4+" l "+s/2+","+s/2}(size);case"7/8":return function(s){return"M "+-s/4+",0 l "+s/2+","+s+" M "+s/4+",0 l "+s/2+","+s+"\nM "+s*3/4+",0 l "+s/2+","+s}(size);default:return function(s){return"M "+s/2+", 0 l 0, "+s}(size)}};lines=function(){var g,i,len,o,results;g=this.append("defs").append("pattern").attr({id:id,patternUnits:"userSpaceOnUse",width:size,height:size});if(background){g.append("rect").attr({width:size,height:size,fill:background})}results=[];for(i=0,len=orientation.length;i<len;i++){o=orientation[i];results.push(g.append("path").attr({d:path(o),"stroke-width":strokeWidth,"shape-rendering":shapeRendering,stroke:stroke,"stroke-linecap":"square"}))}return results};lines.background=function(_){background=_;return lines};lines.shapeRendering=function(_){shapeRendering=_;return lines};lines.heavier=function(_){if(!arguments.length){strokeWidth=strokeWidth*2}else{strokeWidth=_?strokeWidth*2*_:strokeWidth*2}return lines};lines.lighter=function(_){if(!arguments.length){strokeWidth=strokeWidth/2}else{strokeWidth=_?strokeWidth/(2*_):strokeWidth/2}return lines};lines.thinner=function(_){if(!arguments.length){size=size*2}else{size=_?size*2*_:size*2}return lines};lines.thicker=function(_){if(!arguments.length){size=size/2}else{size=_?size/(2*_):size/2}return lines};lines.orientation=function(){var args;args=1<=arguments.length?slice.call(arguments,0):[];orientation=args;return lines};lines.size=function(_){size=_;return lines};lines.stroke=function(_){stroke=_;return lines};lines.strokeWidth=function(_){strokeWidth=_;return lines};lines.id=function(_){if(!arguments.length){return id}else{id=_;return lines}};lines.url=function(){return"url(#"+id+")"};return lines},paths:function(){var background,d,fill,height,id,paths,shapeRendering,size,stroke,strokeWidth,svgPath,width;size=20;height=1;width=1;strokeWidth=2;stroke="#343434";background="";d="";shapeRendering="auto";fill="transparent";id=void 0;svgPath=function(_){switch(_){case"squares":return function(s){return"M "+s/4+" "+s/4+" l "+s/2+" 0 l 0 "+s/2+" l "+-s/2+" 0 Z"}(size);case"nylon":return function(s){return"M 0 "+s/4+" l "+s/4+" 0 l 0 "+-s/4+" M "+s*3/4+" "+s+" l 0 "+-s/4+"\nl "+s/4+" 0 M "+s/4+" "+s/2+" l 0 "+s/4+" l "+s/4+" 0 M "+s/2+" "+s/4+"\nl "+s/4+" 0 l 0 "+s/4}(size);case"waves":return function(s){return"M 0 "+s/2+" c "+s/8+" "+-s/4+" , "+s*3/8+" "+-s/4+" , "+s/2+" 0\nc "+s/8+" "+s/4+" , "+s*3/8+" "+s/4+" , "+s/2+" 0 M "+-s/2+" "+s/2+"\nc "+s/8+" "+s/4+" , "+s*3/8+" "+s/4+" , "+s/2+" 0 M "+s+" "+s/2+"\nc "+s/8+" "+-s/4+" , "+s*3/8+" "+-s/4+" , "+s/2+" 0"}(size);case"woven":return function(s){return"M "+s/4+","+s/4+"l"+s/2+","+s/2+"M"+s*3/4+","+s/4+"l"+s/2+","+-s/2+"\nM"+s/4+","+s*3/4+"l"+-s/2+","+s/2+"M"+s*3/4+","+s*5/4+"l"+s/2+","+-s/2+"\nM"+-s/4+","+s/4+"l"+s/2+","+-s/2}(size);case"crosses":return function(s){return"M "+s/4+","+s/4+"l"+s/2+","+s/2+"M"+s/4+","+s*3/4+"l"+s/2+","+-s/2}(size);case"caps":return function(s){return"M "+s/4+","+s*3/4+"l"+s/4+","+-s/2+"l"+s/4+","+s/2}(size);case"hexagons":return function(s){width=3;height=Math.sqrt(3);return"M "+s+",0 l "+s+",0 l "+s/2+","+s*Math.sqrt(3)/2+"\nl "+-s/2+","+s*Math.sqrt(3)/2+" l "+-s+",0\nl "+-s/2+","+-s*Math.sqrt(3)/2+" Z M 0,"+s*Math.sqrt(3)/2+"\nl "+s/2+",0 M "+3*s+","+s*Math.sqrt(3)/2+" l "+-s/2+",0"}(size);default:return _(size)}};paths=function(){var g,path;path=svgPath(d);id=rand();g=this.append("defs").append("pattern").attr({id:id,patternUnits:"userSpaceOnUse",width:size*width,height:size*height});if(background){g.append("rect").attr({width:size*width,height:size*height,fill:background})}return g.append("path").attr({d:path,fill:fill,"stroke-width":strokeWidth,"shape-rendering":shapeRendering,stroke:stroke,"stroke-linecap":"square"})};paths.background=function(_){background=_;return paths};paths.shapeRendering=function(_){shapeRendering=_;return paths};paths.heavier=function(_){if(!arguments.length){strokeWidth=strokeWidth*2}else{strokeWidth=_?strokeWidth*2*_:strokeWidth*2}return paths};paths.lighter=function(_){if(!arguments.length){strokeWidth=strokeWidth/2}else{strokeWidth=_?strokeWidth/(2*_):strokeWidth/2}return paths};paths.thinner=function(_){if(!arguments.length){size=size*2}else{size=_?size*2*_:size*2}return paths};paths.thicker=function(_){if(!arguments.length){size=size/2}else{size=_?size/(2*_):size/2}return paths};paths.d=function(_){d=_;return paths};paths.size=function(_){size=_;return paths};paths.stroke=function(_){stroke=_;return paths};paths.strokeWidth=function(_){strokeWidth=_;return paths};paths.id=function(_){if(!arguments.length){return id}else{id=_;return paths}};paths.url=function(){return"url(#"+id+")"};return paths}}})}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment