starStyle = new gridviz.Style({
drawFun: (cells, cg, resolution) => {
//draw each cell as a star
//with a fill color depending on the property "ind"
for (let cell of cells) {
//do not draw cells with no data or no "ind"
if (!cell.ind) continue;
//set fill color as a shade from yellow to brown depending on "ind" property
const min = d3.min(cells, (c) => +c.ind);
const max = d3.max(cells, (c) => +c.ind);
let t = (cell.ind - min) / (max - min);
t = scale(t);
cg.ctx.fillStyle = d3.interpolateYlOrRd(t);
/*let nbBranches = 0;
const zf = cg.getZf();
if (zf < 1000) nbBranches = 8;
else nbBranches = 5;*/
const starOr_ = random ? 380 * Math.random() : starOr;
const nbBranches_ = random
? 3 + Math.ceil(Math.random() * 8)
: nbBranches;
const sbWidth_ = random ? 0.2 + 0.6 * Math.random() : sbWidth;
//draw star branches as a triangle, one by one
const r2 = resolution * 0.5;
const rad = r2 * starSize;
const pi2 = Math.PI * 0.5;
const daRad = (starOr_ * Math.PI) / 180;
for (
let angle = pi2 + daRad;
angle < Math.PI * 2 + pi2 + daRad;
angle += (Math.PI * 2) / nbBranches_
) {
cg.ctx.beginPath();
//triangle summit
cg.ctx.moveTo(
cell.x + r2 + rad * Math.cos(angle),
cell.y + r2 + rad * Math.sin(angle)
);
//triangle base segment point 1
cg.ctx.lineTo(
cell.x + r2 + sbWidth_ * rad * Math.cos(angle + pi2),
cell.y + r2 + sbWidth_ * rad * Math.sin(angle + pi2)
);
//triangle base segment point 2
cg.ctx.lineTo(
cell.x + r2 + sbWidth_ * rad * Math.cos(angle - pi2),
cell.y + r2 + sbWidth_ * rad * Math.sin(angle - pi2)
);
cg.ctx.fill();
}
}
}
})
scale = gridviz.logarithmicScale(-base)
map = new gridviz.Map(container, {
x: 3750000,
y: 2960000,
z: 400
}).addZoomButtons()
dataset = new gridviz.MultiResolutionDataset(
[200, 400, 1000, 2000, 5000, 10000, 20000, 50000, 100000],
(resolution) =>
new gridviz.TiledGrid(
map,
"https://raw.githubusercontent.com/jgaffuri/tiled-grid-france-filosofi/main/out/csv/met/inc/2019/" +
resolution +
"m/"
),
{
preprocess: (cell) => {
cell.rIncome = cell.ind_snv / cell.ind / 12;
}
}
)
layer = new gridviz.GridLayer(dataset, [], {
minPixelsPerCell: 18,
cellInfoHTML: (c) => "Population: " + c.ind
})
{
map.layers = [layer];
}
{
layer.styles = [starStyle];
map.redraw();
}
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.
