2e:null 2f:["$","title",null,{"children":"Moviendo análisis a la web con Observable y DuckDB | José M. Zavala González | Observable"}] 34:Tbd4,canvas = { // Ajustar tamaño del canvas segun el ancho de la pantalla // const canvasWidth = 300; const canvasWidth = width; // const canvasHeight = Math.min(1000, canvasWidth); const canvasHeight = canvasWidth; // (Opcional) Pintar el background del canvas const context = DOM.context2d(canvasWidth, canvasHeight); const dpr = window.devicePixelRatio || 1; const bsr = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; const ratio = dpr / bsr; if (dpr !== bsr) { // set the 'real' canvas size to the higher width/height context.canvas.width = canvasWidth * ratio context.canvas.height = canvasHeight * ratio // ...then scale it back down with CSS context.canvas.style.width = canvasWidth + "px" context.canvas.style.height = canvasHeight + "px" } else { // this is a normal 1:1 device; just scale it simply context.canvas.width = canvasWidth context.canvas.height = canvasHeight context.canvas.style.width = "" context.canvas.style.height = "" } context.scale(ratio, ratio); context.imageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; // context.imageSmoothingEnabled= false; // context.fillStyle = "hsl(216deg 100% 13%)"; // context.fillRect(0, 0, canvasWidth, canvasHeight); // Pintar el background del área activa del canvas const minLength = Math.min(canvasWidth, canvasHeight); const dx = 0.5*(canvasWidth - minLength); const dy = 0.5*(canvasHeight - minLength); // context.fillStyle = "hsl(100deg 100% 30%)"; context.fillStyle = 'black'; context.fillRect(dx, dy, minLength, minLength); // Calcular escalas para posicionar pixeles const xScale = d3.scaleLinear([0, pixels], [dx, dx+minLength]); const yScale = d3.scaleLinear([0, pixels], [dy+minLength, dy]); const unitLength = xScale(1) - xScale(0); // context.fillStyle = "hsl(30deg 100% 50%)"; // context.fillRect(xScale(0), yScale(0), unitLength, unitLength); // Escala de color ("extent" del total transformado de pickups, y la escala de color correspondiente) const fillScale_transform_fn = Math.log10; // logaritmica para suavizar diferencias const fillScale = d3.scaleSequential( d3.extent(pickupAny.map( d => fillScale_transform_fn( Number(d.pickup) ) )), d3.interpolateViridis); // Viridis para colores // Para cada pixel... pickupAny.map(d => { // Determinar su color const transformed_value = fillScale_transform_fn( Number(d.pickup) ); const color = fillScale( transformed_value ); context.fillStyle = color; context.strokeStyle = "rgba(1, 1, 1, 0)"; // Zero opacity context.lineWidth = 0; // context.strokeStyle = color; // Pintarlo en su posición context.fillRect(xScale(Number(d.x)), yScale(Number(d.y)), unitLength, unitLength); // context.stroke(); }) return context.canvas; }35:T42e,Este notebook se basa en un tutorial desarrollado por Danielle Navarro llamado ["Como visualizar un billón de filas de datos en R usando Apache Arrow"](https://blog.djnavarro.net/posts/2022-08-23_visualising-a-billion-rows/). Su blog, ["Notes from a data witch"](https://blog.djnavarro.net/), es espectacular y deberían darle un ojo si aun no lo han hecho. Danielle explica los retos de graficar millones de observaciones e implementa una solución desde el lenguaje R y su computadora local. Esta visualización me encanta con pocos o muchos pixeles y lo quiero compartir con cuanta gente quiera verla. Dicho eso, no todos tienen experiencia programando o usando R. Incluso cuando sí, tener que descargar un IDE adicional y archivos de datos añade a la carga para uno llegar al punto de partida: el juego con la visualización. En este ejemplo, buscamos traducir el tutorial a un ambiente en la web que te lleve directamente a interactuar con un gráfico. Si todo corre bien, se podrá compartir este ejemplo con mayor facilidad y una barrera de entrada reducida.36:T642,## Desglose del traslado Replicar un análisis de R en la web involucra mover unas cuantas piezas que iremos detallando segun surjan. Para realizarlo, optamos por 4 herramientas: 1. **DuckDB-WASM** es completamente portátil. Si consigues que su SQL funcione en R o Python, va a trabajar igual en la web. El WebAssembly (WASM) permite que los cálculos pesados puedan correr en el navegador del usuario en vivo y sin necesidad de servidores para apoyo. 2. **ObservableHQ** facilita muchísimo enfocarse en el código de procesar y visualizar datos. Incluye de por si un [cliente de DuckDB](https://observablehq.com/@observablehq/duckdb) y remueve la necesidad de pasar un mal rato configurando WASM, organizando reactividad y promesas, etc. 3.

**{dbplyr}** es un paquete de R que traduce los verbos del tidyverse a un SQL válido para enviar a bases de datos como DuckDB. Especificamente la función de `show_query` nos salva de tener que reescribir un query manualmente. 4. **GitHub Pages** está hosteando una copia de los archivos del [nyc-taxi-tiny](https://github.com/jzavala-gonzalez/nyc-taxi-tiny) dataset que [disponibiliza](https://arrow.apache.org/docs/r/articles/dataset.html) Voltron Labs. La razón de esto es que Pages permite enviar los datos con permisos [CORS](https://medium.com/@baphemot/understanding-cors-18ad6b478e2b) suficientemente flexibles (Incluyen el header de `Access-Control-Allow-Origin: *`) para que WASM los acepte sin preocuparse por ciberataques o algo asi.37:T455,## Resumen La idea de este notebook es demostrar que **hay análisis que pueden reducir su barrera de entrada al subirlos a la web**. En este ejemplo, el usuario o developer no tiene que descargar R y RStudio ni los archivos parquet del dataset nyc-taxi-tiny. Al usar Observable, también evitamos configurar WebAssembly, reactividad y deployment que típicamente requiere conocimiento sobre el frontend y backend. DuckDB se reconoce por su velocidad pero aquí sobresale su _portabilidad_. Si un query que estamos probando en el DuckDB de R o Python funciona, asimismo traducirá a la versión web en DuckDB-WASM. El paquete {dbplyr} de R es espectacular aquí porque nos permite utilizar el API del dplyr para redactar SQL que DuckDB acepta. De verdad quisiera que hubiera una versión de dbplyr que pudiera correr directamente en el browser para tenerlo más disponible. La visualización dibuja cuadrados con colores correspondiente a la cantidad de observaciones contenidas por dicho cuadrado. Se usa un elemento canvas para mantener la eficiencia al aumentar la cantidad de "pixeles" visualizados. 38:T439,## 🦆 DuckDB y Arrow para magia La computadora en que lees esto puede analizar miles y millones de datos cuando le entregas herramientas que la apoyen. En el tutorial original de Danielle, esta herramienta es el paquete {arrow} para R. Arrow implementa muchos trucos para agilizar sus cálculos y eso se refleja en cuan rápido el código de R corre. Para cumplir con el rol de Arrow en este ambiente web, miramos hacia DuckDB. DuckDB es un sistema de bases de datos capaz de correr nuestros datos. Es compatible con los archivos de datos con formato '.parquet' que utilizamos y también puede leerlos remotamente desde la web. ¿Y mencioné que 🏃‍♀️💨_vuelaaa_? Entiendo que es tan veloz que nos toma más tiempo llevarle los datos que a DuckDB procesarlos. Importantemente, utilizamos la versión de WebAssembly (WASM) de DuckDB que nos permite hacer el trabajo _dentro de la misma computadora_ donde lees esto. Esto cae en sintonía con Observable que también ejecuta sus notebooks localmente y nos salva de tener que averiguar como correr un servidor remoto. 39:T40c,Es super legible! El API de dplyr permite crear el query un paso a la vez. Sin embargo, DuckDB necesita _SQL_ para ejecutar queries. Si añadimos una sola línea al query, podemos obtener un borrador de un query en SQL: ```r tbl(con, 'nyc_taxi_tiny') |> ... count(x, y, name = "pickup") |> show_query() # Magia! ``` Y el SQL que resulta: ```sql SELECT x, y, COUNT(*) AS pickup FROM ( SELECT *, CAST(ROUND(4000.0 * unit_scaled_x, CAST(ROUND(0.0, 0) AS INTEGER)) AS INTEGER) AS x, CAST(ROUND(4000.0 * unit_scaled_y, CAST(ROUND(0.0, 0) AS INTEGER)) AS INTEGER) AS y FROM ( SELECT *, (pickup_longitude - -74.05) / 0.3 AS unit_scaled_x, (pickup_latitude - 40.6) / 0.3 AS unit_scaled_y FROM nyc_taxi_tiny WHERE (NOT((pickup_longitude IS NULL))) AND (NOT((pickup_latitude IS NULL))) AND (pickup_longitude > -74.05) AND (pickup_longitude < (-74.05 + 0.3)) AND (pickup_latitude > 40.6) AND (pickup_latitude < (40.6 + 0.3)) ) q01 ) q02 GROUP BY x, y ```3a:[] 32:{"id":"f2a54755449473eb","slug":"moviendo-analisis-a-la-web-con-observable-y-duckdb","title":"Moviendo análisis a la web con Observable y DuckDB","thumbnail":"52dd7d05598924c79cd8fafba5ee58cc830b068c58b84ae66cccf722e8738070","access_level":"public","create_time":"$D2022-11-21T01:12:27.280Z","update_time":"$D2023-08-25T18:59:36.068Z","view_time":null,"first_public_time":"$D2022-12-04T22:51:00.017Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"247b19faa48b7d89","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":"starter_2024"},"version":707,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c62f0243f8f45b0","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":null}],"members":[{"type":"individual","id":"2c62f0243f8f45b0","login":"jzavala-gonzalez","name":"José M. Zavala González","avatar_url":"https://avatars-next.observableusercontent.com/c80357963553ac341ea90ed3d79296a72d004aa90d9b89afd76f17e04dcf9277","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Moviendo análisis a la web con Observable y DuckDB","cells":[{"id":0,"value":"# Moviendo análisis a la web con Observable y DuckDB","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":694,"value":"### [**ENGLISH TRANSLATION AVAILABLE HERE**](https://observablehq.com/d/3bfff6bbb49ea6ac)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"viewof pixels = Inputs.range([2, 1000], {label: \"Pixeles\", step: 1, value: 150})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"viewof year_drop = Inputs.select([...Array(8).keys()].map(i => (2009+i).toString()), {label: \"Año\", value: \"2009\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"\n

bservableHQ como plataforma de publicación

\n\n\nUna libreta de Observable (esto que estas leyendo) simplifica publicar visualizaciones ampliamente. Provee una plataforma que está diseñada para crear visuales sin tener como prerequisito conocer como funciona un website. Sin embargo, Observable aun es un andamiaje sobre los pedazos más fundamentales de la web (HTML, CSS y Javascript), que garantiza algo de longevidad del código de la visualización. \n\nPermite a los usuarios interactuar con los visuales muy eficientemente, gracias a su modelo de reactividad. Así es como la visualización responde velozmente a los \"sliders\" incluidos en esta libreta.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"## Inicializando la base de datos\n\nPara empezar, abrimos el cliente de DuckDB-WASM y creamos el VIEW de los archivos hosteados en Github Pages:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"dbInitial = DuckDBClient.of({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"view_query = `\nCREATE OR REPLACE VIEW nyc_taxi_tiny AS\nSELECT *\nFROM parquet_scan(${(urls)});\n`","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"El `view_query` referencia otra celda llamada `urls` que es un string de un listado de enlaces a todos los archivos parquet del dataset: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"urls","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"Será esto una buena práctica que debe replicarse para otros usos? Probablemente no, ya que ese copy-paste tiende a abrir a uno para un SQL injection attack. Ni modo, funciona para este ejemplo limitado. Esto debería remediarse tan pronto DuckDB implemente un método para tomar ventaja de datasets con particiones Hive (ej. '`.../year=2009/month=1/...`' en el nombre del archivo).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"El siguiente paso es informar a Observable que hay que esperar que DuckDB registre el VIEW del dataset antes de empezar a enviar queries. Observable usualmente sabe determinar el orden de sucesos apropiado, pero el VIEW se crea como un \"efecto secundario\" y hay que especificar la dependencia explícitamente. Mike Bostock explica el proceso en mayor detalle en [este notebook](https://observablehq.com/@observablehq/derived-views-with-duckdb).\n\nEn términos prácticos: **Cada vez que realizamos un query que crea un VIEW o una tabla nueva, definimos una \"nueva\" conexión que depende de este query inicial**. Utilizamos mucho este patrón a lo largo del análisis para asegurar que el notebook mantenga el flujo de su reactividad.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"dbView = dbInitial.query(view_query)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"con = dbView, dbInitial","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"SELECT *\nFROM nyc_taxi_tiny\nLIMIT 5;","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:con"},{"id":100,"value":"SELECT date_part('year', pickup_datetime) as pickup_year, date_part('month', pickup_datetime) as pickup_month, COUNT(*)\nFROM nyc_taxi_tiny\nGROUP BY pickup_year, pickup_month\nORDER BY pickup_year, pickup_month;","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:con"},{"id":671,"value":"SELECT pickup_longitude, pickup_latitude\nFROM nyc_taxi_tiny\nWHERE pickup_longitude IS NOT NULL","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:con"},{"id":401,"value":"Para iniciar se crea el VIEW del dataset en la celda `dbView`. Siguiente, se establece una conexión (`con`), que es una copia de la conexión inicial (`dbInitial`) pero materializada luego de que `dbView` complete. Los queries que usan el VIEW nuevo entonces referencian a `con` en vez de `dbInitial`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"## Query de recogidos de taxi\n\nQueremos agregar las coordenadas de los recogidos (\"pickups\") de taxis a regiones específicas que podamos visualizar. El código en R que Danielle usa para realizar el query en su tutorial es (más o menos) el siguiente:\n\n```r\n# Parametros\nx0 <- -74.05\ny0 <- 40.6\nspan <- 0.3\npixels <- 4000\n\n# El query\nnyc_taxi_tiny |>\n filter(\n !is.na(pickup_longitude),\n !is.na(pickup_latitude),\n pickup_longitude > x0,\n pickup_longitude < x0 + span,\n pickup_latitude > y0,\n pickup_latitude < y0 + span\n ) |>\n mutate(\n unit_scaled_x = (pickup_longitude - x0) / span,\n unit_scaled_y = (pickup_latitude - y0) / span,\n x = as.integer(round(pixels * unit_scaled_x)), \n y = as.integer(round(pixels * unit_scaled_y))\n ) |>\n count(x, y, name = \"pickup\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"Ok, en realidad el proceso para realizar este query es algo diferente a lo presentado. Previo a recibir el SQL con `show_query()` hay que traducir el abrir el dataset usando el paquete {arrow} (como en el tutorial) a usar el paquete {dbplyr} con DuckDB. Los detalles están hosted en [este Quarto notebook](https://jzavala-gonzalez.github.io/nyc-taxi-tiny/nyc_taxi_tiny_testing) en GitHub Pages.\n\nEl query ajustado para que Observable pueda entrar los parámetros elegidos por el usuario es el siguiente:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"CREATE OR REPLACE TABLE pickupRaw AS\nSELECT x, y, COUNT(*) AS pickup\nFROM (\n SELECT\n *,\n CAST(ROUND(${pixels} * unit_scaled_x, CAST(ROUND(0.0, 0) AS INTEGER)) AS INTEGER) AS x,\n CAST(ROUND(${pixels} * unit_scaled_y, CAST(ROUND(0.0, 0) AS INTEGER)) AS INTEGER) AS y\n FROM (\n SELECT\n *,\n (pickup_longitude - -74.05) / 0.3 AS unit_scaled_x,\n (pickup_latitude - 40.6) / 0.3 AS unit_scaled_y\n FROM nyc_taxi_tiny\n WHERE\n (NOT((pickup_longitude IS NULL))) AND\n (NOT((pickup_latitude IS NULL))) AND\n (pickup_longitude > -74.05) AND\n (pickup_longitude < (-74.05 + 0.3)) AND\n (pickup_latitude > 40.6) AND\n (pickup_latitude < (40.6 + 0.3))\n ) q01\n) q02\nGROUP BY x, y","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"pickupRawQuery","database":"var:con"},{"id":502,"value":"Este query es un poco distinto al resultado exacto provisto por `show_query()` para que funcione con el \"string interpolation\" de Observable.\n\nAquí están los resultados de ese query: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"con_pickupRaw = pickupRawQuery, con","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"SELECT *\nFROM pickupRaw","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"pickupRaw","database":"var:con_pickupRaw"},{"id":429,"value":"Un detalle adicional del tutorial original que podemos replicar con DuckDB es calcular todas las combinaciones de coordenadas XY. Hacemos esto usando implicitamente un [`CROSS JOIN`](https://www.sqlshack.com/sql-cross-join-with-examples/) y la funcion `generate_series` del dialecto SQL de DuckDB:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"CREATE OR REPLACE TABLE xycombs AS\nSELECT series.generate_series as x, series2.generate_series as y\nFROM generate_series(0, CAST(${pixels} AS INTEGER)-1 ) as series,\n generate_series(0, CAST(${pixels} AS INTEGER)-1 ) as series2","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"xycombsQuery","database":"var:con"},{"id":231,"value":"con_xycombs = xycombsQuery, con","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"SELECT *\nFROM xycombs","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:con_xycombs"},{"id":431,"value":"El query de pickups con todas las combinaciones de XY se consigue con un `JOIN` y se rellenan los valores vacios con `COALESCE`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"con_pickupQuery = pickupRaw, xycombsQuery, con","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"CREATE OR REPLACE TABLE pickup AS\nSELECT xycombs.x, xycombs.y, COALESCE(pickup, 0) AS pickup\nFROM xycombs\nLEFT JOIN pickupRaw\nON xycombs.x = pickupRaw.x\nAND xycombs.y = pickupRaw.y","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"pickupQuery","database":"var:con_pickupQuery"},{"id":240,"value":"con_pickup = pickupQuery, con","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"SELECT *\nFROM pickup","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"pickup","database":"var:con_pickup"},{"id":342,"value":"## Crear la visualización\n\n**La visualización final está al comienzo de la página con comentarios correspondientes a cada paso.** Para aliviar el peso de graficar ${(pixels**2).toLocaleString()} pixeles, podemos primero filtrar nuestros resultados para solo incluir aquellos pixeles con al menos un recogido.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"SELECT *\nFROM pickup\nWHERE pickup > 0","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"pickupAny","database":"var:con_pickup"},{"id":701,"value":"{\n console.log(JSON.stringify(pickupAny))\n return pickupAny;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"Asi solo tenemos que graficar ${pickupAny.length.toLocaleString()} pixeles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"# Apéndice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"## URLs de archivos en el dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"// viewof years = Inputs.checkbox([...Array(14).keys()].map(i => (2009+i).toString()), {label: \"Year(s)\", value: ['2009']})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"years = [year_drop]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"yearstrs = years.map(s => 'year='+s)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"fileurls_filtered = fileurls.filter(u => yearstrs.some(ys => u.includes(ys)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"fileurls","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"fileurls = await fetch(\"https://raw.githubusercontent.com/jzavala-gonzalez/nyc-taxi-tiny/main/fileurls.txt\").then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.text().then(t => t.split('\\n'));\n}).catch(error => {return error;})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"urls = ('[' + fileurls_filtered.map(s => \"'\"+s+\"'\").join(',') + ']')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"`\nSELECT date_part('year', pickup_datetime) as pickup_year, date_part('month', pickup_datetime) as pickup_month, COUNT(*)\nFROM parquet_scan(${urls})\nGROUP BY pickup_year, pickup_month\nORDER BY pickup_year, pickup_month;\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"// Esto va a crashear si hay demasiados pixeles\n// Plot.plot({\n// width: width,\n// y: {reverse: true},\n// padding: 0,\n// color: {\n// scheme: \"bupu\",\n// },\n// marks: [\n// Plot.cell(pickupAny, {\n// x: d => Number(d.x),\n// y: d => Number(d.y),\n// fill: d => Math.log10(Number(d.pickup)) ,\n// inset: 0.0,\n// })\n// ]\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"# Referencias\n\nDanielle Navarro. 2022. “How to Visualise a Billion Rows of Data in R with Apache Arrow.” August 23, 2022. https://blog.djnavarro.net/posts/2022-08-23_visualising-a-billion-rows.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"