2f:T10bc,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/choropleth function Choropleth_test1(data, { id = d => d.id, // given d in data, returns the feature id value = () => undefined, // given d in data, returns the quantitative value title, // given a feature f and possibly a datum d, returns the hover text format, // optional format specifier for the title scale = d3.scaleSequential, // type of color scale domain, // [min, max] values; input of color scale range = d3.interpolateBlues, // output of color scale width = 640, // outer width, in pixels height, // outer height, in pixels projection, // a D3 projection; null for pre-projected geometry features, // a GeoJSON feature collection featureId = d => d.id, // given a feature, returns its id borders, // a GeoJSON object for stroking borders outline = projection && projection.rotate ? {type: "Sphere"} : null, // a GeoJSON object for the background unknown = "#ccc", // fill color for missing data fill = "white", // fill color for outline stroke = "white", // stroke color for borders strokeLinecap = "round", // stroke line cap for borders strokeLinejoin = "round", // stroke line join for borders strokeWidth, // stroke width for borders strokeOpacity, // stroke opacity for borders } = {}) { // Compute values. const N = d3.map(data, id); const V = d3.map(data, value).map(d => d == null ? NaN : +d); const Im = new d3.InternMap(N.map((id, i) => [id, i])); const If = d3.map(features.features, featureId); // Compute default domains. if (domain === undefined) domain = d3.extent(V); // Construct scales. const color = scale(domain, range); if (color.unknown && unknown !== undefined) color.unknown(unknown); // Compute titles. if (title === undefined) { format = color.tickFormat(100, format); title = (f, i) => `${f.properties.name}\n${format(V[i])}`; } else if (title !== null) { const T = title; const O = d3.map(data, d => d); title = (f, i) => T(f, O[i]); } // Compute the default height. If an outline object is specified, scale the projection to fit // the width, and then compute the corresponding height. if (height === undefined) { if (outline === undefined) { height = 400; } else { const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); height = dy; } } // Construct a path generator. const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); if (outline != null) svg.append("path") .attr("fill", fill) .attr("stroke", "currentColor") .attr("d", path(outline)); svg.append("g") .selectAll("path") .data(features.features) .join("path") .attr("fill", (d, i) => color(V[Im.get(If[i])])) .attr("d", path) .attr("class", "bubble") .append("title") .text((d, i) => title(d, Im.get(If[i]))); if (borders != null) svg.append("path") .attr("pointer-events", "none") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("d", path(borders)); // ADD TOOLTIP const tooltip = svg.append("g").attr("class", "tooltip"); svg.selectAll(".bubble") .on("mouseover", function(d) { tooltip.call( callout, "test" ); d3.select(this) .attr("stroke", "black") .raise(); }) .on("mousemove", function() { tooltip.attr( "transform", `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})` ); }) .on("mouseout", function() { tooltip.call(callout, null); d3.select(this) .attr("stroke", null) .lower(); }); return Object.assign(svg.node(), {scales: {color}}); }30:[{"id":"f3ac7cc0198eb8dea89e32ec46122c9002b608bee14a700d0035143384d8b75a68a1a2d6647fbd5a88229bfbf1b6d60ebfe864ca314b1989cadf5d39a09abf4a","href":"https://static.observableusercontent.com/files/f3ac7cc0198eb8dea89e32ec46122c9002b608bee14a700d0035143384d8b75a68a1a2d6647fbd5a88229bfbf1b6d60ebfe864ca314b1989cadf5d39a09abf4a","name":"data_all_variables@1.csv","type":"text/csv","lastModified":1673441823359.786,"size":11376931},{"id":"741b61c062147e43695c992e7b568c5fd48a5567acafef0e48aaebcb9e58b47d8d99e065798b0aed63e6401f242c2834e1b6e1106e6156d2da20947affad9e75","href":"https://static.observableusercontent.com/files/741b61c062147e43695c992e7b568c5fd48a5567acafef0e48aaebcb9e58b47d8d99e065798b0aed63e6401f242c2834e1b6e1106e6156d2da20947affad9e75","name":"indices.csv","type":"text/csv","lastModified":1673441823359.786,"size":8246787},{"id":"3aa52297fac727fd5cbbb0732f2822f11a2b6831f19d24f005979e87ae1bf2e1d935233823fa0a5501f24249ee9f30a0cccf3fba247f08918ee99fa97d22fefe","href":"https://static.observableusercontent.com/files/3aa52297fac727fd5cbbb0732f2822f11a2b6831f19d24f005979e87ae1bf2e1d935233823fa0a5501f24249ee9f30a0cccf3fba247f08918ee99fa97d22fefe","name":"data_all_variables.csv","type":"text/csv","lastModified":1673441823359.786,"size":11603716}] 2d:{"title":"Choropleth test on France maps","cells":[{"id":294,"value":"# Choropleth test on France maps\n","pinned":false,"hidden":false,"mode":"md"},{"id":919,"value":"// Source: https://observablehq.com/@mbostock/dashboard\ngrid = html`

\n \n

${viewof current_date}

${dep}

${variable}

${chart}

`\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"viewof dep = {\n let s = Inputs.select(list_dep.sort(), {label: 'Selectionner un département ', width: 100, value: '31'})\n s.style.setProperty('--label-width', \"auto\")\n s.style.setProperty('max-width', \"300px\")\n return s\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"viewof variable = {\n let s = Inputs.select([\"nbannonces\", \"prixm2moy\", \"\tsurfacemoy\"], {label: 'Selectionner une variable ', width: 100, value: 'nbannonces'})\n s.style.setProperty('--label-width', \"auto\")\n s.style.setProperty('max-width', \"300px\")\n return s\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof current_date = Scrubber(dates, \n{\n autoplay: false,\n loop: false,\n delay: 100,\n format: current_date => current_date.toLocaleString(\"fr\", {month: \"long\", year: \"numeric\"})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"## Visualisation de ${variable} pour un département en ${current_date.toLocaleString(\"fr\", {month: \"long\", year: \"numeric\"})}.","pinned":false,"hidden":false,"mode":"md"},{"id":291,"value":"key = Legend(chart.scales.color, {title: `${variable} par ville`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"chart = Choropleth_test(data_filtered, {\n id: d => d.city_cog,\n value: d => d.value,\n scale: d3.scaleSequential,\n domain: [min_value, max_value],\n range: d3.interpolateYlOrBr,\n features: communes,\n width: width,\n height: height,\n projection: projection\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"Un essai peu convaincant pour visualiser le département en utilisant Plot.","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"Plot.plot({\n width: width,\n height: height,\n projection: projection,\n marks: [\n Plot.geo(communes),\n Plot.text(\n communes.features.map((f) => ({centroid: d3.geoCentroid(f), name: f.properties.NOM})),\n {\n x: (d) => d.centroid[0], // longitude\n y: (d) => d.centroid[1], // latitude\n text: \"name\",\n textAnchor: \"middle\",\n stroke: \"white\",\n fill: \"black\"\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"## Visualisation de la population des villes","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"chart_pop = Choropleth_test(communes.features, {\n id: d => d.id,\n value: d => d.properties.POPULATION,\n scale: d3.scaleLog,\n domain: [min_pop, max_pop],\n range: d3.schemePastel2,\n features: communes,\n width: width,\n height: height,\n projection: projection\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"url = `https://minio.lab.sspcloud.fr/projet-cartiflette/diffusion/shapefiles-test/2022/COMMUNE_ARRONDISSEMENT/departement/${dep}/geojson/raw.geojson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"height = 610","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"projection = d3.geoMercator().fitExtent([[0, 0], [975, 610]], communes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"list_dep = Array.from({length: 95}, (value, index) => index + 1)\n .map(number => number < 10 ? `0${number}` : `${number}`)\n .concat(['2A', '2B', '971', '972', '973', '974', '976'])\n .filter(number => number !== '20')","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"data_departement = d3.json(`https://minio.lab.sspcloud.fr/projet-cartiflette/diffusion/shapefiles-test/2022/COMMUNE/departement/01/geojson/raw.geojson`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"data = (await FileAttachment(\"data_all_variables@1.csv\").csv()).map(d => ({...d, nbannonces: +d.nbannonces, prixm2moy: +d.prixm2moy, surfacemoy: +d.surfacemoy}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"communes = d3.json(url);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"communes.features = communes.features.map(d => {\n d.id = d.properties.INSEE_COM\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"max_pop = Math.log(Math.max(...communes.features.map(d => d.properties.POPULATION)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"min_pop = Math.log(Math.min(...communes.features.map(d => d.properties.POPULATION)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"min_value = Math.min(...data_filtered.map(d => d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"max_value = Math.max(...data_filtered.map(d => d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"dates = Array.from({length: 53}, (_, i) => {\n const date = new Date(2018, 0, 1, 2);\n date.setDate(1);\n date.setMonth(i)\n return date;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"**Filtering the dataset**","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"db = DuckDBClient.of({\n data: await FileAttachment(\"indices.csv\").csv(),\n data_all: await FileAttachment(\"data_all_variables.csv\").csv()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"data_filtered = await db.query(`\nSELECT date, NOM, city_cog, strate, ${variable} AS value\nFROM data_all\nWHERE city_cog LIKE '${dep}%' AND date = '${current_date.toISOString().slice(0, 10)}'\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"viewof extrait = {\n return Inputs.table(data_filtered, {height: 200, layout: \"auto\", maxWidth: 500})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"import {Choropleth} from \"271261860678801f\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"N = d3.map(data_filtered, d => d.id);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"V = d3.map(data_filtered, d => d.value).map(d => d == null ? NaN : +d);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":741,"value":"Im = new d3.InternMap(N.map((id, i) => [id, i]));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"communes.features","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"If = communes.features.map(d => d.id);","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"title = (f, i) => `${f.properties.name[i]}\\n${V[i]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"chart = {\n // top level SVG\n const svg = d3.create(\"svg\").attr(\"viewBox\", `0 0 ${mapWidth} ${mapHeight}`);\n\n // grouping element\n const g = svg.append('g');\n\n const baseGroup = g.append('g').attr('class', 'base');\n\n // the base county layer\n baseGroup\n .append(\"path\")\n .datum(socal)\n .attr(\"fill\", \"#dddddd\")\n .attr(\"d\", path);\n\n baseGroup\n .append(\"path\")\n .datum(mexico)\n .attr(\"fill\", \"#eeeeee\")\n .attr(\"d\", path);\n\n // for the roads\n const roadsGroup = g.append('g').attr('class', 'roads');\n\n roadsGroup\n .selectAll('.road')\n .data(roads.features)\n .join('path')\n .attr('class', 'road')\n .attr('fill', 'none')\n .attr('opacity', 0.5)\n .attr('stroke', \"#ffffff\")\n .attr('stroke-width', 1)\n .attr('d', path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n // .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"lightgrey\")\n .attr(\"stroke-width\", \"0.5px\");;\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}