[ Launch: Projections (merc,orth,stero) ] 82239a3008ad3092a136d70bd06a8e67 by jkeohan
[ Launch: Tributary inlet ] eae9e630e544c02b8433 by jkeohan
-
-
Save jkeohan/82239a3008ad3092a136d70bd06a8e67 to your computer and use it in GitHub Desktop.
Projections - Boundingbox\Centroid
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
| {"description":"Projections - Boundingbox\\Centroid","endpoint":"","display":"svg","public":true,"require":[{"name":"geo","url":"https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.js"},{"name":"geo","url":"https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"countries.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Bq1hClk.png"} |
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
| var countries = tributary.countries | |
| //console.log(countries.features) | |
| var svg = d3.select('svg') | |
| var canvas = canvasSize('svg') | |
| //console.log(canvas) | |
| //w = canvas[0] | |
| //h = canvas[1] | |
| w = 500; | |
| h = 500; | |
| //console.log(w,h) | |
| //Create the following projections and determine the default properties for: | |
| //-scale | |
| //-center | |
| //Define map projection | |
| //function bounds(d) { | |
| var b = d3.geo.bounds(countries) | |
| console.log(b) | |
| console.log((b[1][0] - b[0][0])/w) | |
| console.log((b[1][1] - b[0][1])/h) | |
| var s = .95 / Math.max( (b[1][0] - b[0][0])/w , (b[1][1] - b[0][1])/h ) | |
| //console.log(s) | |
| var t = [(w - s * (b[1][0] + b[0][0])/2) , ( h -s * (b[1][1] + b[0][1])/ 2) ] | |
| //} | |
| var projection = d3.geo.mercator() | |
| .center([ 0, 0 ]) | |
| .translate([ w/2, h/1.74026575872 ] | |
| .scale(3) | |
| //.scale([ w/9 ]) | |
| /* | |
| var projection = d3.geo.mollweide() | |
| .center([ 0, 0 ]) | |
| .translate([ w/2, h/1.74026575872 ]) | |
| .scale([ 120 ]) | |
| */ | |
| //var projection = d3.geo.orthographic() | |
| //.center([ 0, 0 ]) | |
| // .translate([ w/2, h/1.403440128 ]) | |
| //.scale([ w/9 ]) | |
| //var projection = d3.geo.stereographic() | |
| //.center([ 100, -18 ]) | |
| //.translate([ w/2, h/2.223049162752 ]) | |
| //.scale([ w/9 ]) | |
| //.rotate(50) | |
| //Define path generator | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| //d3.json(countries) | |
| svg.selectAll("path") | |
| .data(countries.features) | |
| .enter() | |
| .append("path") | |
| .attr("class","countries") | |
| .attr("d", path); | |
| //Load in GeoJSON data | |
| function canvasSize(target) { | |
| var height = parseFloat(d3.select(target).node().clientHeight) | |
| var width = parseFloat(d3.select(target).node().clientWidth) | |
| return [width,height] | |
| }//canvasSize | |
| d3.selectAll("path.countries") | |
| .on("mouseover", centerBounds) | |
| .on("mouseout", clearCenterBounds) | |
| .on("click",zoomed) | |
| function centerBounds(d,i) { | |
| var thisBounds = path.bounds(d); | |
| var thisCenter = path.centroid(d); | |
| d3.select("svg") | |
| .append("rect") | |
| .attr("class", "bbox") | |
| .attr("x", thisBounds[0][0]) | |
| .attr("y", thisBounds[0][1]) | |
| .attr("width", thisBounds[1][0] - thisBounds[0][0]) | |
| .attr("height", thisBounds[1][1] - thisBounds[0][1]) | |
| .style("fill", "none") | |
| .style("stroke-dasharray", "5 5") | |
| .style("stroke", "green") | |
| .style("stroke-width", 2) | |
| .style("pointer-events", "none"); | |
| d3.select("svg") | |
| .append("circle") | |
| .attr("class", "centroid") | |
| .style("fill", "red") | |
| .attr("r", 5) | |
| .attr("cx", thisCenter[0]).attr("cy", thisCenter[1]) | |
| .style("pointer-events", "none"); | |
| } | |
| function clearCenterBounds() { | |
| d3.selectAll("circle.centroid").remove(); | |
| d3.selectAll("rect.bbox").remove(); | |
| }; | |
| var mapZoom = d3.behavior.zoom() | |
| .translate(projection.translate()) | |
| .scale(projection.scale()) | |
| .on("zoom",zoomed ); | |
| //d3.select('svg').call(mapZoom) | |
| function zoomed() { | |
| console.log(this) | |
| projection.translate(mapZoom.translate()).scale(mapZoom.scale()); | |
| d3.selectAll("path.countries").attr("d", path); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment