Ph.D. Student at UC Berkeley EECS. Prev. @FormidableLabs.
Public
Edited
Nov 15, 2023
1 fork
4 stars
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");
}
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";
}
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))
projection = d3
.geoMercator()
.center([-119.449444, 37.166111])
.scale(Math.pow(2, 15) / (2 * Math.PI))
.translate([width / 2, height / 2])
tile = d3
.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
tiles = tile()
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>`
height = 1080
width = 1080
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()
}
};
}
d3 = require("d3-geo@3", "d3-tile@1", "d3-scale-chromatic@3")
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.
