30:T4d5,// 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: true, 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; }31:T576, 32: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); }`;33:[] 2e:{"title":"Cenapi-PGR- Geoexplorador","cells":[{"id":0,"value":"# Cenapi-PGR- Geoexplorador \n\nEn este cuaderno se puede seleccionar municipios en el mapa y conocer los reportes de personas desaparecidas en esos sitios entre 2006 y 2018. También se pueden filtrar los datos por año, género y estatus de localización.\n\n","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: \"disappearance_ct\",\n label: \"Todos\"\n },\n {\n col: \"gender_masc_ct\",\n label: \"Sexo: masculino\"\n },\n {\n col: \"gender_fem_ct\",\n label: \"Sexo: femenino\"\n },\n {\n col: \"status_alive_ct\",\n label: \"Estatus: localizado con vida\"\n },\n {\n col: \"status_dead_ct\",\n label: \"Estatus: localizado sin vida\"\n }, \n {\n col: \"status_not_found_ct\",\n label: \"Estatus: sin localizar\"\n },\n], { label: \"Filtro\", format: x => x.label })","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof colorBy = Inputs.select([\n {\n col: \"gender_fem_pct\",\n label: \"% Femenino\"\n },\n {\n col: \"status_alive_pct\",\n label: \"% Localizado con vida\"\n },\n {\n col: \"status_dead_pct\",\n label: \"% Localizado sin vida\"\n },\n {\n col: \"status_not_found_pct\",\n label: \"% Sin localizar\"\n },\n], { label: \"Colores por\", format: x => x.label })","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"Legend(colorScale, { title: colorBy.label })","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"{\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":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":"$30","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})\n .groupby(\"nom_ent\", \"nom_mun\", \"centroid\")\n .rollup({\n disappearance_ct: op.sum(\"disappearance_ct\"),\n gender_masc_ct: op.sum(\"gender_masc_ct\"),\n gender_fem_ct: op.sum(\"gender_fem_ct\"),\n status_alive_ct: op.sum(\"status_alive_ct\"),\n status_not_found_ct: op.sum(\"status_not_found_ct\"),\n status_dead_ct: op.sum(\"status_dead_ct\"),\n })\n .derive({\n gender_fem_pct: d => d.gender_fem_ct / d.disappearance_ct,\n gender_masc_pct: d => d.gender_masc_ct / d.disappearance_ct,\n status_alive_pct: d => d.status_alive_ct / d.disappearance_ct,\n status_not_found_pct: d => d.status_not_found_ct / d.disappearance_ct,\n status_dead_pct: d => d.status_dead_ct / d.disappearance_ct,\n })\n .orderby(aq.desc(selectedFilter.col))","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 const domain = filteredForMap.rollup({\n min: op.quantile(colorBy.col, .1),\n max: op.quantile(colorBy.col, .9)\n });\n \n if (colorBy.col === \"gender_fem_pct\") {\n return d3.scaleDiverging()\n .domain([domain.get(\"min\"), 0.5, domain.get(\"max\")])\n .interpolator(d3.interpolateRgbBasis([colors.masculino, \"#999999\", colors.femenino]));\n }\n else {\n return d3.scaleSequential()\n .domain([domain.get(\"min\"), domain.get(\"max\")])\n .interpolator(d3.interpolateRgb(\"#cccccc\", \"#333333\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"radiusScale = d3.scaleSqrt().domain([0, historicalMax]).range([3000, 40000]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"historicalMax = {\n if (selectedYears.includes(\"Todos\")) {\n return dt\n .params({selectedFilter})\n .groupby(\"nom_ent\", \"nom_mun\")\n .rollup({sum: op.sum(\"disappearance_ct\")})\n .rollup({max: op.max(\"sum\")})\n .get(\"max\")\n } else {\n return dt\n .params({selectedFilter})\n .groupby(\"nom_ent\", \"nom_mun\", \"year\")\n .rollup({sum: op.sum(\"disappearance_ct\")})\n .rollup({max: op.max(\"sum\")})\n .get(\"max\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"$31","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.year));\n }\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"years = Array.from(dt.groupby(\"year\").rollup().orderby(\"year\")).map(d => d.year)","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.months.map(month => ({\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 ...month\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":"$32","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 \"@adonde/tabla-municipios\"","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":"$W33","stdlib":"1","titling":"auto"}