31:T4d6,// Make the layers layers = { const muniFillLayer = new deck.PolygonLayer({ id: 'municipales-fill-layer', data: highlightLayer, pickable: false, stroked: false, filled: true, getPolygon: d => d.geom.coordinates[0], getFillColor: d => d.highlight ? [60, 60, 60] : [0, 0, 0, 0], }); const columnLayer = new ExtrudedCircleLayer({ id: 'municipales-col-layer', data: filteredForMap.objects(), diskResolution: 20, extruded: false, material: false, pickable: false, getPosition: d => d.centroid, getFillColor: d => colorScaleRGB(d[colorBy.col]), getElevation: d => elevationScale(d[selectedFilter.col]), getRadius: d => radiusScale(d[selectedFilter.col]), onClick: info => { mutable selectedMunicipio = info.object }, }); const muniOutlineLayer = new deck.PolygonLayer({ id: 'municipales-outline-layer', data: highlightLayer, pickable: false, stroked: true, filled: false, getPolygon: d => d.geom.coordinates[0], getLineColor: d => d.highlight ? [125, 125, 125] : [0, 0, 0, 0], getLineWidth: d => 2000, }); const layers = [muniFillLayer, columnLayer, muniOutlineLayer]; deckgl.setProps({ layers }); return layers; }32:T576, 33:Tb33,// Based on https://raw.githubusercontent.com/visgl/deck.gl/master/modules/layers/src/column-layer/column-layer-vertex.glsl.js vertexShader = ` attribute vec3 positions; attribute vec3 normals; attribute vec3 instancePositions; attribute float instanceElevations; attribute vec3 instancePositions64Low; attribute vec4 instanceFillColors; attribute vec4 instanceLineColors; attribute float instanceStrokeWidths; attribute vec3 instancePickingColors; // Added new settable attribute attribute float instanceRadius; // Custom uniforms uniform float opacity; uniform float angle; uniform vec2 offset; uniform bool extruded; uniform bool isStroke; uniform float coverage; uniform float elevationScale; uniform float edgeDistance; uniform float widthScale; uniform float widthMinPixels; uniform float widthMaxPixels; // Result varying vec4 vColor; void main(void) { geometry.worldPosition = instancePositions; vec4 color = isStroke ? instanceLineColors : instanceFillColors; // rotate primitive position and normal mat2 rotationMatrix = mat2(cos(angle), sin(angle), -sin(angle), cos(angle)); // calculate elevation, if 3d not enabled set to 0 // cylindar gemoetry height are between -1.0 to 1.0, transform it to between 0, 1 float elevation = 0.0; // calculate stroke offset float strokeOffsetRatio = 1.0; if (extruded) { elevation = instanceElevations * (positions.z + 1.0) / 2.0 * elevationScale; } else if (isStroke) { float widthPixels = clamp(project_size_to_pixel(instanceStrokeWidths * widthScale), widthMinPixels, widthMaxPixels) / 2.0; strokeOffsetRatio += sign(positions.z) * project_pixel_size(widthPixels) / project_size(edgeDistance * coverage * instanceRadius); } // if alpha == 0.0 or z < 0.0, do not render element float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0); float dotRadius = instanceRadius * coverage * shouldRender; geometry.normal = project_normal(vec3(rotationMatrix * normals.xy, normals.z)); geometry.pickingColor = instancePickingColors; // project center of column vec3 centroidPosition = vec3(instancePositions.xy, instancePositions.z + elevation); vec3 centroidPosition64Low = instancePositions64Low; vec3 pos = vec3(project_size(rotationMatrix * positions.xy * strokeOffsetRatio + offset) * dotRadius, 0.); DECKGL_FILTER_SIZE(pos, geometry); gl_Position = project_position_to_clipspace(centroidPosition, centroidPosition64Low, pos, geometry.position); DECKGL_FILTER_GL_POSITION(gl_Position, geometry); // Light calculations if (extruded && !isStroke) { vec3 lightColor = lighting_getLightColor(color.rgb, project_uCameraPosition, geometry.position.xyz, geometry.normal); vColor = vec4(lightColor, color.a * opacity); } else { vColor = vec4(color.rgb, color.a * opacity); } DECKGL_FILTER_COLOR(vColor, geometry); }`;34:[] 2f:{"title":"RNPNDO - Geoexplorador","cells":[{"id":0,"value":"# RNPNDO - Geoexplorador\n\nEn este cuaderno se pueden explorar los datos sobre desapariciones por municipio, año y género. Los datos también se pueden filtrar por los 10, 50 o 100 municipios con más casos de personas desaparecidas.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"viewof selectedYears = Inputs.select([\"Todos\", ...years], {multiple: true, label: \"Años\", format: x => String(x), value: [\"Todos\"], height: 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof selectedFilter = Inputs.select([\n {\n col: \"desapariciones\",\n label: \"Todos\"\n },\n {\n col: \"hombres\",\n label: \"Hombres\"\n },\n {\n col: \"mujeres\",\n label: \"Mujeres\"\n },\n {\n col: \"indeterminado\",\n label: \"Indeterminado\"\n },\n], { label: \"Filtro\", format: x => x.label })","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"viewof limit = Inputs.select([Infinity, 10, 50, 100], { label: \"Límite\", value: Infinity})","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"selectedFilter.col === \"desapariciones\" && Legend(colorScale, { title: \"% mujeres\", ticks: 8, tickFormat: x => x.toLocaleString(undefined, {style: \"percent\"})})","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"Inputs.table(\n filteredForMap\n .select(aq.not(\"centroid\"))\n , {\n layout: \"auto\",\n format: {\n hombres_pct: mxPct,\n mujeres_pct: mxPct,\n indeterminado_pct: mxPct,\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"function mxPct(x) {\n return x.toLocaleString(\"es-MX\", {style: \"percent\"});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"colorBy = ({\n col: \"mujeres_pct\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"selectedMunicipioOriginal = dataQuery.views_municipales.find(d => selectedMunicipio.nom_ent === d.nom_ent && selectedMunicipio.nom_mun === d.nom_mun) || selectedMunicipio","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"mutable selectedMunicipio = ({ nom_ent: \"\", nom_mun: \"\" }) // Initialize with failing filter","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"highlightLayer = dataQuery.views_municipales.map(d => ({\n geom: d.geom,\n highlight: selectedMunicipio.nom_ent === d.nom_ent && selectedMunicipio.nom_mun === d.nom_mun\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"filteredForMap = filtered\n .params({selectedFilter, limit})\n .groupby(\"nom_ent\", \"nom_mun\", \"centroid\")\n .rollup({\n desapariciones: op.sum(\"desapariciones\"),\n hombres: op.sum(\"hombres_mun\"),\n mujeres: op.sum(\"mujeres_mun\"),\n indeterminado: op.sum(\"indeterminado_mun\"),\n })\n .derive({\n hombres_pct: d => d.hombres / d.desapariciones,\n mujeres_pct: d => d.mujeres / d.desapariciones,\n indeterminado_pct: d=> d.indeterminado / d.desapariciones,\n })\n .orderby(aq.desc(selectedFilter.col))\n .slice(0, limit)","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"elevationScale = d3.scaleSqrt().domain([0, historicalMax]).range([0, 150000]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"colorScaleRGB = (value) => {\n const color = d3.color(colorScale(value));\n return [color.r, color.g, color.b];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"colorScale = {\n if (selectedFilter.col === \"desapariciones\") {\n return d3.scaleDiverging()\n .domain([0, 0.5, 1])\n .interpolator(d3.interpolateRgbBasis([colors.masculino, \"#444444\", colors.femenino]));\n }\n else if (selectedFilter.col === \"hombres\") {\n return d3.scaleOrdinal().range([colors.masculino])\n }\n else if (selectedFilter.col === \"mujeres\") {\n return d3.scaleOrdinal().range([colors.femenino])\n } else {\n return d3.scaleOrdinal().range([\"#444444\"])\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"radiusScale = d3.scaleSqrt().domain([0, historicalMax]).range([2000, 35000]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"historicalMax = {\n if (selectedYears.includes(\"Todos\")) {\n return dt\n .groupby(\"nom_ent\", \"nom_mun\")\n .rollup({sum: op.sum(\"desapariciones\")})\n .rollup({max: op.max(\"sum\")})\n .get(\"max\")\n } else {\n return dt\n .groupby(\"nom_ent\", \"nom_mun\", \"fecha_ano\")\n .rollup({sum: op.sum(\"desapariciones\")})\n .rollup({max: op.max(\"sum\")})\n .get(\"max\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"// Currently unused interactivity\n// {\n// // Reverse from filter\n// if (selectedMunicipio.nom_ent && selectedMunicipio.nom_mun) {\n// return html`

${renderCard(selectedMunicipioOriginal)}

`\n// } else {\n// return md`### Da click a un municipio para ver información detallada.`;\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":83,"value":"filtered = {\n let filtered = dt.params({selectedYears});\n if (!selectedYears.includes(\"Todos\")) {\n filtered = filtered.filter(d => op.includes(selectedYears, d.fecha_ano));\n }\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"years = Array.from(dt.groupby(\"fecha_ano\").rollup().orderby(\"fecha_ano\")).map(d => d.fecha_ano)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"dt = aq.from(flatData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"flatData = dataQuery.views_municipales.map(mun => \n mun.rnpndo.map(r => ({\n centroid: mun.centroid_geom.coordinates,\n nom_mun: mun.nom_mun,\n nom_ent: mun.nom_ent,\n census_2015: mun.census[0].sum,\n ...r\n }))\n).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n map: mapboxgl,\n initialViewState,\n mapboxApiAccessToken: accessToken,\n mapStyle: \"mapbox://styles/davideads/ckzezoynl002915lcm7ujkpc6\",\n controller: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"ExtrudedCircleLayer = {\n class ExtrudedCircleLayer extends deck.ColumnLayer {\n initializeState() {\n super.initializeState();\n this.state.attributeManager.addInstanced({\n instanceRadius: {size: 1, accessor: 'getRadius'}\n });\n }\n getShaders() {\n return Object.assign({}, super.getShaders(), {\n vs: vertexShader,\n });\n }\n };\n ExtrudedCircleLayer.layerName = 'ExtrudedCircleLayer';\n return ExtrudedCircleLayer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"initialViewState = ({\n longitude: -102,\n latitude: 23,\n zoom: 4.3,\n pitch: 0,\n bearing: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"accessToken = 'pk.eyJ1IjoiZGF2aWRlYWRzIiwiYSI6ImNrZzFqODk5OTBkMzIzMHF3MXg0YnJnNW8ifQ.v2hBRrIEBRR7bpgoQYIvmw'","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// Alias luma\nluma = deck && window.luma","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.6.3/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl');\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"import { dataQuery, render as renderCard } from \"b4965cc396c266b3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"import { colors } from \"@adonde/graficos-fonts-colores\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}