| license: mit |
Reproducing the UK map and uk.json topojson data by Mike Bostock (http://bost.ocks.org/mike/map/). Currently the uk.json file does not contain place information - there must be something wrong with the way I am producing the uk.json here: https://github.com/samuelleach/uk-atlas
forked from samuelleach's block: UK map d3v4
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .uk { fill: #cad9dc; } | |
| .place, | |
| .place-label { | |
| fill: #444; | |
| } | |
| h1, p, text { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| pointer-events: none; | |
| } | |
| .dialoguebox { | |
| position: absolute; | |
| background-color: rgba(255,255,255,0.8); | |
| border: solid; | |
| border-color:#003C57; | |
| opacity:0; | |
| text-align:center; | |
| } | |
| </style> | |
| <body> | |
| <h1>Guess the halfway of the UK</h1> | |
| <p>Click a point on the map where there is an equal amount of land above the line as there is below<p> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-queue.v3.min.js"></script> | |
| <script src="https://unpkg.com/topojson@3"></script> | |
| <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> | |
| <script> | |
| d3.queue | |
| d3.queue() | |
| .defer(d3.json, "uk.geo.json") | |
| .await(ready); | |
| function ready (error, uk){ | |
| var width = parseInt(d3.select('body').style("width")); | |
| height = width*1.2; | |
| var projection = d3.geoAlbers() | |
| .center([0, 55.4]) | |
| .rotate([4.4, 0]) | |
| .parallels([50, 60]) | |
| .scale(width * 6.4) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geoPath() | |
| .projection(projection) | |
| .pointRadius(2); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append('rect') | |
| .attr("class","guess") | |
| .attr("width",width) | |
| .attr("height",0) | |
| .style("fill","steelblue") | |
| svg.selectAll(".uk") | |
| .data(uk.features) | |
| .enter().append("path") | |
| .attr("class", "uk" ) | |
| .attr("d", path); | |
| svg.append('rect') | |
| .attr("class","dialogue") | |
| .style("stroke","red") | |
| .style("fill","white") | |
| .attr("height",height/10) | |
| .attr("width",width/4) | |
| .attr("display","none") | |
| svg.append('line') | |
| .attr("class","guessline") | |
| .attr("x1",0) | |
| .attr("x2",width) | |
| .attr("y1",0) | |
| .attr("y1",0) | |
| .style("stroke","rgb(255,0,0)") | |
| .style("stroke-width","2") | |
| .style("opacity",0) | |
| var box = d3.select('body').append("div") | |
| .attr('class', "dialoguebox" ) | |
| .style('position','absolute') | |
| .style('width', width/4 + "px") | |
| .style('height', height/10 + "px") | |
| .style("opacity",0) | |
| box.append('p').append("text").text("hello") | |
| box.append('button').attr("id","guessagain").text("Choose again") | |
| box.append('button').attr("id","reveal").text("Reveal the answer") | |
| //break down the uk from multipolygons to individual polygons for turf | |
| ukb=uk.features[0].geometry.coordinates | |
| svg.on("click",function(){ | |
| py = (d3.mouse(this))[1] | |
| d3.select('.guessline') | |
| .attr("y1",py) | |
| .attr("y2",py) | |
| .style("opacity",1) | |
| d3.select('.guess') | |
| .transition().duration(2000).ease(d3.easeExp) | |
| .attr("width",width) | |
| .attr("height",py) | |
| d3.select(".dialoguebox") | |
| .style('top', d3.mouse(this)[1]+height/20+"px") | |
| .style('left', width/2+"px") | |
| .style('opacity',1) | |
| box1=[]; | |
| boxcoords=[]; | |
| topleft=projection.invert([0,0]) | |
| topright=projection.invert([width,0]) | |
| bottomleft=projection.invert([0,py]) | |
| bottomright=projection.invert([width,py]) | |
| boxcoords.push(topleft,topright,bottomright,bottomleft,topleft) | |
| box1.push(boxcoords)//turf needs double square brackets for coordinates | |
| poly1=turf.polygon(box1)//turn it into a geojson feature | |
| area=0;//set the area to zero before looping through all the areas looking for intersections and summing up the areas | |
| for(i=0;i<ukb.length;i++){ | |
| intersection = turf.intersect(poly1,turf.polygon(ukb[i])) | |
| if(intersection!=null){area=area+turf.area(intersection)} | |
| } | |
| console.log(area/turf.area(uk)) | |
| })//end of on click | |
| function guess(){ | |
| console.log("button pushed") | |
| } | |
| };//end of ready | |
| </script> |