31:T665,header = html`

Aguas del río Pilcomayo

Mediciones de la calidad del agua en el río Pilcomayo publicadas por la Comisión Trinacional para el Desarrollo de la Cuenca del Río Pilcomayo entre ${timedomain[0].getFullYear()} y ${timedomain[1].getFullYear()}

Por Mauricio Foronda con datos obtenidos mediante Daniel Rivera

contacto de Mauricio contacto de Daniel

código y datos preparados por Mauricio investigación original de Daniel

`32:T695,worryPlot = { const baseline = dataStacked. filter(d => d.year <= 2012). groupby('indicador'). rollup({baseline: op.mean('valor')}). objects(). reduce((a, v) => ({...a, [v.indicador]:v.baseline}), {}) const df = dataStacked. filter(aq.escape(d => d.year > 2012 & Object.keys(baseline).includes(d.indicador))). derive({valor: aq.escape(d => d.valor / baseline[d.indicador])}). groupby(['year', 'indicador']). rollup({valor: op.median('valor')}). orderby('year') const plot = Plot.plot({ marginTop: 0, width: width, marginLeft: 50, marginRight: 0, style: { color: colors.frame }, color: { scheme: 'RdGy', reverse: true, type:'diverging-log', legend: false, }, y: { label: null, tickSize: 0, tickFormat: d3.format('.0f') }, x: { axis: 'bottom', tickSize: 0, tickFormat: null, label: 'Indicadores', labelOffset: 20 }, marks: [ Plot.cell(df,{ y: 'year', x: 'indicador', fill: 'valor', title: d => `${d.indicador} en ${d.year}\n${d3.format('.1%')(d.valor)} de la media entre 2007 y 2012`, inset: 0, sort: { x: 'fill', reduce: 'median', } }) ], tooltip: { fill: '#cad5e8' } }) const legend = plot.legend('color', { style: { color: colors.frame }, ticks: 3, marginLeft: width * .125, tickFormat: d => d < 1 ? 'disminuye' : d == 1 ? 'normal' : 'crece', label: null, width: width * .875}) return html`

${legend}

${plot}

` }33:T7e2,plotBins = { if (indicador) { const mean = aq.agg(dataStackedIndicador, op.median('valor')) const stdev = aq.agg(dataStackedIndicador, op.stdev('valor')) * 5 const domain = [(mean - stdev) < 0 ? 0 : mean - stdev, mean + stdev] const scaleOptions = ({tickSize: 0, tickPadding: 10, grid: true, label:null}) const data4Bins = dataStackedIndicador. filter(aq.escape(d => d.valor >= domain[0] && d.valor <= domain[1])). derive({selected: aq.escape(estacion ? d => d.nombre == estacion.nombre ? 1. : .5 : .0)}) const rangecolors = [colors.gray, colors.estacion] return Plot.plot({ style: { color: colors.frame }, color: { range: rangecolors }, width: width, height: 200, marginBottom: 45, x: { ...scaleOptions, }, y: { ...scaleOptions }, marks: [ Plot.rectY(data4Bins, Plot.binX({ y: 'count', title: 'count', }, { x: 'valor', thresholds: "scott", fillOpacity: .6, fill: 'selected', order: 'sum', })), Plot.text([indicador.indicador], { frameAnchor: 'bottom', lineAnchor: 'top', fill: "#8c98b8", dy: 30, fontWeight: 'bold' }), Plot.text(['Número de mediciones'], { frameAnchor: 'top-right', textAnchor: 'end', lineAnchor: 'bottom', dx: -5, dy: 0, fontWeight: 'bold', fill: "#969aa3", stroke: rangecolors[1], strokeWidth: .1 }), Plot.text([estacion ? `en ${estacion.nombre}` : ''], { frameAnchor: 'top-right', textAnchor: 'end', lineAnchor: 'bottom', dx: -5, dy: 15, fontWeight: 'bold', fill: rangecolors[1] }) ], tooltip: { fill: '#cad5e8' } }) } else { return md`` } }34:T45f,plotDots = { if (indicador) { const scaleOptions = {label: null, tickSize: 0, tickPadding: 10} return Plot.plot({ marginLeft: 0, marginRight: 150, width: width, style:{ color: colors.frame }, x: { ...scaleOptions, domain: timedomain, grid: true, axis: 'top', }, y: { ...scaleOptions, axis: 'right', }, marks: [ Plot.ruleY([estacion ? estacion.nombre: ''], { stroke: colors.estacion, strokeWidth: 4, strokeOpacity: .2 }), Plot.dot(dataStackedIndicador, { x: "fecha", y: "nombre", r: width < 1000 ? 2 : width / 350, strokeOpacity: 'valor', fill: d => get_color(d.valor, .8), title: d => `${d.valor}\n${d.indicador}\n${d.fecha.toLocaleString('es-MX', timestring)}\nen ${d.nombre}`, sort: { y: "strokeOpacity", reduce: "count", reverse: true } }) ] }) } else { return md`` } }35:T9d7, viewof map = { if (indicador) { const height = 700 const target = html`

`; yield target; const popup = html`` const popup_closer = html`` const popup_content = html`` popup.appendChild(popup_closer) popup.appendChild(popup_content) const overlay = new ol.Overlay({ element: popup, autoPan: { animation: { duration: 250, }, }, }); popup_closer.onclick = function () { overlay.setPosition(undefined); popup_closer.blur(); return false; }; const map = target.value = new ol.Map({ layers: [ basemap, //heatLayer, riverLayer, estacionLayer, pointLayer ], target, view: new ol.View({ center: ol.proj.fromLonLat(center), zoom: 6.2, maxZoom: 17, minZoom:5 }), overlays: [overlay], }); map.on('singleclick', function (event) { const coordinate = event.coordinate; const hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate)); const puntos = [] const valores = [] map.forEachFeatureAtPixel(event.pixel, (feature, layer) => { const properties = feature.getProperties(); if (properties && properties.nombre) { puntos.push(properties.nombre) valores.push(properties.valor) } }) let popup_text = '' if (puntos.length > 0){ if (puntos.length == 1) { popup_text = `

${valores[0]} ${indicador.indicador}

${puntos[0]}

` } else { const estaciones_unicas = [...new Set(puntos)] popup_text = `

${puntos.length > 1 ? puntos.length + " mediciones" : "1 medición"} de

${estaciones_unicas.map(e => `${e}`).join(', ')}

` } popup_content.innerHTML = `

${popup_text}

` overlay.setPosition(coordinate); } }) // basemap.on('postcompose',function(e){ // document.querySelector('canvas').style.filter="grayscale(90%)"; // }); invalidation.then(() => map.dispose()); return target; } else { return md`` } }36:Tdce,estilo = html`

`37:T6c9,timeplot = () => { const corte_grouped = dataSelection. groupby('year', 'month').rollup({valor: op.mean('valor')}). derive({fecha: d => op.utcdatetime(d.year, d.month - 1, 1)}). orderby('fecha') const scaleOptions = { grid: true, tickSize: 0, tickPadding: 15, label: null } return Plot.plot({ width: width, height: 250, marginRight: 50, style: { color: colors.frame }, y: { ...scaleOptions, axis: 'right', tickFormat: d => d == 0 ? '' : d, }, x: { ...scaleOptions, domain: timedomain, ticks: years.length, tickFormat: d => op.utcyear(d) == 2008 ? 2008 : d3.utcFormat('%y')(d) }, marks: [ Plot.barX(allmonths, { x: 'date', stroke: null, interval: d3.utcMonth, fill: d => d.color, fillOpacity: .15, inset: 0 }), Plot.lineY(corte_grouped, { x: 'fecha', y: 'valor', stroke: colors.estacion, strokeWidth: 2.5, fill: null, curve: 'catmull-rom' }), Plot.areaY(corte_grouped, { x: 'fecha', y: 'valor', stroke: null, fill: colors.estacion, fillOpacity: .2, curve: 'catmull-rom' }), Plot.dot(dataSelection, { x: 'fecha', y: 'valor', r: width < 1000 ? 3 : width / 256, stroke: colors.frame, strokeOpacity: 1., strokeWidth: .9, fill: d => get_color(d.valor, 1.), title: d => `${d.valor}\n${d.indicador}\n${d.fecha.toLocaleString('es-MX', timestring)}` }) ], tooltip: { stroke: colors.blue, "stroke-width": 15, "stroke-opacity": .3 } }) }38:[{"id":"3f94da8b7adc17e4cfc94a634c5f80666e38471c9194bf622997c7cf2d433a351a1b0203eab1803cfdb376276165db05a80e3ce28845b4819aae51d95a8fa7b7","href":"https://static.observableusercontent.com/files/3f94da8b7adc17e4cfc94a634c5f80666e38471c9194bf622997c7cf2d433a351a1b0203eab1803cfdb376276165db05a80e3ce28845b4819aae51d95a8fa7b7","name":"pilcomayo.geojson","type":"application/geo+json","lastModified":1670040107536.483,"size":25272}] 2f:{"title":"Aguas del río Pilcomayo","cells":[{"id":3221,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2748,"value":"frame1 = framecaption(md`\n- **${dataStacked.numRows()} mediciones** de\n- **${indicadores.length} indicadores** de la calidad del agua del Río Pilcomayo\n- recolectadas en **${estaciones.length} estaciones**\n- y publicadas por la **Comisión Trinacional para el Desarrollo de la Cuenca del Río Pilcomayo**\n- entre el **${timedomain[0].toLocaleDateString('es-US', {year: 'numeric', month: 'long', day: 'numeric'})}**\n- y el **${timedomain[1].toLocaleDateString('es-US', {year: 'numeric', month: 'long', day: 'numeric'})}**`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3411,"value":"frame1_1 = framecaption(`¿Qué indicadores son más preocupantes?`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3389,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2613,"value":"frame2 = framecaption(`Selecciona un indicador`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3327,"value":"viewof indicadorSearch = Inputs.text({\n placeholder: 'Busca indicadores', \n format: d => `${d} indicadores`,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof indicador = Inputs.table(indicadorResults, {\n header: {indicador: 'Indicador', count: 'Mediciones'},\n multiple: false,\n value: indicadorResults[0],\n format: {indicador: d => html`${d}`},\n rows: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2623,"value":"frame3 = {\n if (indicador){\n return framecaption(`¿Cuál es la distribución de valores en mediciones de ${indicador.indicador}?`)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2903,"value":"frame4 = {\n if (indicador) {\n return framecaption(`¿Cuál es la distribución de valores de ${indicador.indicador} entre años y estaciones?`)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2282,"value":"colorScale1 = {\n if (indicador) {\n return html`\n

${viewof scaletype}

${colorscale()}

`\n } else {\n return md``\n}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2699,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"frame5 = {\n if (indicador) {\n return framecaption(`¿Existe algún patrón geográfico en esta distribución? Éste es un mapa con todas las mediciones de ${indicador.indicador}${estacion ? `, incluyendo aquellas en la estación ${estacion.nombre}` : \"\"}.`)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2980,"value":"colorScale2 = colorscale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"framecaption(`Quieres profundizar tu investigación en un área específica. Selecciona una estación:`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2579,"value":"viewof estacionSearch = Inputs.search(estaciones, {\n placeholder: 'Busca estaciones', \n format: d => `${d} estaciones`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"viewof ee = Inputs.table(estacionSearch, {\n header: {nombre: 'Estación', count: 'Mediciones'},\n multiple: false,\n // value: estacionSearch[0],\n format: {nombre: d => html`${d}`},\n rows: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2619,"value":"frame6 = {\n if (indicador && estacion) {\n return framecaption(`¿Cuál es la ditribución de valores en mediciones de ${indicador.indicador} en la estación ${estacion.nombre} a través del tiempo?`)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2959,"value":"colorScale3 = {\n if (indicador && estacion) {\n return colorscale()\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"timeplotif = {\n if (indicador && estacion) {\n return timeplot()\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3246,"value":"sep = md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3046,"value":"frame7 = framecaption(`También puedes descargar y trabajar con estos datos localmente.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3165,"value":"dl1 = {\n if (estacion) {\n return downloadCSV(dataSelection, ['fecha', 'nombre', 'latitud', 'longitud','indicador','valor'], `pilcomayo_${indicador.indicador.split(' ')[0]}_${estacion.nombre.split(' ').join('')}.csv`, `📥 Descarga datos de ${indicador.indicador} en ${estacion.nombre}`)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3087,"value":"dl2 = {\n if (indicador) {\n return downloadCSV(dataStackedIndicador, ['fecha', 'nombre', 'latitud', 'longitud','indicador','valor'], `pilcomayo_${indicador.indicador.split(' ')[0]}.csv`, `📥 Descarga todos los datos de ${indicador.indicador}`)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3118,"value":"dl3 = downloadCSV(dataStacked, ['fecha', 'nombre', 'latitud', 'longitud','indicador','valor'], `pilcomayo_total.csv`, `📥 Descarga la base de datos completa`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"Dependencias","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"ol = {\n const ol = await require(\"ol@7.1.0/dist/ol.js\").catch(() => window.ol);\n if (!ol._style) ol._style = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"Datos","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"data = {\n const url = \"https://raw.githubusercontent.com/mauforonda/aguas-del-rio-pilcomayo/master/data/mediciones_procesadas.csv\"\n const dateformat = d3.utcParse('%Y-%m-%d %H:%M:%S')\n let raw = await aq.loadCSV(url)\n raw = raw.derive({\n fecha: aq.escape(d => dateformat(d.fecha))\n })\n return raw.derive({\n month: d => op.month(d.fecha),\n year: d => op.year(d.fecha)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"Transformaciones","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"dataCountBy = (table, column) => {\n return table.\n groupby(column).\n count().\n orderby(aq.desc('count'))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"dataStacked = {\n const columnas_descriptivas = ['fecha', 'month', 'year', 'nombre', 'latitud', 'longitud']\n const columnas_mediciones = data.columnNames().slice(12,-2)\n const columnas = columnas_descriptivas.concat(columnas_mediciones)\n \n return data.\n select(columnas).\n fold(columnas_mediciones, {as: ['indicador', 'valor']}).\n filter(d => !(d.valor === null))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"indicadores = dataCountBy(dataStacked, 'indicador').objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"dataStackedIndicador = {\n if (indicador) {\n return dataStacked.filter(aq.escape(d => d.indicador == indicador.indicador)) \n } else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"dataSelection = {\n if (indicador && estacion) {\n return dataStackedIndicador.\n filter(aq.escape(d => d.nombre == estacion.nombre)).\n orderby('fecha')\n } else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"estaciones = {\n if (indicador) {\n return dataCountBy(dataStackedIndicador, 'nombre').objects()\n } else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"Menus","pinned":false,"hidden":false,"mode":"md"},{"id":3052,"value":"{\n if (ee != null) {\n set(viewof estacion, ee)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3063,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"Presentación","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"timestring = ({year:'numeric', month:'long', day:'numeric', timeZone: 'UTC'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"scaleString = ({\n linear: 'lineal',\n symlog: 'logarítmica'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"section = (text) => {\n return html`

${text}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2594,"value":"framecaption = (text) => {\n return html`

${text}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof scaletype = Inputs.radio(['linear', 'symlog'], {value: 'symlog', label: 'escala de colores', format: d => scaleString[d]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3251,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"Plot","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"years = aq.agg(data, op.array_agg_distinct('year'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"timedomain = [0, -1].map(i => data.orderby('fecha').array('fecha').slice(i)[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"allmonths = {\n const colorscale = d3.scaleSequential().domain([1,12])\n const colorscheme = d3.piecewise(d3.interpolateRgb.gamma(2.2), ['#616161', '#999999', '#ededed', '#999999', '#616161'])\n const months = Array((op.year(timedomain[1]) + 1) - op.year(timedomain[0])).fill(1).map((a,b) => Array(12).fill(1).map((i,e) => ({\n year: op.year(timedomain[0]) + b,\n month: i + e\n }))).flat()\n return aq.from(months).\n derive({\n date: d => op.datetime(d.year, d.month -1, 1),\n color: aq.escape(d => colorscheme(colorscale(d.month)))\n }).\n filter(aq.escape(d => d.date >= timedomain[0] & d.date <= timedomain[1]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"Mapa","pinned":false,"hidden":false,"mode":"md"},{"id":1433,"value":"indicadorFeatures = {\n if (indicador) {\n const geom_array = dataStackedIndicador.derive({geometry: aq.escape(d => new ol.geom.Point(ol.proj.fromLonLat([d.longitud, d.latitud])))}).objects()\n return geom_array.map(f => new ol.Feature(f))\n } else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"center = [-63, -22.5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"extremos = {\n if (indicador) {\n const valores = dataStackedIndicador.orderby('valor').columnArray('valor')\n return [0, -1].map(i => valores.slice(i)[0])\n } else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"estaciones_coordenadas = Object.fromEntries(\n dataStacked.\n groupby('nombre').\n slice(0,1).\n select('nombre', 'longitud', 'latitud').\n objects().\n map(i => [i.nombre, [i.longitud, i.latitud]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"pilcomayo = FileAttachment(\"pilcomayo.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2217,"value":"heatLayer = {\n\n const source = new ol.source.Vector({\n projection: 'EPSG:4326',\n features: indicadorFeatures\n });\n\n return new ol.layer.Heatmap({\n source: source,\n opacity: .05,\n blur: 15,\n radius: 10,\n weight: \"valor\"\n })\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"basemap = new ol.layer.Tile({\n source: new ol.source.XYZ({ \n // url:'http://{1-4}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',\n url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'\n }),\n opacity: .8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"pointStyle = (feature) => {\n return new ol.style.Style({\n image: new ol.style.Circle({\n radius: 3,\n fill: new ol.style.Fill({color: get_color(feature.values_.valor, 1.)}),\n stroke: new ol.style.Stroke({color: \"#f9f9f90a\", width: 10})\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"pointLayer = {\n\n const source = new ol.source.Vector({\n projection: 'EPSG:4326',\n features: indicadorFeatures\n });\n\n return new ol.layer.Vector({\n source: source,\n style: pointStyle\n })\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"estacionLayer = {\n\n if (indicador && estacion) {\n\n const style = (feature, resolution) => {\n return new ol.style.Style({\n image: new ol.style.Circle({\n radius: 350,\n fill: new ol.style.Fill({color: '#d4c0b200'}),\n stroke: new ol.style.Stroke({color: colors.estacion, width:60}),\n scale: 1 / Math.pow(resolution, 1/3),\n })\n })\n }\n \n const source = new ol.source.Vector({\n projection: 'EPSG:4326',\n features: [\n new ol.Feature(\n {\n geometry: new ol.geom.Point(\n ol.proj.fromLonLat(estaciones_coordenadas[estacion.nombre]))\n }\n )\n ]\n })\n \n return new ol.layer.Vector({\n source: source,\n style: style\n })\n\n } else {\n return new ol.layer.Vector({})\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"riverLayer = {\n\n const source = new ol.source.Vector({\n projection: 'EPSG:4326',\n features: (new ol.format.GeoJSON()).readFeatures(pilcomayo, {\n dataProjection: 'EPSG:4326',\n featureProjection: 'EPSG:3857'\n })\n });\n\n const style = new ol.style.Style({\n stroke: new ol.style.Stroke({\n color: 'rgba(255, 255, 255, .9)',\n width: 2,\n lineDash: [1,5]\n })\n })\n \n return new ol.layer.Vector({\n source: source,\n style: style\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2565,"value":"Colores","pinned":false,"hidden":false,"mode":"md"},{"id":1013,"value":"colors = ({\n frame: \"#696969\", \n gray: '#e1e5ed', \n blue: '#5384ed',\n estacion: '#e8a551',\n green: '#a6b854',\n red: '#f75c40',\n banner: '#f5f8ff'\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"colorscale = () => {\n if (indicador) {\n const scales = ({\n linear : d3.scaleSequential(extremos, d3.interpolateBuPu),\n symlog: d3.scaleSequentialSymlog(extremos, d3.interpolateBuPu)\n })\n const legend = Legend(scales[scaletype], {\n width: width * .6,\n title: `${indicador.indicador}`,\n tickFormat: d3.format('.2s'),\n ticks: 4,\n })\n return html`

${legend}

`\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"get_color = (valor, opacity=.2) => {\n const scales = ({\n linear : d3.scaleSequential().domain(extremos),\n symlog: d3.scaleSymlog().domain(extremos)\n })\n const color_rgb = d3.rgb(d3.interpolateBuPu(scales[scaletype](valor)))\n color_rgb.opacity = opacity\n return color_rgb.toString()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3085,"value":"downloadCSV = (table, columns, filename, buttonText) => {\n const tablecsv = table.toCSV({columns:columns})\n return html`

${DOM.download(new Blob([tablecsv], {type: \"text/csv\"}), filename, buttonText)}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3066,"value":"viewof estacion = {\n const element = md``;\n element.value = null;\n return element;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3334,"value":"indicadorResults = indicadores.filter(i => i.indicador.includes(indicadorSearch))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}