29:null 2a:["$","title",null,{"children":"Occupation du Sol (sans la bug Query) | Alain Roan | Observable"}] 2f:T966,chart = { const height = 800; const GroupedMax = d3.max(csv, (row) => d3.max(subgroups.map((col) => row[col])) ); const Stacked = d3.max(data, (y) => d3.max(y, (d) => d[1])); const margin = { left: 30, rigth: 0, top: 0, bottom: 20 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const subgroup = svg .selectAll(".subgroup") .data(data) .join("g") .attr("class", "subgroup") .attr("fill", (d, i) => color(i)); const rect = subgroup .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0); subgroup.on("mouseenter", function () { svg.selectAll(".subgroup").transition().style("fill-opacity", 0.15); d3.select(this).transition().style("fill-opacity", 1); }); subgroup.on("mouseleave", function () { svg.selectAll(".subgroup").transition().style("fill-opacity", 1); }); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .style("font-size", "13px") .call(xAxis); const yAxisContainer = svg .append("g") .attr("transform", `translate(${margin.left},0)`) .style("font-size", "13px") .call(yAxis); /* svg .append("g") .attr("transform", `translate(${width + margin.left - 175},0)`) .call(legend); */ function transitionGrouped() { y.domain([0, groupedMax]); yAxisContainer.transition().duration(500).delay(500).call(yAxis); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(i) + (x.bandwidth() / subgroups.length) * d[2]) .attr("width", x.bandwidth() / subgroups.length) .transition() .attr("y", (d) => y(d[1] - d[0])) .attr("height", (d) => y(0) - y(d[1] - d[0])); } function transitionStacked() { y.domain([0, stackedMax]); yAxisContainer.transition().duration(500).call(yAxis); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function update(layout) { if (layout === "stacked") transitionStacked(); else transitionGrouped(); } return Object.assign(svg.node(), { update }); }30:[{"id":"e370756317305cd60f2342199495409d67f4cf4e5838fe436691302a0d402ae8927627f7adccc7b4df0be1e42c9d397328c2c7d1df82538f8a4857f8a594b6a8","href":"https://static.observableusercontent.com/files/e370756317305cd60f2342199495409d67f4cf4e5838fe436691302a0d402ae8927627f7adccc7b4df0be1e42c9d397328c2c7d1df82538f8a4857f8a594b6a8","name":"TABLE_ETAT-EVOLUTIONS_2010_2019_NIV2_DEPARTEMENTS@2.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1678369872227.219,"size":21586},{"id":"561e65c94ad02520ffb44d78ff6ddbb37240d5cb93aa8e8f0728a1b3dacdb5d7783091c8533432d6e967becbdea4a8d20860115e1a4c28e707035f549239f1c5","href":"https://static.observableusercontent.com/files/561e65c94ad02520ffb44d78ff6ddbb37240d5cb93aa8e8f0728a1b3dacdb5d7783091c8533432d6e967becbdea4a8d20860115e1a4c28e707035f549239f1c5","name":"scotus-opinions-4@2.csv","type":"text/csv","lastModified":1678369872227.219,"size":831}] 2d:{"id":"da49746e8cbd4e7c","slug":null,"title":"Occupation du Sol (sans la bug Query)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-03-09T13:51:12.227Z","update_time":"$D2023-03-15T09:06:39.772Z","view_time":null,"first_public_time":"$D2023-03-09T13:51:12.227Z","fork":{"id":"54784c57efcd3ac6","slug":null,"title":"Occupation du Sol","owner":{"id":"f2627a0d9cb4da87","login":"antoine-richard","name":"Antoine RICHARD"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f8fce27399341cf5","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":"starter_2024"},"version":1588,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null}],"members":[{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Occupation du Sol (sans la bug Query)","cells":[{"id":0,"value":"# Occupation du Sol (sans la bug Query)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"xls=FileAttachment(\"TABLE_ETAT-EVOLUTIONS_2010_2019_NIV2_DEPARTEMENTS@2.xlsx\").xlsx({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"InputData = xls.sheet(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"select A as DEPARTEMENT, E as Typo, F as SURF, D as code\n from InputData\n where DEPARTEMENT<>'NOM_DEP'\n group by DEPARTEMENT,Typo, SURF, D\n order by code ;","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"Query","database":"var:InputData"},{"id":1567,"value":"InputData.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"

Données en valeurs absolues empliées

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"addTooltips(\n Plot.plot({\n width: 1000,\n height: 350,\n marginLeft: 200,\n color: {\n range: [\n \"#934fd3\",\n \"#c9d30e\",\n \"#ffd37f\",\n \"#ef79c8\",\n \"#917376\",\n \"#e4dbd3\",\n \"#9ac243\",\n \"#46a101\",\n \"#34c924\",\n \"#f8f4bc\",\n \"#e85444\",\n \"#a6a6a6\",\n \"#00cc99\",\n \"#7bd6ff\",\n \"#ffef44\"\n ],\n type: \"categorical\",\n legend: true\n },\n marks: [\n Plot.barX(InputData.slice(1), { x: \"C\", y: \"A\", fill: \"E\", title: \"C\" }),\n Plot.ruleX([0])\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"

Données en valeurs absolues groupées

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"addTooltips(Plot.plot({\n width : 1000,\n height: 500,\n title:\"en valeurs absolues\",\n x: {axis: null, domain: Query.Typo},\n y: {tickFormat: \"s\"},\n color: {range: [\"#934fd3\", \"#c9d30e\", \"#ffd37f\", \"#ef79c8\", \"#917376\",\"#e4dbd3\", \"#9ac243\", \"#46a101\", \"#34c924\", \"#f8f4bc\",\"#e85444\", \"#a6a6a6\", \"#00cc99\", \"#7bd6ff\", \"#ffef44\"], type: \"categorical\", legend: true},\n facet: {data: Query, x: \"DEPARTEMENT\"},\n marks: [\n Plot.barY(Query, {\n x: \"Typo\",\n //x: Query.C, \n y: \"SURF\",\n title: \"Typo\",\n fill: \"Typo\", \n sort: Query.C\n }),\n Plot.ruleY([0])\n ]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"

Données en valeurs relatives (%)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1571,"value":"Plot.plot({\n width: 1000,\n height: 350,\n marginLeft: 200,\n color: {\n range: [\n \"#934fd3\",\n \"#c9d30e\",\n \"#ffd37f\",\n \"#ef79c8\",\n \"#917376\",\n \"#e4dbd3\",\n \"#9ac243\",\n \"#46a101\",\n \"#34c924\",\n \"#f8f4bc\",\n \"#e85444\",\n \"#a6a6a6\",\n \"#00cc99\",\n \"#7bd6ff\",\n \"#ffef44\"\n ],\n type: \"categorical\",\n legend: true\n },\n marks: [\n Plot.barX‹(InputData.slice(1), { x: \"C\", y: \"A\", fill: \"E\", title: \"C\" }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"viewof layout = {\n const form = html``;\n form.oninput = () => form.value = form.radio.value;\n form.onchange = () => { // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"chart.update(layout)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"viewof source = {\n const textarea = html`

\n${file}`;\n  textarea.style.display = \"block\";\n  textarea.style.boxSizing = \"border-box\";\n  textarea.style.width = \"calc(100% + 28px)\";\n  textarea.style.font = \"var(--mono_fonts)\";\n  textarea.style.minHeight = \"60px\";\n  textarea.style.border = \"none\";\n  textarea.style.padding = \"4px 10px\";\n  textarea.style.margin = \"0 -14px\";\n  textarea.style.background = \"rgb(247,247,249)\";\n  textarea.style.tabSize = 2;\n  textarea.oninput = () =>\n    (textarea.style.height = `${textarea.value.match(/^/gm).length * 21 +\n      8}px`);\n  textarea.oninput();\n  return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"file = FileAttachment(\"scotus-opinions-4@2.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"csv = d3.csvParse(source, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"groupName = csv.columns[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"groups = csv.map(d => d[groupName])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"subgroups = csv.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"data = d3.stack()\n  .keys(subgroups)(csv)\n  .map((data, i) => data.map(([y0, y1]) => [y0, y1, i])) // add an extra array element for the subgroup index","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"groupedMax = d3.max(csv, row => d3.max(subgroups.map(col => row[col])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"stackedMax = d3.max(data, y => d3.max(y, d => d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"x = d3.scaleBand()\n  .domain(d3.range(groups.length))\n  .rangeRound([margin.left, width - margin.right])\n  .padding(0.15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"y = d3.scaleLinear()\n  .domain([0, stackedMax])\n  .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"//color = d3.scaleOrdinal(d3.schemeSet2).domain(d3.range(subgroups.length))\ncolor = d3.scaleOrdinal([\"#e85444\", \"#ef79c8\", \"#934fd3\", \"#a6a6a6\", \"#9ac243\",\"#917376\", \"#e4dbd3\", \"#ffef44\", \"#ffd37f\", \"#c9d30e\",\"#46a101\", \"#34c924\", \"#f8f4bc\", \"#00cc99\", \"#7bd6ff\",\"#d63737\"]).domain(d3.range(subgroups.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"xAxis = d3.axisBottom(x)\n  .tickSize(0)\n  .tickPadding(8)\n  .tickFormat((d, i) => groups[i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"yAxis = d3.axisLeft(y).tickPadding(8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"legendBoxSize = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"legendPadding = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"legend = svg => {\n  const entry = svg\n    .append(\"g\")\n    .selectAll(\".entry\")\n    .data(subgroups)\n    .join(\"g\")\n    .attr(\n      \"transform\",\n      (d, i) => `translate(0,${(legendBoxSize + legendPadding) * i})`\n    )\n    .attr(\"class\", \"entry\");\n\n  entry\n    .append(\"rect\")\n    .attr(\"width\", legendBoxSize)\n    .attr(\"height\", legendBoxSize)\n    .attr(\"fill\", (d, i) => color(i));\n\n  entry\n    .append(\"text\")\n    .text(d => d)\n    .attr(\"x\", legendBoxSize + legendPadding)\n    .attr(\"y\", legendBoxSize / 2)\n    .attr(\"dy\", \"0.35em\")\n    .style(\"font\", \"13px sans-serif\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"margin = ({top: 20 + color.domain().length * (legendBoxSize + legendPadding), right: 50, bottom: 30, left: -30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"url = \"https://www.datagrandest.fr/data4citizen/d4c/api/records/1.0/search/?dataset=fr-200052264-gge-ocs-2010-d08&facet=lib_n1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"api = d3.json(url)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}}
2e:"$2d:body"
</article></body></html>