31:[{"id":"47e0fed21332c72d77f738196255c211127add8700592b3e1090ba9c8491f66d1432ff924b71286fac63a745328a1d04f56055a553533da0c242133ef0aa1b65","href":"https://static.observableusercontent.com/files/47e0fed21332c72d77f738196255c211127add8700592b3e1090ba9c8491f66d1432ff924b71286fac63a745328a1d04f56055a553533da0c242133ef0aa1b65","name":"47e0fed21332c72d77f738196255c211127add8700592b3e1090ba9c8491f66d1432ff924b71286fac63a745328a1d04f56055a553533da0c242133ef0aa1b65.jpeg","type":"image/jpeg","lastModified":1642094267593.311,"size":1793839},{"id":"93febf4cadfc2f138e4854996b60f04a6e2da8e71c69b0a52f82c498faf29463ad40b2dcb0c1ffa51d86bea700e371bfef640d6f04b950418cf212f24cb7540c","href":"https://static.observableusercontent.com/files/93febf4cadfc2f138e4854996b60f04a6e2da8e71c69b0a52f82c498faf29463ad40b2dcb0c1ffa51d86bea700e371bfef640d6f04b950418cf212f24cb7540c","name":"93febf4cadfc2f138e4854996b60f04a6e2da8e71c69b0a52f82c498faf29463ad40b2dcb0c1ffa51d86bea700e371bfef640d6f04b950418cf212f24cb7540c.png","type":"image/png","lastModified":1642094047304.447,"size":69948},{"id":"f50c405fbcff1139ce24868697e2c3618eec112a2b9c6e4e9f9dfe24da42677ac867ee1b3d0b6e490487c204823cf6557b136ad2f902e15e7e5289a075441622","href":"https://static.observableusercontent.com/files/f50c405fbcff1139ce24868697e2c3618eec112a2b9c6e4e9f9dfe24da42677ac867ee1b3d0b6e490487c204823cf6557b136ad2f902e15e7e5289a075441622","name":"f50c405fbcff1139ce24868697e2c3618eec112a2b9c6e4e9f9dfe24da42677ac867ee1b3d0b6e490487c204823cf6557b136ad2f902e15e7e5289a075441622.png","type":"image/png","lastModified":1642094111454.375,"size":487624}] 2f:{"title":"🦉 Les oiseaux de Bogotá 🐦","cells":[{"id":0,"value":"md`# 🦉 Les oiseaux de Bogotá 🐦`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`Ce projet fait partie du **Laboratoire virtuel pour la visualisation des données : Art fonctionnel** créé par [Idartes et sa ligne stratégique Art, science et technologie](https://idartes.gov.co/es/noticias/laboratorio-virtual-visualizacion-datos-artefuncional) et dirigé par [Néstor Andrés Peña](https://observablehq.com/@nestorandrespe).\n\nUn développement d'expérimentations qui commence par le prototypage rapide de visualisations et l'utilisation d'outils de langage web : **javascripts, d3js**, ainsi que des plateformes en ligne telles que : **github, observable**, pour la publication, la diffusion et l'apprentissage de la visualisation de données ainsi que sa portée communicative et ses propositions dans le domaine de l'art.\n\nAu final, le projet développé approfondit les possibilités offertes par les filtres de **réalité augmentée** articulés avec la visualisation de données par [Ana Mária Cárdenas](https://amcard.myportfolio.com/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`--- \n## Développement`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`Selon le [Réseau national de données ouvertes sur la biodiversité (SiB)](https://ipt.biodiversidad.co/sib/) et l'Association ornithologique colombienne, il est possible à ce jour de savoir exactement que **la Colombie compte 1954 espèces d'oiseaux**, soit environ 20 % de la diversité aviaire de la planète. Cela signifie que l'intérêt pour l'observation des oiseaux en Colombie connaît une croissance significative en tant qu'activité de loisir et scientifique.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`Actuellement, à Bogota, nous avons plus de **250 espèces d'oiseaux, dont quatre sont endémiques**, que l'on peut observer sur les **76 000 hectares du système de zones protégées du district** : zones humides, collines, parcs écologiques et parcs urbains.\n\n**Source de la base de données : Corridor écologique - Système de zones protégées** [[datosabiertos.bogota.gov.co]](https://datosabiertos.bogota.gov.co/dataset/corredor-ecologico-de-ronda)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"canvas_areas = {\n const svg = d3.create(`svg`)\n .attr('viewBox', `0 0 ${width} ${width}`)\n .attr('style', 'background-color: #97d1be')\n //.attr('transform', `scale(${zoom})`)\n\n const areas_path = svg.selectAll('.areas_p')\n .data(areas_protegidas.features)\n .join('g')\n .html('')\n .attr('class', 'areas_p')\n .append('path')\n .attr('stroke', '#ba9dea')\n .attr('fill', '#624c85')\n .attr('d', d3.geoPath(projection))\n \n const avistamientos = svg.selectAll('.pajarito')\n .data(datos_total)\n .join('g')\n .attr('class', 'pajarito')\n .attr('transform', d => {\n let [lon, lat] = [parseFloat(d.longitude),parseFloat(d.latitude)]\n let ypos = projection([lon,lat])[1]\n let xpos = projection([lon,lat])[0]\n \n return `translate(${xpos}, ${ypos})`\n })\n \n avistamientos.append('circle')\n .attr('r', 1)\n .attr('fill', '#e26e4d')\n .attr('cx', 0)\n .attr('cy', 0)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`Aujourd'hui, il existe plusieurs plateformes web de sciences citoyennes ou participatives qui permettent aux gens d'enregistrer des observations d'oiseaux. Pour cet exercice, nous nous sommes appuyés sur les données de [iNaturalist](https://colombia.inaturalist.org/), une initiative de l'Académie des sciences de Californie et de la National Geographic Society, dont la Colombie est un membre actif.\n\nNous avons examiné la géolocalisation de **12834 enregistrements d'oiseaux** effectués au cours des 10 dernières années, qui montrent la concentration par zones à Bogotá.\n\nSur l'ensemble de la base de données, **222 enregistrements** permettent de visualiser la position géographique des **13 espèces les plus menacées** dans leurs différents habitats.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`Le **comptage des oiseaux** est l'une des méthodes de suivi des espèces, de la gestion des espaces naturels et des processus d'expansion urbaine. Ils peuvent également générer des informations précieuses sur les effets du changement _climatique et de l'urbanisation sur la biodiversité_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"canvas_ = {\n const svg = d3.create(`svg`)\n .attr('viewBox', `0 0 ${width} ${width}`)\n //.attr('style', 'background-color: #F4C70B')\n //.attr('transform', `scale(${zoom})`)\n\n const localidades_path = svg.selectAll('.localidad')\n .data(localidades.features)\n .join('g')\n .html('')\n .attr('class', 'localidad')\n .append('path')\n .attr('stroke', '#999')\n .attr('fill', '#9760b2')\n .attr('d', d3.geoPath(projection))\n \n const avistamientos = svg.selectAll('.pajarito')\n .data(datos_total)\n .join('g')\n .attr('class', 'pajarito')\n .attr('transform', d => {\n let [lon, lat] = [parseFloat(d.longitude),parseFloat(d.latitude)]\n let ypos = projection([lon,lat])[1]\n let xpos = projection([lon,lat])[0]\n \n return `translate(${xpos}, ${ypos})`\n })\n \n avistamientos.append('circle')\n .attr('r', 1)\n .attr('fill', '#2edaea')\n .attr('cx', 0)\n .attr('cy', 0)\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"canvas = {\n const svg = d3.create(`svg`)\n .attr('viewBox', `0 0 ${width} ${width}`)\n //.attr('transform', `scale(${zoom})`)\n\n const localidades_path = svg.selectAll('.localidad')\n .data(localidades.features)\n .join('g')\n .html('')\n .attr('class', 'localidad')\n .append('path')\n .attr('stroke', '#999')\n .attr('fill', '#F4C70B')\n .attr('d', d3.geoPath(projection))\n \n const avistamientos = svg.selectAll('.pajarito')\n .data(data_)\n .join('g')\n .attr('class', 'pajarito')\n .attr('transform', d => {\n let [lon, lat] = [parseFloat(d.longitude),parseFloat(d.latitude)]\n let ypos = projection([lon,lat])[1]\n let xpos = projection([lon,lat])[0]\n \n return `translate(${xpos}, ${ypos})`\n })\n \n //avistamientos.append('circle')\n //.attr('r', 2)\n //.attr('fill', 'red')\n //.attr('cx', 0)\n //.attr('cy', 0)\n \n avistamientos.append('image')\n .attr('href', d => {\n return d.image_url\n })\n .attr('width', 10)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`--- \n## Les oiseaux à voir absolument`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`À Bogotá, nous pouvons identifier certains oiseaux catalogués comme **\"à voir absolument\"** pour les experts et les amateurs, y compris des **espèces endémiques et quasi endémiques**. Ce potentiel constitue un point d'ancrage pour **l'avitourisme**, une activité qui attire un grand nombre de touristes étrangers et d'ornithologues prêts à payer pour voir les oiseaux ou même pour les écouter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof n_data = navio(datos_total,{\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"canvas_endemicas = {\n const svg = d3.create(`svg`)\n .attr('viewBox', `0 0 ${width} ${width}`)\n //.attr('style', 'background-color: #F4C70B')\n //.attr('transform', `scale(${zoom})`)\n\n const localidades_path = svg.selectAll('.localidad')\n .data(localidades.features)\n .join('g')\n .html('')\n .attr('class', 'localidad')\n .append('path')\n .attr('stroke', '#ffffff')\n .attr('fill', '#55b2cc')\n .attr('d', d3.geoPath(projection))\n \n const avistamientos = svg.selectAll('.pajarito')\n .data(n_data)\n .join('g')\n .attr('class', 'pajarito')\n .attr('transform', d => {\n let [lon, lat] = [parseFloat(d.longitude),parseFloat(d.latitude)]\n let ypos = projection([lon,lat])[1]\n let xpos = projection([lon,lat])[0]\n \n return `translate(${xpos}, ${ypos})`\n })\n \n avistamientos.append('circle')\n .attr('r', 3)\n .attr('fill', '#ea4141')\n .attr('cx', 0)\n .attr('cy', 0)\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`---\n## L'art fonctionnel`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`Sur la base de quelques exemples de visualisation de données dans la plateforme **Observable**, nous avons transformé certaines images référencées dans les données.\n\nEn utilisant le filtre **\"Generative Art\"**, nous avons obtenu plusieurs visualisations qui seront utilisées dans le prochain module de réalité augmentée.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`A partir de la visualisation de la base de données, nous avons pris comme exemple l'un des 4 oiseaux endémiques **\"Tingua Bogotana\"** qui est actuellement menacé et nous avons construit une pièce graphique avec toutes les informations pertinentes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"\nmd`

${Object.assign(await FileAttachment(\"47e0fed21332c72d77f738196255c211127add8700592b3e1090ba9c8491f66d1432ff924b71286fac63a745328a1d04f56055a553533da0c242133ef0aa1b65.jpeg\").image(), {\n alt: 'Girl reading',\n style: 'width: 100%; max-width: 550px;'\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`--- \n## Réalité augmentée`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`Comme exercice complémentaire à la visualisation des données, un **filtre de réalité augmentée** est en cours de développement (en cours) avec le logiciel **Lens Studio** de l'application SnapChat.\n\nCe filtre visualise l'une des **13 espèces menacées de Bogota** sur le visage de l'utilisateur. Il est basé sur une situation de danger où l'oiseau sur le visage de l'utilisateur reste sous les feux de la rampe. Avec le nom d'utilisateur et le texte qui suit, une question est posée qui vise non seulement à sensibiliser, mais aussi à transmettre le sentiment de menace ressenti par les oiseaux de Bogota. L'utilisateur peut ensuite partager son interaction sur le réseau social.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"FileAttachment(\"f50c405fbcff1139ce24868697e2c3618eec112a2b9c6e4e9f9dfe24da42677ac867ee1b3d0b6e490487c204823cf6557b136ad2f902e15e7e5289a075441622.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"FileAttachment(\"93febf4cadfc2f138e4854996b60f04a6e2da8e71c69b0a52f82c498faf29463ad40b2dcb0c1ffa51d86bea700e371bfef640d6f04b950418cf212f24cb7540c.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"areas_protegidas = d3.json(\"https://gist.githubusercontent.com/Veruxio/6a20ed2a5939ccabbb34ee36be214265/raw/11c0302a90b537f76b3835236c5d47d3f9714cd1/areas_protegidas.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"datos_total = d3.csv(\"https://gist.githubusercontent.com/Veruxio/41818858338458e0b06b761bb58d6400/raw/a9e7eaa51baf98fb478e34fbac648d7f5061a90e/test2.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"data_ = datos.slice(0,222)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"localidades = d3.json('https://raw.githubusercontent.com/nestorandrespe/datos-bogota/master/localidades.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"datos = d3.csv(\"https://gist.githubusercontent.com/Veruxio/404264d07c852350abcfb0f579711c42/raw/1a9e582fc7c33d5efcfa121b898f94cfdd43bcb6/test.csv\")\n//BD de 222 especies amenazadas en Bogotá.","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"projection = d3.geoMercator()\n .translate([width/2, width/2])\n .scale(100000)\n .center([-74.1097999997, 4.59060000069])","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import {navio} from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}