2b:null 2c:["$","title",null,{"children":"Polygones en mouvement | ToulouseDataviz | Observable"}] 31:[{"id":"2cd677512e71857fee35e8b00b59bfc9c90f3dfaeb070caba04064109c727785998c4a6d7bb3feff1af6dcbf539532ce6bb819aae35a14750ef1670468bb3d91","href":"https://static.observableusercontent.com/files/2cd677512e71857fee35e8b00b59bfc9c90f3dfaeb070caba04064109c727785998c4a6d7bb3feff1af6dcbf539532ce6bb819aae35a14750ef1670468bb3d91","name":"département_animation.geo_deplacement_ld.geojson","type":"application/geo+json","lastModified":1740148076152.487,"size":190055},{"id":"6850594e3b20296da1f594f545229260859dad8a8da4476adfaa25518cee5269978aaa06ef3fc0f52c9f937dacdec848aa1c8c672c6a40e64b9160ee2a8c7123","href":"https://static.observableusercontent.com/files/6850594e3b20296da1f594f545229260859dad8a8da4476adfaa25518cee5269978aaa06ef3fc0f52c9f937dacdec848aa1c8c672c6a40e64b9160ee2a8c7123","name":"département_animation.geo_ld.geojson","type":"application/geo+json","lastModified":1740148079535.52,"size":84413}] 2f:{"id":"d78351cbe92c9e84","slug":"polygones-en-mouvement","title":"Polygones en mouvement","thumbnail":"2016f83516fb37d43362e6f586582133d93c748ed46e4cdde2af3fb6d77b0715","access_level":"unlisted","create_time":"$D2025-02-21T13:52:53.268Z","update_time":"$D2025-02-21T16:01:42.439Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":133,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Polygones en mouvement","cells":[{"id":0,"value":"md`# Polygones en mouvement`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`\n#### Voir la région Occitanie respirer. \n- Basé le projet [Hello Polygon Morphing](https://observablehq.com/@jwolondon/morphing) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof rStyle = Inputs.radio([\"Solid\", \"Sketchy\"], {\n label: \"Render style\",\n value: \"Sketchy\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof t = Scrubber(\n [...Array(20).keys()]\n .map((i) => i * 0.05)\n .concat([...Array(19).keys()].reverse().map((i) => i * 0.05)),\n {\n initial: 0,\n delay: 100,\n loop: true,\n loopDelay: 10\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"{\n const r = setupRenderer(500, 400);\n if (t === 1) {\n r.polygon(departements_stop);\n } else {\n intGeoShapes.forEach((shape) => r.polygon(shape));\n }\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"#### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"departements_start = FileAttachment(\n \"département_animation.geo_ld.geojson\"\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"deptCoords_start = {\n const proj = d3.geoTransverseMercator().rotate([2, 0]);\n const geoCoords = departements_start.features.map(getFeaturePoly).flat();\n const coords = geoCoords.map((feat) => feat.map(proj));\n const xDomain = d3.extent(coords.flat().map(([x, y]) => x));\n const yDomain = d3.extent(coords.flat().map(([x, y]) => y));\n const pad = (1 - (yDomain[1] - yDomain[0]) / (xDomain[1] - xDomain[0])) / 2;\n const xSc = d3.scaleLinear().domain(xDomain).range([0, 1]);\n const ySc = d3\n .scaleLinear()\n .domain(yDomain)\n .range([pad, 1 - pad]);\n return coords.map((feat) => feat.map(([x, y]) => [xSc(x), ySc(y)]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"departements_stop = FileAttachment(\"département_animation.geo_deplacement_ld.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"deptCoords_stop = {\n const proj = d3.geoTransverseMercator().rotate([2, 0]);\n const geoCoords = departements_stop.features.map(getFeaturePoly).flat();\n const coords = geoCoords.map((feat) => feat.map(proj));\n const xDomain = d3.extent(coords.flat().map(([x, y]) => x));\n const yDomain = d3.extent(coords.flat().map(([x, y]) => y));\n const pad = (1 - (yDomain[1] - yDomain[0]) / (xDomain[1] - xDomain[0])) / 2;\n const xSc = d3.scaleLinear().domain(xDomain).range([0, 1]);\n const ySc = d3\n .scaleLinear()\n .domain(yDomain)\n .range([pad, 1 - pad]);\n return coords.map((feat) => feat.map(([x, y]) => [xSc(x), ySc(y)]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"#### Fonctions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"function getFeaturePoly(feat) {\n if (feat.geometry.type === \"MultiPolygon\") {\n const maxPoly = ([aMax, coords], cs) => {\n const area = d3.polygonArea(cs.flat());\n return area > aMax ? [area, cs] : [aMax, coords];\n };\n return feat.geometry.coordinates.reduce(maxPoly, [0, []])[1];\n }\n return feat.geometry.coordinates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"intGeoShapes = flubber.interpolateAll(deptCoords_start, deptCoords_stop, {\n string: false,\n single: true\n})(t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function setupRenderer(w = 1000, h = 200) {\n return new Renderer(w, h, rStyle === \"Solid\" ? \"SVG\" : \"roughSVG\")\n .fit(\n [\n [0, 0],\n [1, 1]\n ],\n 5\n )\n .fill(\"rgb(230,150,100)\")\n .stroke(\"black\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"#### Librairies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"flubber = require(\"flubber\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"import { Renderer } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"