Published unlisted
Edited
Mar 30, 2021
deckgl = {
container.innerHTML = '';
return new deck.DeckGL({
container,
initialViewState: {
latitude: 37.4122,
longitude: 137.4130,
zoom: 4.6,
pitch: 30,
bearing: -30
},
controller: true,
getTooltip: ({ object }) =>
object &&
`${object.properties.nam_ja}\n${womenRatio.get(object.properties.id)}%`
});
}
colors = {
return id => {
const colorObj = d3.color(colorString(id));
return [colorObj.r, colorObj.g, colorObj.b];
};
}
colorString = d3
.scaleLinear()
.domain([0, 5, 20, 50])
.range(["#FFFFFF", "#FCEEED", "#EE73C4", "#F20B97"]);
function ramp(color, n = 256) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
html`
<style>
.deck-tooltip {font-size: 0.8em; font-family: Arial, Helvetica, sans-serif;}
</style>
Stylesheets
`
md`# Appendix`
d3 = require("d3@6")
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.
