pal100 = [
"#ff564e", //rouge 0
"#ff7aad", //rose 1
"#522673", //mauve 2
"#0042eb", //bleu 3
"#5cd49e", //vert 4
"#ffb322", //jaune 5
"#4f4f4f", //gray 6
]
pal60 = [
"#ff9a96", //rouge 0
"#ffb0cf", //rose 1
"#987cac", //mauve 2
"#678ef3", //bleu 3
"#9ee5c5", //vert 4
"#ffe597", //jaune 5
"#8a8a8a", //gray 6
]
size = width
domainF1A = ["Bi/pansexuelle", "Homosexuelle", "Hétérosexuelle"]
domainF1B = ["Pour le même sexe", "Pour les deux sexes", "Pour l'autre sexe"]
rangeF1A = [pal60[4], pal100[4], "#ededed" ]
rangeF1B = [pal60[5], pal100[5], "#ededed" ]
df2 = FileAttachment("n632_2@4.csv").csv({typed:true})
domainF2 = ["Pansexuel", "Bisexuel", "Homosexuel", "Autres", "Hétérosexuel"]
rangeF2 = ["#ffccc9", pal60[0], pal100[0], pal100[3], "#ededed" ]
df3= FileAttachment("n632_3@10.csv").csv({typed: true})
filterLegend = (domain, range) => {
const value = new Map(domain.map(d => [d, true]));
const _set = () => set(node, [...value].filter(d => d[1]).map(d => d[0]));
const oninput = e => (value.set(e.target.id, e.target.checked), _set());
const node = htl.html`<div style="font-family: var(--sans-serif); font-size: calc(8px + 0.45vw); display: flex; flex-wrap: wrap; min-height: 33px; align-items: center;">
${domain.map((d, i) => htl.html`<div style="display: flex; padding-right:10px">
<input type="checkbox" id="${d}" name="${d}" checked style="accent-color: ${range[i]}" oninput=${oninput}>
<label for="${d}">${d}</label>
</div>`)}
</div>`;
_set();
return node;
}
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
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.
