Public
Edited
Jun 16
Insert cell
Insert cell
workbook = FileAttachment("reponses-31052025.xlsx").xlsx()
Insert cell
workbook.sheetNames
Insert cell
Insert cell
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data
X*
Y*
Color
Size
Facet X
Facet Y
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// traitement (data);
let tranchesAgeG0702 = null;
let facetG07Q02 = null;
let filteredData = data.filter((d) => {
if (tranchesAgeG0702 && d.group !== tranchesAgeG0702) {
return false;
}
if (d['G07Q02'] == undefined) {
return false;
}
if (d.group == undefined) {
return false;
}
return true;
})
let facetQuestion = {}
if (facetG07Q02) {
facetQuestion = {
data: filteredData,
y: facetG07Q02,
label : "",
marginRight: 200
}
}

console.log(filteredData);
return Plot.plot({
color: { legend: false , scheme : "blues"},
title: "Combien de fois avez-vous été sensibilisé aux effets des réseaux sociaux hors cadre scolaire ?",
width,
marginBottom: 50,
marginTop: 50,
y: normalizeG07Q02
? { tickFormat: "%", label: "réponses (%)" }
: { tickFormat: Math.abs, label: "nombre de réponses" },
x: {label : tranchesAgeG0702 ? "Nombre de fois - " + tranchesAgeG0702 + " ans" : 'Nombre de fois - Toutes les tranches d\'âge', domain : [1, 2, 3, 4, '5 à 10', '+ 10']},
facet: facetQuestion,
marks: [
Plot.barY(
filteredData,
Plot.groupX({ y: normalizeG07Q02 ? "proportion-facet" : "count" }, { x: "G07Q02", fill: "G07Q02", tip: true })
),
Plot.text(filteredData,
Plot.map(
{text: normalizeG07Q02 ? (values) => values.map(d3.format(".1%")) : (values) => values},
Plot.groupX(
{ y: normalizeG07Q02 ? "proportion-facet" : "count", text : normalizeG07Q02 ? "proportion-facet" : "count"},
{ x: "G07Q02", dy: -8 }
)
)
),
Plot.ruleY([0])
]
})
}
Insert cell
Insert cell
Insert cell
chart = {
let filtreData = filtre('G07Q03');

const test = d3.flatRollup(filtreData, (D) => D.length, (d) => d['G07Q03'], (d) => d['group']);
//console.log(test)
const donnee = test.map(([Reponse, Tranche, Value]) => ({Reponse, Tranche, Value}))
const donneeTriee = donnee.slice().sort((a, b) => d3.ascending(a.Reponse, b.Reponse) || d3.ascending(a.Tranche, b.Tranche))
const xy = (options) => marimekko({...options, x: 'Reponse', y: "Tranche", value: "Value"});
return Plot.plot({
width,
height: 960,
marginRight:50,
label: null,
x: {percent: true, ticks: 10, tickFormat: (d) => d === 100 ? `100%` : d},
y: {percent: true, ticks: 10, tickFormat: (d) => d === 100 ? `100%` : d},
marks: [
Plot.frame(),
Plot.rect(donneeTriee, xy({fill: "Tranche", fillOpacity: 0.5})),
Plot.text(donneeTriee, xy({text: d => ["Nombre de réponse : ", d.Value].join(" ")})),
Plot.text(donneeTriee, Plot.selectMaxX(xy({z: "Tranche", text: "Tranche", anchor: "right", textAnchor: "start", lineAnchor: "bottom", dx: 6}))),
Plot.text(donneeTriee, Plot.selectMaxY(xy({z: 'Reponse', text: 'Reponse', anchor: "top", lineAnchor: "bottom", dy: -6})))
]
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function cacherSansReponse(nomFiltre) {
data.forEach(function (element) {
if (element[nomFiltre] == "N/A") {element[nomFiltre] = "Sans réponse"}
});
return data
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ns = Inputs.text().classList[0]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function marimekko({
x,
y,
z,
value = z,
anchor = "middle",
inset = 0.5,
...options
} = {}) {
const stackX = /\bleft$/i.test(anchor) ? Plot.stackX1 : /\bright$/i.test(anchor) ? Plot.stackX2 : Plot.stackX;
const stackY = /^top\b/i.test(anchor) ? Plot.stackY2 : /^bottom\b/i.test(anchor) ? Plot.stackY1 : Plot.stackY;
const [Xv, setXv] = Plot.column(value);
const {x: X, x1, x2, transform: tx} = stackX({offset: "expand", y, x: Xv});
const {y: Y, y1, y2, transform: ty} = stackY({offset: "expand", x, y: value});
return Plot.transform({x: X, x1, x2, y: Y, y1, y2, z, inset, frameAnchor: anchor, ...options}, (data, facets) => {
const I = d3.range(data.length);
const X = Plot.valueof(data, x);
const Z = Plot.valueof(data, value);
const sum = d3.rollup(I, I => d3.sum(I, i => Z[i]), i => X[i]);
setXv(I.map(i => sum.get(X[i])));
tx(data, facets);
ty(data, facets);
return {data, facets};
});
}
Insert cell

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.
Learn more