Click and drag to paint! Click on the colors or use the number keys to change colors. Copy-and-paste the address bar to share this map with others. Forked from Mike Bostock's US version.
-
-
Save aerrity/9924185 to your computer and use it in GitHub Desktop.
Paint by Numbers - Republic of Ireland
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .background { | |
| fill: none; | |
| stroke: #ddd; | |
| } | |
| .foreground { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 600; | |
| var proj = d3.geo.conicConformal() | |
| .center([-7.9,54.2]) | |
| .scale(7500) | |
| .translate([490,210]); | |
| var path = d3.geo.path().projection(proj); | |
| var color = d3.scale.category10().domain(d3.range(9)), | |
| selectedColor = 0, | |
| dragColor; | |
| var components = color.domain().map(function() { return []; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var legend = svg.append("g") | |
| .attr("class", "legend") | |
| .attr("transform", "translate(" + ((width - color.domain().length * 24) / 2) + ",10)") | |
| .style("cursor", "pointer") | |
| .selectAll("rect") | |
| .data(color.domain()) | |
| .enter().append("rect") | |
| .attr("x", function(d) { return d * 24; }) | |
| .attr("width", 24 - 3) | |
| .attr("height", 24 - 3) | |
| .style("stroke", function(d) { return d ? null : "#000"; }) | |
| .style("fill", color) | |
| .on("click", clicklegend); | |
| d3.select(self) | |
| .on("keydown", keydown) | |
| .node().focus(); | |
| d3.json("/aerrity/raw/9924185/ireland.json", function(error, ire) { | |
| if (error) return console.error(error); | |
| var bisectId = d3.bisector(function(d) { return d.id; }).left; | |
| var features = topojson.feature(ire, ire.objects.counties).features; | |
| svg.append("path") | |
| .datum(topojson.mesh(ire, ire.objects.counties)) | |
| .attr("class", "background") | |
| .attr("d", path); | |
| var merge = svg.append("g") | |
| .attr("class", "merge") | |
| .selectAll("path") | |
| .data(components) | |
| .enter().append("path") | |
| .style("fill", function(d, i) { return color(i); }) | |
| .style("stroke", function(d, i) { return d3.lab(color(i)).darker(); }); | |
| svg.append("g") | |
| .attr("class", "foreground") | |
| .style("cursor", "pointer") | |
| .style("stroke-opacity", .5) | |
| .selectAll("path") | |
| .data(features) | |
| .enter().append("path") | |
| .attr("d", function(d) { d.color = null; return path(d); }) | |
| .on("mouseover", function() { this.style.stroke = "black"; }) | |
| .on("mouseout", function() { this.style.stroke = "none"; }) | |
| .call(d3.behavior.drag() | |
| .on("dragstart", dragstart) | |
| .on("drag", drag)); | |
| top.location.hash.split("").slice(1, features.length+1).forEach(function(c, i) { | |
| console.log(top.location.hash.split("").slice(1, features.length+1)); | |
| if ((c = +c) >= 0 && c < 10) assign(features[i], c ? c - 1 : null); | |
| }); | |
| redraw(); | |
| function dragstart() { | |
| var feature = d3.event.sourceEvent.target.__data__; | |
| if (assign(feature, dragColor = feature.color === selectedColor ? null : selectedColor)) redraw(); | |
| } | |
| function drag() { | |
| var feature = d3.event.sourceEvent.target.__data__; | |
| if (feature && assign(feature, dragColor)) redraw(); | |
| } | |
| function assign(feature, color) { | |
| if (feature.color === color) return false; | |
| if (feature.color !== null) { | |
| var component = components[feature.color]; | |
| component.splice(bisectId(component, feature.id), 1); | |
| feature.color = null; | |
| } | |
| if (color !== null) { | |
| var component = components[color]; | |
| component.splice(bisectId(component, feature.id), 0, feature); | |
| feature.color = color; | |
| } | |
| return true; | |
| } | |
| function redraw() { | |
| merge.data(components).attr("d", function(d) { return path({type: "FeatureCollection", features: d}) || "M0,0"; }); | |
| top.history.replaceState(null, null, "#" + features.map(function(d) { return d.color === null ? "0" : d.color + 1; }).join("")); | |
| } | |
| }); | |
| function clicklegend(d) { | |
| legend[0][selectedColor].style.stroke = null; | |
| legend[0][selectedColor = d].style.stroke = "#000"; | |
| } | |
| function keydown() { | |
| if (d3.event.keyCode >= 48 && d3.event.keyCode < 58) { | |
| var i = d3.event.keyCode - 49; | |
| if (i < 0) i = 10; | |
| clicklegend(i); | |
| } | |
| } | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"type":"Topology","transform":{"scale":[0.0004479290929092911,0.00039117111711171084],"translate":[-10.475803,51.446564]},"objects":{"counties":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3,4]],"id":"Carlow"},{"type":"Polygon","arcs":[[5,6,7,8,9,10,11]],"id":"Cavan"},{"type":"Polygon","arcs":[[12,13,14,15]],"id":"Clare"},{"type":"Polygon","arcs":[[16,17,18,19,20]],"id":"Cork"},{"type":"MultiPolygon","arcs":[[[21]],[[22,23]]],"id":"Donegal"},{"type":"Polygon","arcs":[[24,25,26,27]],"id":"Dublin"},{"type":"MultiPolygon","arcs":[[[28]],[[29]],[[30,-16,31,32,33,34]]],"id":"Galway"},{"type":"MultiPolygon","arcs":[[[35]],[[-17,36,37]]],"id":"Kerry"},{"type":"Polygon","arcs":[[38,-3,39,40,41,42,-25]],"id":"Kildare"},{"type":"Polygon","arcs":[[43,44,45,46,-1]],"id":"Kilkenny"},{"type":"Polygon","arcs":[[-2,-47,47,48,-40]],"id":"Laois"},{"type":"Polygon","arcs":[[49,50,51,52,-23,53,-10]],"id":"Leitrim"},{"type":"Polygon","arcs":[[-38,54,-14,55,-18]],"id":"Limerick"},{"type":"Polygon","arcs":[[56,57,-50,-9]],"id":"Longford"},{"type":"Polygon","arcs":[[-6,58,59,60]],"id":"Louth"},{"type":"Polygon","arcs":[[61,-33,62,63]],"id":"Mayo"},{"type":"Polygon","arcs":[[-43,64,-7,-61,65,-26]],"id":"Meath"},{"type":"Polygon","arcs":[[-12,66,-59]],"id":"Monaghan"},{"type":"Polygon","arcs":[[-49,67,-35,68,69,-41]],"id":"Offaly"},{"type":"Polygon","arcs":[[-58,70,-69,-34,-62,71,-51]],"id":"Roscommon"},{"type":"Polygon","arcs":[[-72,-64,72,-52]],"id":"Sligo"},{"type":"Polygon","arcs":[[-48,-46,73,-19,-56,-13,-31,-68]],"id":"Tipperary"},{"type":"Polygon","arcs":[[-45,74,75,-20,-74]],"id":"Waterford"},{"type":"Polygon","arcs":[[-65,-42,-70,-71,-57,-8]],"id":"Westmeath"},{"type":"Polygon","arcs":[[-44,-5,76,77,-75]],"id":"Wexford"},{"type":"Polygon","arcs":[[-77,-4,-39,-28,78]],"id":"Wicklow"}]}},"arcs":[[[7946,2555],[4,369],[-136,162],[50,132],[-307,68],[40,168],[15,64]],[[7612,3518],[335,86]],[[7947,3604],[403,70],[51,103]],[[8401,3777],[557,-77],[-110,-172],[-265,12],[86,-316]],[[8669,3224],[-50,-137],[-230,-54],[-206,-388],[-237,-90]],[[8310,6276],[0,-4]],[[8310,6272],[-58,-67],[-365,3],[-29,-277],[-713,44]],[[7145,5975],[-16,29],[-251,-35]],[[6878,5969],[-172,139],[-237,94],[-64,165]],[[6405,6367],[5,173],[-348,256],[-208,-18],[-404,360],[182,173]],[[5632,7311],[167,-45],[128,-230],[276,9],[319,-191],[311,59],[230,-94]],[[7063,6819],[276,-88],[340,17],[631,-472]],[[4854,3981],[-31,-206],[-224,-70],[-159,-457]],[[4440,3248],[-123,-87],[-434,-18]],[[3883,3143],[-282,55],[-232,-36],[55,132],[-226,37],[-77,-199],[-190,-137],[-569,-42],[-289,96],[-343,-70],[10,-76],[-543,-62],[644,306],[85,167],[261,19],[111,324],[220,135],[-287,29],[187,170],[246,351],[290,-66],[56,98],[252,-36]],[[3262,4338],[43,-126],[215,-83],[163,-226],[481,168],[362,-147],[328,57]],[[1266,774],[116,-78],[287,188],[297,11],[589,239],[58,205],[338,95],[-169,443],[-145,143],[134,183]],[[2771,2203],[228,77],[380,-45],[266,146],[452,-46],[270,-193],[397,95],[405,-49]],[[5169,2188],[160,-223]],[[5329,1965],[-109,-144],[469,-432],[173,-29]],[[5862,1360],[-121,-173],[85,-79],[-294,-50],[-8,-91],[-377,-104],[-211,79],[139,150],[-262,-81],[104,-113],[-147,-209],[-500,-197],[-214,-13],[-106,-162],[-360,14],[-536,-99],[-268,-147],[-687,125],[-244,-22],[-288,-188],[-144,93],[412,153],[255,177],[-695,-177],[908,382],[-18,100],[-419,-143],[-596,-60],[-64,-97],[-516,-86],[247,132],[-93,100],[275,36],[-68,87],[215,77]],[[4317,9144],[124,-128],[-186,5],[62,123]],[[5166,7697],[-269,57]],[[4897,7754],[132,236],[254,103],[-15,96],[-409,-125],[25,116],[-391,-106],[-277,2],[-461,136],[-31,99],[345,199],[489,-52],[-301,180],[412,146],[-170,92],[-6,214],[255,93],[139,309],[283,-34],[298,69],[100,139],[241,-66],[539,195],[33,-223],[223,-175],[-259,-166],[166,-60],[-272,-211],[465,242],[-121,33],[144,200],[-209,152],[62,228],[222,-17],[180,201],[343,-25],[91,-137],[520,-147],[-531,-226],[-257,-235],[-177,-21],[-201,-292],[-33,-196],[-211,-169],[34,-120],[-249,12],[-228,-112],[-187,84],[-202,-92],[156,-173],[323,-11],[-265,-219],[-389,3],[-110,-144],[-243,-82]],[[8955,4556],[-158,67],[88,330]],[[8885,4953],[94,-19],[265,194],[32,109],[-195,174],[261,42],[173,142]],[[9515,5595],[257,-128],[50,-169],[-103,-333],[-239,-73],[288,-198],[-11,-162]],[[9757,4532],[-542,-48],[-260,72]],[[1551,4359],[283,-51],[0,-111],[-393,127],[110,35]],[[1886,4791],[-39,-239],[-214,20],[253,219]],[[5374,4420],[-520,-439]],[[3262,4338],[249,199],[-333,-3],[258,131],[-1316,-129],[-215,269],[160,41],[-220,114],[-280,-244],[-298,95],[-366,235],[-281,-40],[234,159],[-84,275],[260,-17],[-94,111],[863,9]],[[1799,5543],[132,45],[449,-234],[321,8],[139,-145],[193,-2],[298,346],[376,105]],[[3707,5666],[337,20],[118,99],[385,-56],[392,-439],[47,-396],[200,-84],[51,-168],[245,-3]],[[5482,4639],[142,-115],[-250,-104]],[[282,1251],[140,-37],[-322,-106],[182,143]],[[1266,774],[102,-3],[261,258],[-848,-288],[-228,116],[43,159],[-301,-157],[17,160],[-162,85],[348,65],[-155,124],[143,100],[761,192],[62,114],[304,116],[-518,-35],[-464,-93],[-211,86],[-368,-112],[-52,205],[255,150],[409,144],[-8,-154],[347,102],[157,-99],[490,62],[-314,44],[97,285],[-245,96],[258,29],[313,124],[150,252],[572,25],[80,-48]],[[2561,2878],[56,-146],[-81,-364],[235,-165]],[[8955,4556],[-287,-348],[-341,-192],[74,-239]],[[7947,3604],[-94,284],[-167,11],[5,277],[-149,216]],[[7542,4392],[223,389],[-310,237]],[[7455,5018],[233,267]],[[7688,5285],[427,-316],[283,92],[487,-108]],[[7946,2555],[-131,-395]],[[7815,2160],[-484,-102],[-328,232]],[[7003,2290],[-137,289],[30,120],[-151,352],[-435,385]],[[6310,3436],[201,112],[322,-108],[290,187],[232,71],[257,-180]],[[6310,3436],[-84,155],[67,225],[-79,110]],[[6214,3926],[306,301],[-140,114],[170,93],[417,55],[199,-160],[376,63]],[[6405,6367],[-126,-1],[-356,-300],[-171,-10]],[[5752,6056],[-226,284],[-225,69],[134,315],[-207,62],[-83,4]],[[5145,6790],[-363,211],[51,224],[-150,193],[9,306]],[[4692,7724],[205,30]],[[5166,7697],[466,-386]],[[2561,2878],[761,120],[66,105],[714,0],[-219,40]],[[4440,3248],[287,-89],[226,39],[170,-80],[-38,-371],[-449,-135],[22,-76],[354,-88],[157,-260]],[[6878,5969],[9,-117],[-448,-226],[-150,-297],[-419,19],[-238,-67]],[[5632,5281],[-163,242],[105,224],[204,198],[-26,111]],[[8310,6276],[164,20],[213,364]],[[8687,6660],[255,69],[213,-32],[212,111],[400,-282],[-143,-58],[-419,89],[-56,-143],[98,-201],[212,-39],[0,-213]],[[9459,5961],[-224,-143],[-318,0],[-179,125],[-122,230],[-158,36],[-148,63]],[[4209,6446],[-206,-24],[166,-187],[-183,-29],[-14,-388],[-265,-152]],[[1799,5543],[-233,-37],[-316,142],[7,246],[583,123],[217,229],[-470,26],[-315,-100],[-358,283],[-431,4],[156,108],[198,-38],[282,77],[18,-204],[286,24],[-347,364],[210,39],[-252,277],[5,-115],[-266,-218],[164,312],[-120,52],[254,181],[258,-132],[166,222],[945,-128],[91,84],[290,-106],[-27,-176],[144,-39],[48,-182]],[[2986,6861],[390,38],[-143,-295],[254,-32],[175,-115],[388,136],[159,-147]],[[7688,5285],[154,321],[-643,183],[-54,186]],[[9459,5961],[56,-366]],[[7063,6819],[165,228],[214,61],[-134,180],[395,303],[333,-181],[180,-342],[355,-99],[-76,-261],[192,-48]],[[6214,3926],[-291,-67],[-223,-240],[-203,121],[126,110],[116,357],[-365,213]],[[5482,4639],[-4,107],[237,128]],[[5715,4874],[330,-62],[404,140],[115,-128],[363,-41],[78,84],[450,151]],[[5632,5281],[83,-407]],[[4209,6446],[291,-134],[194,8],[217,329],[234,141]],[[2986,6861],[180,421],[284,-2],[229,-105],[370,49],[175,-165],[167,24],[-263,96],[-124,258],[428,159],[46,134],[214,-6]],[[7003,2290],[-461,34],[-481,-104],[86,-238],[-496,37],[-322,-54]],[[7815,2160],[37,-128]],[[7852,2032],[21,-164],[-158,-111],[-154,43],[-755,-54],[-278,-133],[-75,-220],[-328,-138],[-263,105]],[[8669,3224],[326,-24],[270,257],[404,-72]],[[9669,3385],[-181,-313],[73,-219],[-359,-394],[-10,-165],[-240,86],[82,-215],[263,-135],[-106,-171],[-291,43],[-241,-54],[-245,123],[-290,-2],[30,-108],[-242,-134],[62,202],[-122,103]],[[9757,4532],[142,-260],[-11,-327],[111,-67],[-136,-272],[-194,-221]]]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment