import { grid, w, h, small, smaller } with {
demModif as dem0,
lineModif as line
} from "@visionscarto/deriving-pantelleria"
colorPalette = html`<div id="colorPalette">${sequentialArray.map((d, i) =>
smallest(
contourMapModif(grid, sequentialArray, i, showContoursHeatmap),
"",
sequentialArray[i]
)
)}</div>`
//TODO: Improve this. It's justs a quick solution to be improved, doesn't work well at any width.
divOverlay = {
const div = d3.create("div").style("width", w);
const elWidth = width / 8;
const elHeight = elWidth / 2;
const el = div
.selectAll("div")
.data(sequentialArray)
.join("div")
.style("display", "inline-block")
.style("width", elWidth + "px")
.style("height", elHeight + "px")
.style("margin", 0)
.style("padding", 0)
.attr("id", (d) => d)
.style("color", "white")
.style("border", "1px solid transparent") // No perfect fit
.style("cursor", "pointer")
.on("click", function (e, d) {
mutable name = d;
})
.append("p")
.text((d) => d)
.style("text-align", "center")
.style("padding-top", "20px");
return div.node();
}
mutable name = "PuBu" // Default value
// Based on smaller function at https://observablehq.com/@visionscarto/deriving-pantelleria
function smallest(canvas, style = "", idEl = "") {
return html`<div id=${idEl}; style="display:inline-block; cursor:pointer;">${Object.assign(
canvas,
{
style: `vertical-align: bottom;max-width: ${
((width / 8) | 0) - 1
}px;${style};`
}
)}
</div>
`;
}
contourMapModif = (grid, colorArray, myIndex, drawContours) =>
heatmap(grid, {
width: w,
color: d3[`interpolate${colorArray[myIndex]}`],
contours: drawContours // depends on toggle selector
})
import { drawHillshade, drawRow } with {
myDem as molokai,
azimutAnimate as azimuth,
elevationAnimate as elevation,
w as width,
h as height
} from "@sahilchinoy/hillshader"
sunScheme = {
// Adapting https://observablehq.com/@sahilchinoy/hillshader
const svg = d3
.create("svg")
.attr("width", 250)
.attr("height", 120)
.attr("transform", "scale(0.5)") // TODO: Improve this. Just a quick solution
.style("font-style", "italic")
.style("font-size", "12px");
svg
.append("circle")
.attr("cx", 50)
.attr("cy", 70)
.attr("r", 40)
.style("stroke", "lightgrey")
.style("fill", "none");
const sunAzimuth = (azimutAnimate * Math.PI) / 180;
const dx = Math.cos(sunAzimuth - Math.PI / 2) * 40;
const dy = Math.sin(sunAzimuth - Math.PI / 2) * 40;
svg
.append("line")
.attr("x1", 50)
.attr("x2", 50 + dx)
.attr("y1", 70)
.attr("y2", 70 + dy)
.style("stroke", "white")
.style("stroke-width", 2);
svg
.append("circle")
.attr("cx", 50 + dx)
.attr("cy", 70 + dy)
.attr("r", 5)
.attr("fill", "gold");
const g = svg.append("g").attr("transform", "translate(150, 30)");
g.append("path")
.attr("d", "M80 80 a 80 80 0 0 0 -80 -80")
.style("fill", "none")
.style("stroke", "lightgrey");
const sunElev = (elevationAnimate * Math.PI) / 180;
const dx2 = Math.cos(sunElev) * 80;
const dy2 = Math.sin(sunElev) * 80;
g.append("line")
.attr("x1", 0)
.attr("y1", 80)
.attr("x2", dx2)
.attr("y2", 80 - dy2)
.style("stroke", "white")
.style("stroke-width", 2);
g.append("circle")
.attr("cx", dx2)
.attr("cy", 80 - dy2)
.attr("r", 5)
.attr("fill", "gold");
return svg.node();
}
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.
