29:null 2a:["$","title",null,{"children":"Occupation du Sol | Antoine RICHARD | Observable"}] 2f:T91e,chart = { 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("y", height) .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})`) //.attr("transform", `translate(0,${550})`) .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":"7dbcea20cbc9da3e7b4269b73360420ef509fd9cf853d83e4367d1407ac9b8d201782fbdc5065d100df1a91c45ad1c0d8352440bdf26adb5322664776db34976","href":"https://static.observableusercontent.com/files/7dbcea20cbc9da3e7b4269b73360420ef509fd9cf853d83e4367d1407ac9b8d201782fbdc5065d100df1a91c45ad1c0d8352440bdf26adb5322664776db34976","name":"ocs_niv2_ocs@1.csv","type":"text/csv","lastModified":1678439235130.624,"size":1132},{"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":1678181083179.257,"size":21586}] 2d:{"id":"54784c57efcd3ac6","slug":null,"title":"Occupation du Sol","thumbnail":"bf1a174099058658131e1867e7c0a86d2f4d8ba3a97c86c1f1d2114c3face2cc","access_level":"public","create_time":"$D2023-03-06T15:24:14.890Z","update_time":"$D2023-03-13T14:34:16.913Z","view_time":null,"first_public_time":"$D2023-03-06T15:24:14.890Z","fork":{"id":"ced86bbc7a42e1ad","slug":null,"title":"insee","owner":{"id":"f2627a0d9cb4da87","login":"antoine-richard","name":"Antoine RICHARD"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f2627a0d9cb4da87","login":"antoine-richard","name":"Antoine RICHARD","avatar_url":"https://avatars-next.observableusercontent.com/370dcc1274e6fc8b1004e130e16fb26f4572817167ccd61d6f4ac37109294188","tier":"starter_2024"},"version":1799,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"73dad1462e136558","login":"antoine-richard","name":"Antoine RICHARD","avatar_url":"https://avatars-next.observableusercontent.com/370dcc1274e6fc8b1004e130e16fb26f4572817167ccd61d6f4ac37109294188","tier":null}],"members":[{"type":"individual","id":"73dad1462e136558","login":"antoine-richard","name":"Antoine RICHARD","avatar_url":"https://avatars-next.observableusercontent.com/370dcc1274e6fc8b1004e130e16fb26f4572817167ccd61d6f4ac37109294188","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Occupation du Sol","cells":[{"id":0,"value":"# Occupation du Sol","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 typo<>'LIB_10_N2'\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":1270,"value":"

Données en valeurs absolues empliées

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1555,"value":"InputData.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"addTooltips(Plot.plot({\n width : 1000,\n height: 350,\n marginLeft: 200,\n color: {range: [\"#934fd3\", \"#c9d30e\", \"#ffd37f\", \"#ef79c8\", \"#917376\",\"#e4dbd3\", \"#9ac243\", \"#46a101\", \"#34c924\", \"#f8f4bc\",\"#e85444\", \"#a6a6a6\", \"#00cc99\", \"#7bd6ff\", \"#ffef44\"], type: \"categorical\", legend: true},\n marks: [\n Plot.barX(InputData.slice(1), {x: \"F\", y: \"A\", title: \"F\", sort: {y: \"x\", reverse: true}, fill:\"E\"}),\n Plot.ruleX([0])\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":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":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})\nmargin = ({top: 10, right: 0, bottom: 50, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"height = 600","pinned":false,"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(\"ocs_niv2_ocs@1.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":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":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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}}
2e:"$2d:body"
</article></body></html>