Aprende JavaScript observable con cuadernos observables

Dentro Una guía para principiantes sobre el uso de Observable JavaScript, R y Python con Quarto, describí cómo usar un Observable dentro de un archivo Quarto. Sin embargo, uno de mis mejores consejos Libro en cuarto Observable está escribiendo código en usuarios que aprenden JavaScript Sitio web de la comunidad observable. Incluso si solo planea usar JavaScript observable en sus documentos de Quarto, es una buena idea crear una cuenta gratuita y usar las herramientas allí. Los fragmentos de código hacen que tener una sola cuenta sea útil y lo ayudarán a aprender el código necesario para las tareas básicas.

Otra ventaja de tener una cuenta ObservableHQ.com puede ejecutar rápidamente una celda de cuaderno para ver los resultados. Esto puede ser un ahorro de tiempo útil en comparación con la codificación en un archivo Quarto. En RStudio, actualmente no puede trabajar individualmente ojs Las celdas en Quarto documentan de la misma manera que con las celdas en R y Python. Debe enviar el documento completo para ver los resultados ojs células.

Los portátiles Observable son la mejor experiencia interactiva para ejecutar código Observable personalizado, dijo un portavoz de RStudio a través de un mensaje. “Ya veo {ojs} Fragmentos en Quarto para integrar algunos JavaScript/Observables en la documentación de R/Python Quarto, o Para integrar un cuaderno con mucho JavaScript en un proyecto más grande, como un libro o un sitio web, más allá de la salida de un solo cuaderno”.

Después de escribir su código en un cuaderno alojado en el sitio web de la comunidad de Observable, puede copiarlo y pegarlo en un documento de Quarto. Aún más ingenioso, puede importar una función o variable llamada desde cualquier bloc de notas público (no solo el suyo) a su bloc de notas o documento Quarto y utilícelo allí.

Este artículo lo guía a través de la creación de un cuaderno Observable alojado, agregando sus propios componentes de JavaScript y luego importando código de cuadernos públicos para su reutilización.

Paso 1: Cree un nuevo cuaderno en ObservableHQ.com

Necesitarás una cuenta gratuita para empezar ObservableHQ.com. Una vez que tenga una cuenta, haga clic en ella Nuevo en la parte superior derecha de la pantalla para crear una nueva libreta. Verá un montón de plantillas, así como la opción de comenzar con un cuaderno en blanco.

Si selecciona un cuaderno vacío, debería ver una “celda” de cuaderno. # Untitled. El es soltero # es el símbolo Markdown para texto de encabezado grande. Puede continuar y cambiar “Sin título” a cualquier nombre que desee para el cuaderno. Haga clic en esa área del documento y debería ver un pequeño alfiler en el margen izquierdo. Esto “fija” el código para que aparezca como se muestra en la Figura 1. Si hace clic en un alfiler de color, se “desancla” y el código ya no es visible. (El código aún está disponible: haga clic en el menú de tres puntos junto al cuadro, busque el pin y haga clic en él. Verá el código fijado y reaparecerá).

Si hace clic en el triángulo a la derecha de la celda, puede ejecutar el código para ver los resultados, en cuyo caso es solo el texto del título. Si usó cuadernos Jupyter o R ​​Markdown, una diferencia notable es la forma en que se ven los resultados arriba celda, no debajo de ella. Puede llevar algo de tiempo acostumbrarse.

Paso 2: Agregue una nueva celda Observable JS al cuaderno

Si pasa el cursor sobre una celda cerrada abierta, debería ver una opción en la que se puede hacer clic que puede cambiar el modo de la celda. Las opciones se muestran como Markdown, varias líneas horizontales, HTML <>y como JavaScript {}. Abajo y arriba verá signos más (+) que le permitirán agregar una nueva celda a la libreta. Haga clic en el signo más inferior para agregar una nueva celda debajo del encabezado. Este es uno de los lugares donde aparecen herramientas útiles para fragmentos de código.

La figura 2 muestra algunas de las opciones disponibles para una celda de JavaScript observable.

Sharon Machlis, fundición

Si tu escoges Archivo adjunto->Subir archivo local obtendrá un cuadro de diálogo para seleccionar y cargar un archivo local. Después de hacer esto, el código que completa la descarga debería caer en la celda. Deberías ver dos líneas: una dice algo como

your_file_name = Array(32) [Object, Object, Object . . . ]

y así

your_file_name = FileAttachment("your_file_name.csv").csv()

esta es la primera linea resultado de su código, una matriz de objetos JavaScript. Si hace clic en el triángulo al lado Arrayse expande para ver sus datos.

Paso 3: agregue una tabla de JavaScript al cuaderno

Agregue otra celda de JavaScript, desplácese hacia abajo y seleccione la opción de tabla de JavaScript en la parte inferior Mesas. Código viewof table = Inputs.table(cars) debe ingresar a la celda. Si ejecuta esto, obtendrá una tabla del conjunto de datos del automóvil instalado. Cambio cars vaya al nombre de los datos que importó y obtendrá una tabla con sus datos.

Si hace clic en el signo de interrogación en el círculo debajo de la lista de iconos en el extremo derecho (o simplemente ? cuando el cursor no está en una celda) obtendrá una lista de archivos de ayuda. El archivo de ayuda “Agregar tabla” explica esto Inputs.table() espectáculos la mesa. puede aceptar opciones adicionales como sort. La tabla tiene un enlace en el texto de ayuda. Cuaderno con más información sobre la entrada: Tabla.

Lo mismo ? el texto de ayuda lo guía para agregar un gráfico o un control deslizante interactivo desde la biblioteca integrada de gráficos observables.

Paso 4: Importe componentes de JavaScript para reutilizarlos

Puede usar la función de búsqueda del sitio en el menú de navegación superior para buscar cuadernos con gráficos, información u otras cosas que desee aprender o reutilizar. De acuerdo con los términos de servicio del sitio web de Observable, el código en los cuadernos públicos está disponible para importar y usar en sus cuadernos alojados en ObservableHQ.com. Si desea utilizar este código en un documento Quarto externo, asegúrese de que tenga licencia para su reutilización o de que tenga otro permiso.

Importar función pública

Para usar la función de otra persona, agregue lo siguiente a su cuaderno y comience a usar la función con los argumentos necesarios como de costumbre:

import {TheFunctionName} from "@user/notebook-name"
 

También puede cambiar el nombre de una función utilizando la sintaxis:

import {their_function as my_function}
from "@username/notebook_name"

Puedes usar ese código más tarde. my_function(mydata) (agregando cualquier argumento de función adicional según sea necesario).

Tenga en cuenta que puede usar la misma manera import {TheFunctionName} from "@user/notebook-name" Código en documento en cuarto ojs pila de código, no solo en ObservableHQ.com.

Importar la celda

En el cuaderno de ObservableHQ.com, al hacer clic en el menú de tres puntos a la izquierda del cuadro con el nombre, Copia la importación si la celda se puede copiar. Como se muestra en la Figura 3, al hacer clic obtendrá el código de importación correcto.

Reutilización de código en cuadernos observables

Algunos portátiles creados por desarrolladores observables no muestran las licencias de reutilización. Mike Bostock, cofundador y CTO de Observable, Inc., me dijo que probablemente los desarrolladores tienden a verlos como libros de texto para leer en lugar de código para reutilizar. No es que la empresa no quiera que otros usen su código fuera de la plataforma.

“Nos encanta ver a la gente crear nuevas formas de usar Observable [JavaScript] en otras tecnologías”, dijo Bostock. Si desea utilizar el código en una libreta que no tiene una licencia de código abierto designada, agregó Bostock, “alentamos a las personas a que se comuniquen con el autor”.

La importación también funciona con datos, gráficos e incluso texto de otro bloc de notas, ya sea tuyo o de otra persona.

“Piense en una celda como una función, excepto que no tiene argumentos”, es el consejo. Observable no es JavaScript documentos. Bostock también tiene un ejemplo con explicaciones. Gráfico de barras, Cuaderno horizontal.

Esta forma de pensar puede ayudarlo a modularizar su código y reutilizar el trabajo de otros. Y puede reescribir instantáneamente el código para reemplazar los valores al importar usando Observable. con la sintaxis de importación“, dijo Bostock. “Esto le permite tomar contenido de otro cuaderno, como un gráfico, y reemplazar sus datos con sus propios datos, siempre que sus datos tengan la misma estructura (los mismos nombres y tipos de columna)”. eso array.map convirtiéndolo en lo que tiene que ser.

Para ver Importar acceso de Observable para más información y Ejemplo en cuarto de timelyportfolio Reutilizando la tabla de resumen de datos con gráficos para crear algo como el que se muestra en la Figura 4.

Solo necesita dos líneas de código, cada una en su propia celda de cuaderno:

import { SummaryTable } from "@observablehq/summary-table"
SummaryTable(mydata)

Las dos líneas deben estar en celdas separadas en ObservableHQ.com (pueden estar en una celda Observable en un documento en cuarto).

Gracias a Bob Rudis, vicepresidente de ciencia de datos de la empresa de seguridad. Inteligencia de ruido grisincluso puede guardar un cuaderno Observable como un documento Quarto nativo con un aplicación de óxido o extensión de cromo, al cuarto.

Compatibilidad con idiomas para portátiles observables

Le pregunté a Mike Bostock si Observable, Inc. consideraría alojar otra documentación que incluya Quarto o R y/o Python, además de JavaScript.

“Definitivamente hablamos mucho sobre eso”, dijo Bostock, “pero hay algunas consideraciones… Estamos basados ​​en la web y enfocados en ejecutar código en el cliente” y nuestro objetivo es ofrecer una experiencia “rápida y fluida”. Sin embargo, Bostock dijo que lo estaba viendo. Ensamblaje web proyectos como piodido Ofreciendo cálculos de idioma en el navegador.

Por ahora, al menos, la plataforma web Observable solo admite JavaScript, Markdown y HTML. próximo: Aprenda la visualización de datos con Observable JavaScript.