colors=[ "#b0d5df","#64acbe", "#225886", "#e4acac", "#c85a5a", "#574249"]
swatches(colors)
x = d3.scaleQuantile(Array.from(municipalityData.values()), d3.range(n))
color = {
return value => {
if (!value) return "#e8e8e8";
return colors[x(value)];
};
}
colorGnBu = value => {
if (!value) return "#e8e8e8";
return d3.scaleSequential([0, d3.max(municipalityData.values())], d3.interpolateYlGnBu)(value)
}
swissEnergy = FileAttachment("swiss-energy-with-canton.json").json()
data = swissEnergy.results.bindings
municipalityData = new Map(data.map(x=> [+x.d_municipality_id.value, +x.d_total.value]))
cantonAvg = d3.rollup(data, v => {
return d3.mean(v, d=>+d.d_total?.value??0)
}, d => +d.d_canton_id?.value ?? 0)
cantonEnergyData = d3.group(data, d => d.d_canton_id?.value ?? 0)
mapData = ch_url
dataUrl = "https://swiss-maps-git-maintainance-ixt1.vercel.app/api/v0?year=2022&shapes=country,cantons,municipalities,lakes"
ch_url = d3.json(dataUrl)
ch_file = FileAttachment("ch.topojson.json").json()
function swatches(colors) {
return html`${colors.map(c => `<div title="${c}" style="
display: inline-block;
margin-right: 3px;
width: 33px;
height: 33px;
background: ${c};
"></div>`)}`;
}
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.
