Last active
July 21, 2017 21:00
-
-
Save csessig86/91e582e34cd4637745ac673d0f73729f to your computer and use it in GitHub Desktop.
D3 clipped map zoom
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
| d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t}; |
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> | |
| <title>Mapnik - D3 Preview</title> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> | |
| <!-- Mobile meta tags--> | |
| <meta name="HandheldFriendly" content="True"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <meta name="MobileOptimized" content="320"/> | |
| <meta http-equiv="cleartype" content="on"> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="includes-d3/css/style.css" /> | |
| <body> | |
| <svg></svg> | |
| </body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="includes-d3/js/lib/d3.geo.tile.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="includes-d3/js/script.js"></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
| // Code borrowed heavily from: | |
| // http://bl.ocks.org/mbostock/4150951 | |
| // https://bl.ocks.org/mbostock/2374239 | |
| var width = 960, | |
| height = 900, | |
| scaleSize = 3000, | |
| features, | |
| districts, | |
| defs, | |
| tiles; | |
| // Tiles | |
| var projection = d3.geo.mercator() | |
| .scale(scaleSize) | |
| .center([-99.9, 31.9]) | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var tile = d3.geo.tile() | |
| .size([width, height]); | |
| // Zoom | |
| var tx_lat_long = [-99.9, 31.9]; | |
| var center = projection(tx_lat_long); | |
| var zoom = d3.behavior.zoom() | |
| .scaleExtent([1, 20]) | |
| .on("zoom", zoomInOut); | |
| // Map | |
| var svg = d3.select("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .call(zoom); | |
| // Transform the map when we zoom in, out | |
| function zoomInOut(state) { | |
| tiles = tile | |
| .scale(projection.scale() * 2 * Math.PI * zoom.scale()) | |
| .translate(projection([zoom.translate()[0], zoom.translate()[1]])) | |
| (); | |
| svg.select('.tiles-clip') | |
| // Move tiles | |
| tiles_clip = svg.select('.tiles-clip') | |
| .attr("clip-path", "url(#clip)") | |
| // .style(prefix + "transform", matrix3d(tiles.scale, tiles.translate)) | |
| .selectAll("image") | |
| .data(tiles); | |
| tiles_clip.exit().remove(); | |
| // Load tiles from URL | |
| tiles_clip.enter().append("image") | |
| .attr("xlink:href", function(d) { | |
| return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; | |
| }) | |
| .attr("width", Math.round(tiles.scale)) | |
| .attr("height", Math.round(tiles.scale)) | |
| .attr("x", function(d) { | |
| return Math.round((d[0] + tiles.translate[0]) * tiles.scale); | |
| }) | |
| .attr("y", function(d) { | |
| return Math.round((d[1] + tiles.translate[1]) * tiles.scale); | |
| }); | |
| tiles_clip.exit().remove() | |
| // Move boundaries | |
| if (state !== 'init') { | |
| features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| districts.style("stroke-width", 1.25 / d3.event.scale + "px"); | |
| features.select('.district-35').style("stroke-width", 4 / d3.event.scale + "px"); | |
| defs.select("path").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| } | |
| // close zoominout | |
| } | |
| // Draw lines on map | |
| function drawMaps(file){ | |
| var topojson_path = 'topojson/' + file + '.topojson'; | |
| var districtObject = "Texas_US_House_Districts"; | |
| d3.json(topojson_path, function(error, data) { | |
| if (error) return console.error(error); | |
| defs = svg.append("defs"); | |
| var className = ".districts"; | |
| defs.append("path") | |
| .attr("id", "land") | |
| .datum(topojson.feature(data, data.objects[districtObject])) | |
| .attr("d", path); | |
| defs.append("clipPath") | |
| .attr("id", "clip") | |
| .append("use") | |
| .attr("xlink:href", "#land"); | |
| svg.append("use") | |
| .attr("xlink:href", "#land") | |
| .attr("class", "stroke"); | |
| svg.append("g") | |
| .attr('class', 'tiles-clip') | |
| features = svg.append("g"); | |
| districts = features.selectAll(className) | |
| .data(topojson.feature(data, data.objects[districtObject]).features); | |
| districts.enter() | |
| .append("path") | |
| .attr("class", function(d) { | |
| if (d.properties["DIST_NBR"] != undefined) { | |
| var dist_num = d.properties["DIST_NBR"] | |
| } else { | |
| var dist_num = d.properties["CD"] | |
| } | |
| return "district district-" + dist_num; | |
| }) | |
| .attr("d", path); | |
| districts.exit().remove(); | |
| zoomInOut('init'); | |
| // close d3 json | |
| }); | |
| // close draw maps | |
| } | |
| drawMaps('all-current'); | |
| //drawMaps('all-07-13'); |
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
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .county { | |
| stroke: none; | |
| stroke-width: 0.3; | |
| fill: none; | |
| } | |
| svg { | |
| fill: none; | |
| } | |
| svg text{ | |
| font-family: Arial; | |
| } | |
| .district{ | |
| stroke: hsl(200, 56%, 40%);; | |
| stroke-width: 1; | |
| } | |
| .district-35 { | |
| stroke: hsl(7, 77%, 54%);; | |
| stroke-width: 4; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment