2b:null 2c:["$","title",null,{"children":"Topojson | Anders | Observable"}] 31:[] 2f:{"id":"cc45e1ff20169d48","slug":"topojson","title":"Topojson","thumbnail":"f732050d89ceb5bd35691bb0ee6045f23d86bb7c6863759a1b6bf0ffeec30c86","access_level":"public","create_time":"$D2019-05-08T13:09:48.586Z","update_time":"$D2023-02-20T11:32:53.774Z","view_time":null,"first_public_time":"$D2019-05-09T05:58:14.717Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"185626bcadc26005","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":"starter_2024"},"version":431,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null}],"members":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"04f4b394708037c7","slug":"heig-visdom-2020","title":"HEIG-visdom-2020","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"type":"notebook","body":{"title":"Topojson","cells":[{"id":0,"value":"md`# Topojson\n\nLe format **topojson** est une manière de représenter des données géographiques, comme le **geojson**. Il prends beaucoup moins de place que ce dernier, pour la même quantité d'information.\n\n## Pourquoi?\n\nPrenons les contours des cantons de Vaud et de Fribourg\n\n[Docs](https://www.npmjs.com/package/topojson)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"md`Dans l'exemple ci-dessus, les deux cantons ont des points en commun (en rouge). Au format **geojson**, ceux-ci sont présents aussi bien dans les coordonnées de Vaud que dans celles de Fribourg.\n\nVoici les deux cantons en **geojson**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"VD = findCantonById(22)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"FR = findCantonById(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md`Le format **topojson** permet de créer des fichiers plus petits en regroupant les points en **arcs**, c'est à dire en lignes. Les géométries ne sont plus une série de points mais un ensemble d'**arcs**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"md`## Un exemple de topojson`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"topojsonCH = fetch(\n 'https://raw.githubusercontent.com/idris-maps/swiss-geodata-2018/master/data/switzerland.topo.json'\n).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`Le fichier ci-dessus est un fichier **topojson** contenant tous les cantons, districts, communes et lacs de Suisse.\n\nLa clé **arcs** contient toutes les lignes qui composent ces géométries.\n\nLa clé **objects** contient les différents **features**. Mais contrairement au format **geojson**, les géométries sont ici définient en **arcs** (en lignes) plutôts qu'en coordonnées (en points).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"md`## Convertir entre geojson et topojson\n\nNous utilisons la libraire [topojson](https://github.com/topojson/topojson)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"topojson = require('topojson')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"md`## De topojson à geojson\n\nLa fonction **.feature()** permet d'extraire une collection **geojson** d'un **topojson**.\n\nIci les cantons:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"cantons = topojson.feature(topojsonCH, topojsonCH.objects.cantons)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"md`**.feature()** prends deux arguments:\n\n- le topojson (ici **topojsonCH**)\n- les objets que nous souhaitons en tirer (ici les cantons)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"md`## De geojson à topojson\n\nLa fonction **.topology()** prends une liste de **geojson** et retourne un **topojson**.\n\nLe topojson ci-dessous contient les deux cantons de Vaud et de Fribourg:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"topojson_VD_FR = topojson.topology({VD, FR })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"md`## Extraire les lignes d'un topojson\n\nLa fonction **.mesh()** prends un topojson et retourne un geojson de type **MultiLineString**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"mesh = topojson.mesh(topojson_VD_FR)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"md`\n**.mesh()** peut returner uniquement les lignes \"interieures\". Il nous faut un objet topojson qui contient tous les polygones. Il est passé en 2ème argument. Le 3ème est une fonction qui filtre les arcs en fonction des polygones adjacents, représentés par \"a\" et \"b\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"meshInterior = {\n const topo = topojson.topology({ les_deux: { type: 'FeatureCollection', features: [VD, FR] } })\n return topojson.mesh(topo, topo.objects.les_deux, (a, b) => a !== b)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"md`## Mettre ensemble deux géométries\n\nAvec la fonction **.merge()** nous pouvons créer une géométrie qui est une union des objets d'un topojson`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"union = topojson.merge(topojson_VD_FR, [topojson_VD_FR.objects.VD, topojson_VD_FR.objects.FR])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"html`

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"findCantonById = id => cantons.features.find(d => d.properties.KTNR === id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"getPoints = ({ geometry }) => R.splitEvery(2, R.flatten(geometry.coordinates))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"commonPoints = {\n const vdPoints = getPoints(VD)\n const frPoints = getPoints(FR)\n const pointIsInVd = ([x, y]) => Boolean(vdPoints.find(([a, b]) => x === a && y === b))\n return frPoints.filter(pointIsInVd)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"drawPoints = (points, color) => points.map(([x, y]) => svg``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"HEIGHT = {\n const [xMin, yMin, xMax, yMax] = bbox\n return width * ((yMax - yMin) / (xMax - xMin))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"yScale = d3.scaleLinear().domain([1115137, 1206228]).range([HEIGHT, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"xScale = d3.scaleLinear().domain([2494319, 2595535]).range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"import {R} from \"@itacirgabral/ramda\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"bbox = [2494319, 1115137, 2595535, 1206228]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"p = projection([2494319, 1115137, 2595535, 1206228], width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"projection = ([xMin, yMin, xMax, yMax], WIDTH) => {\n const HEIGHT = width * ((yMax - yMin) / (xMax - xMin))\n return d3.geoTransform({\n point: function(x, y) {\n this.stream.point(\n (x - xMin) / (xMax - xMin) * WIDTH,\n HEIGHT - (y - yMin) / (yMax - yMin) * HEIGHT\n )\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"