31:[{"id":"47e0fed21332c72d77f738196255c211127add8700592b3e1090ba9c8491f66d1432ff924b71286fac63a745328a1d04f56055a553533da0c242133ef0aa1b65","href":"https://static.observableusercontent.com/files/47e0fed21332c72d77f738196255c211127add8700592b3e1090ba9c8491f66d1432ff924b71286fac63a745328a1d04f56055a553533da0c242133ef0aa1b65","name":"canvas_endemicas_tingua_bogotana@1.jpg","type":"image/jpeg","lastModified":1606668781510.007,"size":1793839},{"id":"d1cc554297a139d968c647fb79c06a3d180bfa7d5e84c7331623d52cd1f21a1d12e5fb02a399bcbeb539a16b810bc0b3654fb0a0c55d6b93504e93a4be974b8a","href":"https://static.observableusercontent.com/files/d1cc554297a139d968c647fb79c06a3d180bfa7d5e84c7331623d52cd1f21a1d12e5fb02a399bcbeb539a16b810bc0b3654fb0a0c55d6b93504e93a4be974b8a","name":"snap_01.png","type":"image/png","lastModified":1606671602714.539,"size":529716},{"id":"f50c405fbcff1139ce24868697e2c3618eec112a2b9c6e4e9f9dfe24da42677ac867ee1b3d0b6e490487c204823cf6557b136ad2f902e15e7e5289a075441622","href":"https://static.observableusercontent.com/files/f50c405fbcff1139ce24868697e2c3618eec112a2b9c6e4e9f9dfe24da42677ac867ee1b3d0b6e490487c204823cf6557b136ad2f902e15e7e5289a075441622","name":"lens_01.png","type":"image/png","lastModified":1606772575772.909,"size":487624},{"id":"93febf4cadfc2f138e4854996b60f04a6e2da8e71c69b0a52f82c498faf29463ad40b2dcb0c1ffa51d86bea700e371bfef640d6f04b950418cf212f24cb7540c","href":"https://static.observableusercontent.com/files/93febf4cadfc2f138e4854996b60f04a6e2da8e71c69b0a52f82c498faf29463ad40b2dcb0c1ffa51d86bea700e371bfef640d6f04b950418cf212f24cb7540c","name":"snapcode.png","type":"image/png","lastModified":1606772589254.225,"size":69948}] 2f:{"title":"🦉 Las aves de Bogotá 🐦","cells":[{"id":0,"value":"md`# 🦉 Las aves de Bogotá 🐦`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`Este notebook hace parte del **Laboratorio virtual de visualización de datos: Arte_Funcional** creado por [Idartes y su Línea Estratégica de Arte, Ciencia y Tecnología](https://idartes.gov.co/es/noticias/laboratorio-virtual-visualizacion-datos-artefuncional) y dirigido por [Néstor Andrés Peña](https://observablehq.com/@nestorandrespe).\n\nUn desarrollo de experimentaciones que inicia con el prototipado rápido de visualizaciones y el uso de herramientas de lenguajes Web: **javascripts, d3js**, asimismo plataformas en línea como: **github, observable**, para la publicación, difusión, y aprendizaje sobre la visualización de datos además de sus alcances comunicativos y propuestas en el campo del arte. \n\nAl final el proyecto desarrollado profundiza las posibilidades que brindan los filtros de **realidad aumentada** articulados con la visualización de datos de la mano de [Ana Mária Cárdenas](https://amcard.myportfolio.com/). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`--- \n## Desarrollo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`Según la [Red Nacional de Datos Abiertos sobre Biodiversidad (SiB)](https://ipt.biodiversidad.co/sib/) y la Asociación Colombiana de Ornitología, a la fecha es posible saber con exactitud que **Colombia tiene 1954 especies de aves**, aproximadamente el 20% de la diversidad de aves del planeta. Esto hace que el interés por la observación o avistamiento de aves en Colombia crezca de manera significativa como actividad de ocio y de carácter científico. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`Actualmente en Bogotá, contamos con más de **250 especies de aves, cuatro de ellas endémicas**, que pueden ser avistadas en sus **76.000 hectáreas del Sistema Distrital de Áreas Protegidas**: humedales, cerros, parques ecológicos y parques urbanos.\n\n**Fuente de Base de datos: Corredor ecológico - Sistema de áreas protegidas** [[datosabiertos.bogota.gov.co]](https://datosabiertos.bogota.gov.co/dataset/corredor-ecologico-de-ronda)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"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":218,"value":"md`Hoy en día, existen varias plataformas web de **ciencia ciudadana o participativa** que permiten a las personas registrar el avistamiento de aves. Para este ejercicio nos apoyamos en los datos de [iNaturalist](https://colombia.inaturalist.org/), una iniciativa de la Academia de Ciencias de California y la National Geographic Society, de donde Colombia es miembro activo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`Observamos la geolocalización de **12834 registros de aves** realizados en los últimos 10 años, los cuales muestran la concentración por zonas en Bogotá.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"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":230,"value":"md`Como una desagregación de la base de datos total podemos visualizar en **222 registros** la posición geográfica de las **13 especies más amenazadas** en sus diferentes hábitats. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"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":236,"value":"md`El **avistamiento de aves** por conteo es uno de los métodos de monitoreo en especies, gestión de las áreas naturales y en procesos de expansión urbana. También pueden generar información valiosa sobre los efectos del _cambio climático y la urbanización sobre la biodiversidad_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`--- \n## Las aves \"imperdibles\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`En Bogotá podemos identificar algunas aves catalogadas como **\"imperdibles\"** para expertos y aficionados, incluyendo las **especies endémicas y casi endémicas**. Este potencial es ancla del **Aviturismo**, actividad que atrae una gran cantidad de turistas y ornitólogos extranjeros que están dispuestos a pagar por ver las aves o incluso por escucharlas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"viewof n_data = navio(datos_total,{\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"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":352,"value":"md`--- \n## Arte funcional`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md` A partir de algunos ejemplos de visualización de datos en la plataforma **Observable**, transformamos algunas imágenes referenciadas en la data.\n\nMediante el filtro **\"Generative Art\"** obtuvimos varias visualizaciones que serán utilizadas en el siguiente módulo de realidad aumentada.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`A partir de la viusalización de la base de datos, tomamos como ejemplo una de las 4 aves endémicas **\"Tingua Bogotana\"** que se encuentra amenazada actualmente y construimos una pieza gráfica con toda la información relevante.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`

${Object.assign(await FileAttachment(\"canvas_endemicas_tingua_bogotana@1.jpg\").image(), {\n alt: 'Girl reading',\n style: 'width: 100%; max-width: 550px;'\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`--- \n## Realidad Aumentada`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`Como un ejercicio complementario a la visualización de datos se desarrolla (en proceso) un **filtro de realidad aumentada** con el software **Lens Studio** de la aplicación SnapChat.\n\nEste filtro visualiza sobre el rostro del usuario una de las __13 especies en situación de amenaza en Bogotá__. Se basa en una situación de peligro donde el ave sobre el rostro del usuario permanece en la mira. Con el USERNAME y el texto posterior se realiza un cuestionamiento que busca además de generar conciencia, lograr transmitir esa sensación de amenaza que sienten las aves en Bogotá. Posteriormente el usuario podrá compartir su interacción en la red social. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`

${Object.assign(await FileAttachment(\"lens_01.png\").image(), {\n alt: 'Girl reading',\n style: 'width: 100%; max-width: 650px;'\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"md`

${Object.assign(await FileAttachment(\"snapcode.png\").image(), {\n alt: 'Girl reading',\n style: 'width: 30%; max-width: 550px;'\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"areas_protegidas = d3.json(\"https://gist.githubusercontent.com/Veruxio/6a20ed2a5939ccabbb34ee36be214265/raw/11c0302a90b537f76b3835236c5d47d3f9714cd1/areas_protegidas.json\")\n\n//areas_protegidas = d3.json(\"https://datosabiertos.bogota.gov.co/dataset/69e9af6c-225b-4196-bad4-cc4d06a8b57c/resource/34a4701f-4d38-47ce-9739-1d4d439a416f/download/capa_corredorecolronda.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"datos_total = d3.csv(\"https://gist.githubusercontent.com/Veruxio/41818858338458e0b06b761bb58d6400/raw/a9e7eaa51baf98fb478e34fbac648d7f5061a90e/test2.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"data_ = datos.slice(0,222)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"localidades = d3.json('https://raw.githubusercontent.com/nestorandrespe/datos-bogota/master/localidades.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"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":13,"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":431,"value":"import {navio} from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}