Public
Edited
Nov 15, 2023
1 fork
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
stops = {
const range = new Array(255).fill().map((_, i) => i);
const chunks = _.chunk(range, Math.floor(255 / color.length));

const bounds = chunks.map((chunk) => [
chunk[0] + 0.001,
chunk[chunk.length - 1] + 1
]);

return bounds
.reduce((str, [lo, hi], i) => {
return str.concat(
`${lo} ${hexToRgba(color[i])}\n${hi} ${hexToRgba(color[i])}\n`
);
}, "\n")
.concat("nv 255 255 255 0\n");
}
Insert cell
hexToRgba = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(
result[3],
16
)} 255`
: "255 255 255 0";
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
fetch("https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/13/1309/3165.png")
.then((res) => res.blob())
.then((res) => {
const url = URL.createObjectURL(res);
return htl.html`
<img src="${url}" height="256" width="256" />
`;
})
.catch((err) => console.error("Failed to fetch raster tile. Error: ", err))
Insert cell
Insert cell
Insert cell
Insert cell
projection = d3
.geoMercator()
.center([-119.449444, 37.166111])
.scale(Math.pow(2, 15) / (2 * Math.PI))
.translate([width / 2, height / 2])
Insert cell
Insert cell
Insert cell
tile = d3
.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
Insert cell
tiles = tile()
Insert cell
Insert cell
Insert cell
map = svg`<svg viewBox="0 0 ${width} ${height}">
${tiles.map(([x, y, z], i, { translate: [tx, ty], scale: k }) => {
const xPos = Math.round((x + tx) * k);
const yPos = Math.round((y + ty) * k);
return svg`
<rect x="${xPos}" y="${yPos}" width="${k}" height="${k}" stroke="#cfcfcf" fill="none" />
<image xlink:href="${`${data[x][y]}`}" x="${xPos}" y="${yPos}" width="${k}" height="${k}" />
`;
})}
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = 1080
Insert cell
width = 1080
Insert cell
data = {
return {
19: {
47: await FileAttachment("1947.png").url(),
48: await FileAttachment("1948.png").url(),
49: await FileAttachment("1949.png").url(),
50: await FileAttachment("1950.png").url(),
51: await FileAttachment("1951.png").url()
},
20: {
47: await FileAttachment("2047.png").url(),
48: await FileAttachment("2048.png").url(),
49: await FileAttachment("2049.png").url(),
50: await FileAttachment("2050.png").url(),
51: await FileAttachment("2051.png").url()
},
21: {
47: await FileAttachment("2147.png").url(),
48: await FileAttachment("2148.png").url(),
49: await FileAttachment("2149.png").url(),
50: await FileAttachment("2150.png").url(),
51: await FileAttachment("2151.png").url()
},
22: {
47: await FileAttachment("2247.png").url(),
48: await FileAttachment("2248.png").url(),
49: await FileAttachment("2249.png").url(),
50: await FileAttachment("2250.png").url(),
51: await FileAttachment("2251.png").url()
},
23: {
47: await FileAttachment("2347.png").url(),
48: await FileAttachment("2348.png").url(),
49: await FileAttachment("2349.png").url(),
50: await FileAttachment("2350.png").url(),
51: await FileAttachment("2351.png").url()
}
};
}
Insert cell
d3 = require("d3-geo@3", "d3-tile@1", "d3-scale-chromatic@3")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more