Raster & Vector This notebook demonstrates using d3-tile to display Mercator-projected raster tiles underneath TopoJSON vectors. Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.
map = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">${tile().map(([x, y, z], i, tiles) => svg` <image xlink:href="${url(x, y, z)}" x="${Math.round((x + tiles.translate[0]) * tiles.scale)}" y="${Math.round((y + tiles.translate[1]) * tiles.scale)}" width="${tiles.scale}" height="${tiles.scale}">`)} <!--<path fill="none" stroke="red" d="${path(topology)}"/>--> </svg>`
url = (x, y, z) => `http://tile.stamen.com/toner/${z}/${x}/${y}.png`
projection = d3.geoMercator()
path = d3.geoPath(projection)
tile = d3.tile() .size([width, height]) .scale(projection.scale() * 2 * Math.PI) .translate(projection([0, 0]))
height = { const [[x0, y0], [x1, y1]] = d3.geoPath().bounds(topology); const height = 800; //Math.ceil(y1 - y0); //const scale = projection.scale() * (2 * Math.PI); //projection.center(projection.invert([width / 2, height / 2])); //projection.scale(Math.pow(2, Math.floor(Math.log2(scale))) / (2 * Math.PI)); //projection.translate([width / 2, height / 2]); projection.scale(257055.08109204995); projection.center([ -97.07555334199328, 49.85157748037587 ]); projection.translate([ 350.0311677218043, 359.97649624406677 ]); return height; }
vectors = topology.features
topology = fetch("https://gist.githubusercontent.com/mbarison/39e9eef5c8da38499958ecc379e9623d/raw/36f3169efc652072cca6ead559d03f2affcfbf02/FOLM_St_Boniface.geojson").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3@^5.8", "d3-geo@1", "d3-tile@0.0.3")
color = d3.scaleQuantize() .domain([0, 45]) .range(d3.schemeReds[9]);
d3.select("svg").selectAll("path").data(vectors).enter().append("path") .attr("d", path) .style("fill", (d) => color(d.properties.FOLM_PCT)) .style("stroke-width", "1") .style("stroke", "#6e6e6e") .style("opacity", 0.5);
legend = g => { const x = d3.scaleLinear() .domain(d3.extent(color.domain())) .rangeRound([0, 260]); g.selectAll("rect") .data(color.range().map(d => color.invertExtent(d))) .join("rect") .attr("height", 8) .attr("x", d => x(d[0])) .attr("width", d => x(d[1]) - x(d[0])) .attr("fill", d => color(d[0])); g.append("text") .attr("class", "caption") .attr("x", x.range()[0]) .attr("y", -6) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("First official language minority (%)"); g.call(d3.axisBottom(x) .tickSize(13) .tickFormat(format) .tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0]))) .select(".domain") .remove(); };
format = d3.format("");
d3.select("svg").append("g") .attr("transform", "translate(310,20)") .call(legend);