Using d3-tile to display raster image tiles underneath a CSV dataset of point locations (U.S. state capitals), and d3-zoom for pan & zoom. See also the TopoJSON version and the static version.
Tiles copyright OpenStreetMap contributors.
forked from mbostock's block: Raster & Vector IV (wrap update)
| // https://d3js.org/d3-tile/ Version 0.0.3. Copyright 2016 Mike Bostock. | |
| (function (global, factory) { | |
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-array')) : | |
| typeof define === 'function' && define.amd ? define(['exports', 'd3-array'], factory) : | |
| (factory((global.d3 = global.d3 || {}),global.d3)); | |
| }(this, function (exports,d3Array) { 'use strict'; | |
| function tile() { | |
| var x0 = 0, | |
| y0 = 0, | |
| x1 = 960, | |
| y1 = 500, | |
| tx = (x0 + x1) / 2, | |
| ty = (y0 + y1) / 2, | |
| scale = 256, | |
| zoomDelta = 0, | |
| wrap = true; | |
| function tile() { | |
| var z = Math.max(Math.log(scale) / Math.LN2 - 8, 0), | |
| z0 = Math.round(z + zoomDelta), | |
| j = 1 << z0, | |
| k = Math.pow(2, z - z0 + 8), | |
| x = tx - scale / 2, | |
| y = ty - scale / 2, | |
| tiles = [], | |
| cols = d3Array.range( | |
| Math.max(wrap ? -Infinity : 0, Math.floor((x0 - x) / k)), | |
| Math.min(Math.ceil((x1 - x) / k), wrap ? Infinity : j) | |
| ), | |
| rows = d3Array.range( | |
| Math.max(0, Math.floor((y0 - y) / k)), | |
| Math.min(Math.ceil((y1 - y) / k), j) | |
| ); | |
| rows.forEach(function(y) { | |
| cols.forEach(function(x) { | |
| var d = [(x % j + j) % j, y, z0]; | |
| d.x = x * 256; | |
| d.y = y * 256; | |
| tiles.push(d); | |
| }); | |
| }); | |
| tiles.translate = [x / k, y / k]; | |
| tiles.scale = k; | |
| return tiles; | |
| } | |
| tile.size = function(_) { | |
| return arguments.length ? (x0 = y0 = 0, x1 = +_[0], y1 = +_[1], tile) : [x1, y1]; | |
| }; | |
| tile.extent = function(_) { | |
| return arguments.length ? (x0 = +_[0][0], y0 = +_[0][1], x1 = +_[1][0], y1 = +_[1][1], tile) : [[x0, y0], [x1, y1]]; | |
| }; | |
| tile.scale = function(_) { | |
| return arguments.length ? (scale = +_, tile) : scale; | |
| }; | |
| tile.translate = function(_) { | |
| return arguments.length ? (tx = +_[0], ty = +_[1], tile) : [tx, ty]; | |
| }; | |
| tile.zoomDelta = function(_) { | |
| return arguments.length ? (zoomDelta = +_, tile) : zoomDelta; | |
| }; | |
| tile.wrap = function(_) { | |
| return arguments.length ? (wrap = _, tile) : wrap; | |
| }; | |
| return tile; | |
| } | |
| exports.tile = tile; | |
| Object.defineProperty(exports, '__esModule', { value: true }); | |
| })); |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| path { | |
| fill: none; | |
| stroke: red; | |
| stroke-linejoin: round; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <svg></svg> | |
| <script src="//d3js.org/d3.v4.0.0-rc.1.min.js"></script> | |
| <script src="d3-tile.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var pi = Math.PI, | |
| tau = 2 * pi; | |
| var width = Math.max(960, window.innerWidth), | |
| height = Math.max(500, window.innerHeight); | |
| // Initialize the projection to fit the world in a 1×1 square centered at the origin. | |
| var projection = d3.geoMercator() | |
| .scale(1 / tau) | |
| .translate([0, 0]); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var tile = d3.tile() | |
| .size([width, height]); | |
| var zoom = d3.zoom() | |
| .scaleExtent([1 << 11, 1 << 14]) | |
| .on("zoom", zoomed); | |
| var svg = d3.select("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var raster = svg.append("g"); | |
| var vector = svg.append("path"); | |
| d3.csv("us-state-capitals.csv", type, function(error, capitals) { | |
| if (error) throw error; | |
| vector | |
| .datum({type: "FeatureCollection", features: capitals}); | |
| // Compute the projected initial center. | |
| var center = projection([-98.5, 39.5]); | |
| // Apply a zoom transform equivalent to projection.{scale,translate,center}. | |
| svg | |
| .call(zoom) | |
| .call(zoom.transform, d3.zoomIdentity | |
| .translate(width / 2, height / 2) | |
| .scale(1 << 12) | |
| .translate(-center[0], -center[1])); | |
| }); | |
| function zoomed() { | |
| var transform = d3.event.transform; | |
| var tiles = tile | |
| .scale(transform.k) | |
| .translate([transform.x, transform.y]) | |
| (); | |
| projection | |
| .scale(transform.k / tau) | |
| .translate([transform.x, transform.y]); | |
| vector | |
| .attr("d", path); | |
| var image = raster | |
| .attr("transform", stringify(tiles.scale, tiles.translate)) | |
| .selectAll("image") | |
| .data(tiles, function(d) { return d; }); | |
| image.exit().remove(); | |
| image.enter().append("image") | |
| .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) | |
| .attr("x", function(d) { return d.x; }) | |
| .attr("y", function(d) { return d.y; }) | |
| .attr("width", 256) | |
| .attr("height", 256); | |
| } | |
| function type(d) { | |
| return { | |
| type: "Feature", | |
| properties: {name: d.description, state: d.name}, | |
| geometry: {type: "Point", coordinates: [+d.longitude, +d.latitude]} | |
| }; | |
| } | |
| function stringify(scale, translate) { | |
| var k = scale / 256, r = scale % 1 ? Number : Math.round; | |
| return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")"; | |
| } | |
| </script> |
| name | description | latitude | longitude | |
|---|---|---|---|---|
| Alabama | Montgomery | 32.377716 | -86.300568 | |
| Alaska | Juneau | 58.301598 | -134.420212 | |
| Arizona | Phoenix | 33.448143 | -112.096962 | |
| Arkansas | Little Rock | 34.746613 | -92.288986 | |
| California | Sacramento | 38.576668 | -121.493629 | |
| Colorado | Denver | 39.739227 | -104.984856 | |
| Connecticut | Hartford<br> | 41.764046 | -72.682198 | |
| Delaware | Dover | 39.157307 | -75.519722 | |
| Hawaii | Honolulu | 21.307442 | -157.857376 | |
| Florida | Tallahassee | 30.438118 | -84.281296 | |
| Georgia | Atlanta<br> | 33.749027 | -84.388229 | |
| Idaho | Boise | 43.617775 | -116.199722 | |
| Illinois | Springfield | 39.798363 | -89.654961 | |
| Indiana | Indianapolis | 39.768623 | -86.162643 | |
| Iowa | Des Moines | 41.591087 | -93.603729 | |
| Kansas | Topeka | 39.048191 | -95.677956 | |
| Kentucky | Frankfort | 38.186722 | -84.875374 | |
| Louisiana | Baton Rouge | 30.457069 | -91.187393 | |
| Maine | Augusta | 44.307167 | -69.781693 | |
| Maryland | Annapolis | 38.978764 | -76.490936 | |
| Massachusetts | Boston | 42.358162 | -71.063698 | |
| Michigan | Lansing | 42.733635 | -84.555328 | |
| Minnesota | St. Paul | 44.955097 | -93.102211 | |
| Mississippi | Jackson | 32.303848 | -90.182106 | |
| Missouri | Jefferson City | 38.579201 | -92.172935 | |
| Montana | Helena | 46.585709 | -112.018417 | |
| Nebraska | Lincoln | 40.808075 | -96.699654 | |
| Nevada | Carson City | 39.163914 | -119.766121 | |
| New Hampshire | Concord | 43.206898 | -71.537994 | |
| New Jersey | Trenton | 40.220596 | -74.769913 | |
| New Mexico | Santa Fe | 35.68224 | -105.939728 | |
| North Carolina | Raleigh | 35.78043 | -78.639099 | |
| North Dakota | Bismarck | 46.82085 | -100.783318 | |
| New York | Albany | 42.652843 | -73.757874 | |
| Ohio | Columbus | 39.961346 | -82.999069 | |
| Oklahoma | Oklahoma City | 35.492207 | -97.503342 | |
| Oregon | Salem | 44.938461 | -123.030403 | |
| Pennsylvania | Harrisburg | 40.264378 | -76.883598 | |
| Rhode Island | Providence | 41.830914 | -71.414963 | |
| South Carolina | Columbia | 34.000343 | -81.033211 | |
| South Dakota | Pierre | 44.367031 | -100.346405 | |
| Tennessee | Nashville | 36.16581 | -86.784241 | |
| Texas | Austin | 30.27467 | -97.740349 | |
| Utah | Salt Lake City | 40.777477 | -111.888237 | |
| Vermont | Montpelier | 44.262436 | -72.580536 | |
| Virginia | Richmond | 37.538857 | -77.43364 | |
| Washington | Olympia | 47.035805 | -122.905014 | |
| West Virginia | Charleston | 38.336246 | -81.612328 | |
| Wisconsin | Madison | 43.074684 | -89.384445 | |
| Wyoming | Cheyenne | 41.140259 | -104.820236 |
