2f:T503,plotFr = Plot.plot({ width, height: width>1000 ? 0.6*width : width>500 ? 0.7*width : 350, marginLeft: width>1000 ? 60 : width>500 ? 50 : 30, marginBottom: width>1000 ? 90 : width>500 ? 60 : 30, marginTop: width>1000 ? 70 : width>500 ? 40 : 30, marginRight: width>1000 ? 50 : width>500 ? 40 : 20, y: {label: "En milllions", labelArrow:false, grid:true, ticks:10, domain:[0,20]}, x: {label: "Nombre de personnes", axis:false}, color: {legend:false,domain: ["Ménages","Habitants"] ,range: [pal100[3],pal100[0]]}, fx: {label:null}, fx: {label:null}, marks: [ Plot.axisFx({ anchor: "bottom", dy: width>=500 ? 5 : 0, label: "Nombre de personnes", }), Plot.barY(filterDf2, {filter: d=> legendFr.includes(d.typeFr) ,fx:"tailleFr", x:"typeFr", y:d=>d.n/1000000, fill:"typeFr", stroke: "#222330",sort: {x:"x", reverse:true},ry1:10, fillOpacity:1, channels: { taille: {value:"tailleFr", label: "Personnes:"}, type: {value: "typeFr", label:""}, n: {value: d=> d.n/1000000,label:""} }, tip: {format:{x:false,fx:false,y:false,fill:false, type:true,taille:true, n: d=> `${d.toFixed(1).replace(".",",")} millions`}, strokeWidth:0} }), Plot.ruleY([0]) ] }) 30:T1029,boxPlotFr = htl.html `

${viewof legendFr}

${plotFr}

Champ: France entière.

Source: Insee, RP2022 exploitation complémentaire.

`31:T8fe, 32:T6d6,filterLegend = ( domain, range, subdomain = null ) => { const defaultChecked = subdomain === null ? domain : subdomain; const value = new Map( domain.map(d => [d, defaultChecked.includes(d)]) ); 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 selectAll = () => { domain.forEach(d => value.set(d, true)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = true); _set(); }; const selectNone = () => { domain.forEach(d => value.set(d, false)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = false); _set(); }; const node = htl.html`

${domain.map((d, i) => htl.html`

${d}

`)}

`; _set(); return node; }; 33:[] 2d:{"title":"Taille des ménages (25036)","cells":[{"id":0,"value":"# Taille des ménages (25036)","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#222330\", //black\n \"#d1d1d1\" //gris\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"df = d3.csv(\"https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/fabstat/menages/menage_graph.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"domainFr= [\"Ménages\",\"Habitants\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"range = [pal100[3],pal100[0]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof legendFr = legend(domainFr,range)","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"filterDf=df.filter(d=> legendFr.includes(d.typeFr))","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"filterDf2= filterDf.length!=0 ? df.filter(d=> legendFr.includes(d.typeFr)) : [{tailleFr:1, n:0}, {tailleFr:2, n:0}, {tailleFr:3, n:0}, {tailleFr:4, n:0}, {tailleFr:5, n:0}, {tailleFr: \"6 ou plus\", n:0}, ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"### CSS ET INPUT","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":86,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"import {legend, cssLegend} from '@wsthevenin/mtinput'","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}