Visualización de datos para desarrolladores web

Rate this content
Bookmark

En este masterclass, a través de proyectos prácticos, aprenderemos cómo utilizar Observable, una plataforma de codificación reactiva basada en el navegador, para construir rápidamente visualizaciones interactivas e informativas en JavaScript. Después de completar este masterclass, tendrás las herramientas y técnicas básicas que necesitas para comenzar a utilizar la visualización de datos para comprender mejor tu código, tus proyectos y tus usuarios, y tomar mejores decisiones basadas en datos como desarrollador.

This workshop has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Observable es una plataforma que permite crear, editar y compartir cuadernos de código en vivo directamente en el navegador, utilizando JavaScript. A diferencia de Jupyter, que se ejecuta de arriba hacia abajo y puede trabajar con varios lenguajes mediante la comunicación con un servidor, Observable opera de manera completamente en el navegador y utiliza una ejecución reactiva, donde cada cambio se actualiza automáticamente sin necesidad de ejecutar manualmente las celdas.

Plot es una herramienta de visualización de datos desarrollada por Observable, diseñada para facilitar la creación rápida de visualizaciones significativas. A diferencia de D3.js que es más flexible pero complejo, Plot ofrece una forma más sencilla y rápida de llegar a visualizaciones útiles, ideal para la exploración de datos y para aquellos que no son expertos en visualización de datos.

Si no tienes una cuenta en Observable y actualizas la página, perderás los cambios realizados. Sin embargo, puedes copiar y pegar el código en tu propio archivo para conservarlo. Para guardar cambios de forma permanente y gestionar cuadernos privados o públicos, necesitas crear una cuenta en Observable.

Observable por sí solo no está diseñado específicamente para visualizaciones en 3D, pero puedes integrar bibliotecas como 3JS que son aptas para crear visualizaciones en 3D dentro de los cuadernos de Observable. Esto te permite aprovechar la potencia de 3JS mientras trabajas dentro del entorno reactivo de Observable.

En Observable puedes manipular datos utilizando funciones de JavaScript y luego visualizarlos con Plot. Plot permite la asignación de datos a diferentes canales visuales como X, Y, color, y tamaño, y maneja tanto datos categóricos como continuos utilizando escalas y transformaciones adecuadas como logarítmicas, lineales, entre otras.

Observable permite integrar widgets de entrada HTML como casillas de verificación, botones de opción y deslizadores, que pueden vincularse a las visualizaciones. Esto permite a los usuarios interactuar con los datos visualizados directamente, filtrando, ajustando y explorando los datos de manera dinámica.

Anjana Vakil
Anjana Vakil
139 min
16 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El masterclass de hoy se centró en la visualización de datos en el desarrollo web, destacando su valor en la comprensión de las necesidades del usuario, la optimización del desarrollo de funciones y el análisis de bases de código. El masterclass cubrió varios temas como la manipulación de datos, la asignación de valores de datos abstractos a valores visuales y el uso de herramientas como D3 y Vega-Lite. Los participantes aprendieron cómo crear visualizaciones utilizando cuadernos Observable, bibliotecas de gráficos y diferentes tipos de gráficos. Los ejercicios incluyeron trabajar con el comportamiento del usuario y los tipos de dispositivos, las respuestas de la API y agregar interactividad a los gráficos. En general, el masterclass enfatizó la importancia de la visualización de datos para tomar decisiones informadas y acceder a información y análisis.

1. Introducción a la Visualización de Datos

Short description:

Bienvenidos a todos. Hoy exploraremos la visualización de datos y aprenderemos cómo crear visualizaciones significativas sin ser expertos. Discutiremos qué es DataVis y luego nos sumergiremos en ejercicios prácticos para construir nuestras propias visualizaciones.

Bienvenidos a todos. Espero que todos estén bien. Mi nombre es Anjana Vakil. Soy una Defensora del Desarrollador en Observable, que es una empresa que crea un entorno de cuaderno JavaScript para hacer visualización de datos rápida, fácil y esperemos que sencilla en el navegador, lo cual haremos hoy. Vamos a trabajar en el navegador para hacer algunas visualizaciones de datos. Así que aprenderán mucho más sobre eso.

Normalmente estoy basada en San Francisco, California, en los Estados Unidos. Pero en este momento, estoy hablando desde la ciudad de Nueva York. Puedo decir algunas palabras más sobre mí. Ahora trabajo como defensora del desarrollador. Tengo experiencia en humanidades, no en ciencias de la computación. Estudié filosofía y lingüística, y la ciencia social de la lingüística. Y así tuve algo de experiencia con Python y hice un poco de análisis de datos y visualización de datos en eso antes de convertirme en una desarrolladora de JavaScript de pila completa hace unos años atrás. trabajando en Observable y volviendo a pensar en datos y visualización de datos. Pero definitivamente no soy una experta en visualización. Trabajo con muchos expertos en visualización, así que me dicen en qué me equivoco, lo cual es genial. Pero lo que quiero transmitir hoy es que no tienes que ser un experto en JavaScript, en ciencia de datos, en visualización de datos para crear visualizaciones significativas. Así que lo que vamos a hacer hoy es hablar un poco sobre qué es DataVis. Y voy a usar DataVis mucho, porque decir visualización lleva mucho tiempo. Y luego vamos a ser muy prácticos, y vamos a pasar la mayor parte del masterclass trabajando en la construcción de nuestras propias visualizaciones. Así que hablaremos más sobre cómo vamos a hacer eso en un momento.

Probablemente vamos a alternar entre hablar como grupo y trabajar por nuestra cuenta. Así que siéntanse libres de tomar descansos o apagar su video o hacer lo que necesiten hacer. Todos estamos juntos en este mundo virtual. Así que no se preocupen si necesitan salir, volver, apagar el video, lo que sea. Y creo que con eso, eso cubre prácticamente nuestras bases. Definitivamente tomaremos descansos según sea necesario. Pero por favor, si necesitan un descanso o si tienen alguna pregunta, no duden en decirlo.

2. Visualización de Datos en el Desarrollo Web

Short description:

La visualización de datos es el proceso de traducir datos en una representación visual, lo que nos permite comprender rápidamente el significado y los patrones en los datos. Como desarrolladores web, la visualización de datos puede ayudarnos con el desarrollo de funciones, comprender el rendimiento y analizar las bases de código. Al visualizar los datos de uso, podemos identificar los puntos problemáticos de los usuarios y priorizar el desarrollo de funciones. También podemos analizar los datos de rendimiento para optimizar nuestros sitios y servicios. Además, visualizar datos relacionados con el código nos ayuda a comprender el proceso de desarrollo y colaborar de manera efectiva. Estos son solo algunos ejemplos de cómo la visualización de datos puede ser valiosa para los desarrolladores web.

Muy bien. Espero que todos puedan ver mi pantalla. Lo que voy a hacer es intentar dejarles el enlace a estas diapositivas en caso de que alguien tenga dificultades para encontrarlas o verlas. Así que... Disculpen. Un segundo. Solo me aseguro de tener el enlace correcto aquí. Sí, creo que sí. Dios mío, la vida virtual es difícil. ¿No? Creo que sí. Sin embargo, sería mucho más fácil si todos pudiéramos estar juntos en persona. Pero, por otro lado, no podríamos estar dispersos por todo el mundo en este momento si estuviéramos en una conferencia en persona. Bien, presentación virtual, aquí vamos. Este enlace, avísenme si no les funciona, pero debería ser accesible y tiene la presentación que vamos a ver. Y si puedo organizar mis ventanas, bien. Entonces, visualización de datos, ¿qué es y por qué nos importa como desarrolladores web? Y cómo podemos empezar a utilizar la visualización de datos para mejorar nuestro trabajo y crecer como desarrolladores. Eso es lo que vamos a explorar hoy. Bien. Entonces, ¿qué es la visualización de datos? Esa es una pregunta complicada con muchas respuestas posibles. Una respuesta posiblemente aburrida, pero muy correcta, diría que la visualización de datos es el proceso de traducir datos, ya sea algunos valores en una hoja de cálculo o en un objeto JSON o algo así, en una representación visual o gráfica de esos datos. Mecánicamente, eso es lo que estamos haciendo cuando visualizamos datos. Tomamos algunos números o cadenas o cualquier valor que tengamos y los convertimos en algo que podemos ver. Pero eso es una forma aburrida de describirlo. Porque, ¿qué es eso? ¿Por qué es importante? Bueno, tal vez sea importante para nosotros porque la visualización de datos es un tema grande y sofisticado que muchas personas buscan, personas con habilidades en ese campo, por lo que es una habilidad sofisticada que podemos aprender y agregar a nuestros currículums y portafolios y obtener nuevas oportunidades emocionantes, lo cual es totalmente cierto. Aunque tal vez no sea la motivación principal de por qué nosotros, como desarrolladores web, deberíamos estar interesados en la visualización de datos, aunque definitivamente es una gran habilidad para tener y algo que los empleadores valoran. Así que eso es un extra. Pero en realidad, la visualización de datos es un medio para un fin. El objetivo que tenemos cuando tenemos datos es encontrar significado en esos datos, encontrar ideas sobre el mundo o, en nuestro caso, el desarrollo web que estamos haciendo a través de esos datos. Y la visualización, cuando realmente podemos ver esos datos, puede ser una forma realmente excelente de comprender rápidamente el significado y los patrones en esos datos y lo que esos datos significan para nosotros en el mundo real. Ahí es donde realmente entramos en el objetivo principal. Como dijimos, la razón por la que intentamos hacer eso es porque si podemos tomar rápidamente una gran tabla o un archivo JSON o lo que sea y comprender lo que significa para nuestra vida diaria como desarrolladores, podemos hacer nuestro trabajo mejor. Podemos tomar mejores decisiones. Podemos ser más productivos. Podemos obtener ideas sobre las cosas que estamos construyendo, los usuarios para los que las estamos construyendo. Esa es realmente la motivación aquí. Esa es la idea de lo que estamos tratando de hacer. Estamos tratando de usar visualizaciones para descubrir rápidamente el significado, los patrones y las ideas de los datos. Bien, así que mirar datos es bastante fácil, como podemos y avísenme si esto es demasiado pequeño, pero podemos tomar algunos datos en una tabla y visualizarlos en el sentido de simplemente mostrarlos en un formato tabular y ver todos los valores. Pero, ¿qué tan fácil es encontrar un significado real en los datos que se muestran en una tabla como esta? Creo que es bastante difícil, pero si convertimos eso en una representación visual, donde aquí estamos viendo algunos tiempos de compilación para trabajos de prueba de integración, de los que hablaremos mucho más en nuestro próximo proyecto, podemos ver como, ooh, este trabajo de lint se está ejecutando muy rápidamente. Pero algunas de estas pruebas en Mac OS a veces tardan una eternidad y, ya saben, las pruebas de Ubuntu son un poco más rápidas. Yo uso Ubuntu, así que me gusta ver que Ubuntu funciona bien. Pero de todos modos, eso no viene al caso. El punto es que, creo, y no sé si estás de acuerdo, pero creo que es mucho más fácil... Entonces, esa es la idea a la que apuntamos con la visualización de datos. Y, por supuesto, en nuestro caso, como desarrolladores web, estaremos particularmente interesados en los datos relevantes para nuestro trabajo de construcción de sitios web. Bien. Ahora, ¿por qué, como desarrolladores web o aspirantes a desarrolladores web, deberíamos estar interesados en hacer visualización de datos? ¿O cómo puede ayudarnos directamente? Una cosa en la que puede ayudarnos es en el desarrollo de funciones. Mientras intentamos descubrir nuevas funciones para nuestros sitios web, para las interfaces de usuario que construimos, para los productos. Podemos analizar los datos de uso para ver con qué están luchando realmente las personas, o qué les falta, o qué tienen otros sitios que nosotros no tenemos. Como, ¿qué deberíamos construir? ¿Cuáles son algunos de los puntos problemáticos en el comportamiento de nuestros usuarios, en los flujos de trabajo de nuestros usuarios? Como, ¿cuáles son los diferentes casos de uso que tienen las personas que visitan nuestros sitios web? Y cómo podemos priorizar entre ellos para realmente priorizar nuestro valioso tiempo de desarrollo. Entonces, podemos hacer visualización de datos antes de construir algo para comprender qué deberíamos construir y cómo debemos priorizar nuestras decisiones al respecto. Luego, una vez que hemos construido una función, podemos analizar los datos posteriormente para ver cómo se está adoptando. ¿Realmente está sirviendo a las personas a las que esperábamos servir con ella? ¿Les gusta? ¿La están utilizando de la manera que esperábamos? ¿O la están utilizando de formas nuevas e interesantes? Y cómo podemos seguir mejorándola. ¿Cómo podemos seguir iterando en estas funciones que estamos construyendo? Porque como desarrollador web, a menudo pasamos mucho tiempo haciendo mejoras graduales e intentando brindar a las personas una mejor experiencia de usuario, en muchos casos. Ya sea en el front-end, en la interfaz de usuario, o en el back-end, en términos de cómo las personas están utilizando nuestras APIs o cómo pueden obtener información de nuestro sitio. Entonces, el desarrollo de funciones y analizar cómo las personas realmente utilizan las cosas que construimos es un gran campo donde la visualización puede ser útil. Vamos a ver algunos ejemplos de eso en nuestros proyectos de hoy. Otra cosa en la que realmente puede ayudarnos, y tal vez hayas visto esto en el mundo web, es comprender el rendimiento. Comprender cómo se mueven nuestros sitios y nuestros servicios. ¿Se mueven lo suficientemente rápido? ¿Hacen lo que se supone que deben hacer, cuando se supone que deben hacerlo, en un plazo razonable? Entonces, ¿qué tan rápido somos? ¿Qué tan confiables somos? ¿Dan errores la mayor parte del tiempo o le dan a las personas lo que quieren cuando lo quieren? ¿Dónde están los pequeños puntos problemáticos, tal vez en nuestro rendimiento? ¿Dónde están los cuellos de botella en los que podríamos enfocar de manera más eficiente nuestras energías para brindar a las personas una experiencia más eficiente? Y una vez que hayamos intentado analizar uno de esos cuellos de botella y realizar algunos cambios para mejorar el rendimiento de nuestro sitio, podemos analizar los datos posteriormente para ver qué tan bien funcionó esa inversión, qué tan bien funcionaron nuestros esfuerzos. Entonces, el rendimiento es definitivamente otra área importante donde, como desarrolladores web, podemos beneficiarnos mucho al analizar visualmente nuestros datos. Otra forma en que nos beneficia como desarrolladores web, o cualquier tipo de desarrolladores de software que podamos ser, es analizar los datos relacionados con el código que escribimos, las bases de código en las que trabajamos y cómo colaboramos en esas bases de código. Y esto es especialmente cierto para cosas como datos de código abierto, donde tenemos grandes comunidades de colaboradores, pero incluso si trabajamos en código cerrado internamente para una empresa o incluso en proyectos de hobby, podemos utilizar datos sobre el código y nuestros commits de Git y nuestros cambios en el código para comprender cosas sobre cómo está funcionando el proceso de desarrollo para nosotros. Por ejemplo, podemos visualizar cómo se organiza una base de código o cómo se ejecuta el flujo de desarrollo, como si mis compañeros de equipo pueden revisar mis cambios de manera oportuna, si las compilaciones que necesitamos hacer para que nuestro día a día como desarrolladores sea fluido están funcionando bien, qué tan productivo soy, qué tan productivo es mi equipo, qué tan productiva es mi empresa, qué tan productiva es mi comunidad colaboradora en términos de si nos lleva mucho tiempo revisar las solicitudes de extracción de los demás, si estamos enviando mucho código con muchos errores que luego tenemos que volver a ejecutar, volver a enviar para corregir las pruebas de integración y cosas así. Y si trabajamos en código abierto, especialmente, podemos comprender cosas como cuántos colaboradores tenemos, qué tan comprometidos estamos, cómo podemos ayudarlos a tener una mejor experiencia si somos mantenedores de código abierto o si estamos tratando de aprender cómo contribuir a un nuevo proyecto. Podemos comprender la comunidad a la que estamos tratando de unirnos. Estos son solo algunos de los campos donde, creo, la visualización de datos puede ser realmente valiosa para los desarrolladores web en particular. Pero me encantaría saber y si las personas quieren compartir cualquier pensamiento, ya sea desactivando el silencio o en el chat, si las personas han visto otros casos de uso realmente útiles para la visualización de datos en la vida diaria de un desarrollador web. Así que si hay otras cosas. Estos son solo algunos ejemplos, pero si hay otras cosas que has visto que te han ayudado realmente en este caso, nos encantaría saber de ellos si quieres dejar una nota en el chat o desactivar el silencio y decir hola. Bien, voy a darles un segundo para pensarlo y voy a tomar un sorbo de agua. Sí, los usamos mucho en la empresa de seguridad para hacer gráficos de ataques a los productos de las personas. Siempre hay un historial como hoy, te etiquetaron una vez, ayer tres veces y cosas así, y siempre tenemos gráficos disponibles y pueden filtrar por el tiempo que desean mostrar en la pantalla y cosas así.

Watch more workshops on topic

Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
Top Content
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
Construye un Datagrid Poderoso con AG Grid
React Summit 2024React Summit 2024
168 min
Construye un Datagrid Poderoso con AG Grid
Top Content
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo comenzar con AG Grid, cómo podemos habilitar la ordenación y filtrado de datos en la cuadrícula, la representación de celdas, y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Visualización de Datos Poderosa con AG Grid & AG Charts
React Advanced 2024React Advanced 2024
145 min
Visualización de Datos Poderosa con AG Grid & AG Charts
WorkshopFree
Brian Love
Brian Love
¿Tiene su aplicación React muchos (y muchos) datos que necesitan ser mostrados tanto en Data Grids como en Charts? ¿Quieren sus usuarios interactuar, analizar y trabajar con estos datos sin comprometer el rendimiento o la fiabilidad? AG Grid proporciona las mejores bibliotecas de React Data Grid & Charts que están llenas de características y ofrecen un rendimiento inigualable mientras son completamente personalizables. En esta masterclass, aprenderás cómo comenzar con AG Grid y AG Charts, y cómo utilizar sus características clave. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid & AG Charts en tu aplicación React.
Pintando con Datos: Introducción a d3.js
JSNation Live 2021JSNation Live 2021
130 min
Pintando con Datos: Introducción a d3.js
Workshop
Ian Johnson
Ian Johnson
d3.js es una poderosa biblioteca de JavaScript para construir visualizaciones de datos, pero cualquiera que haya intentado usarla rápidamente se da cuenta de que va más allá de elegir su tipo de gráfico favorito. Este masterclass está diseñado para brindarte una introducción práctica a los conceptos y técnicas esenciales para crear visualizaciones personalizadas de datos con d3.js. Al final de este masterclass, habrás creado una visualización interactiva y animada en un conjunto de datos realista que puedes cambiar fácilmente por el tuyo propio.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

(Más fácil) Visualización interactiva de datos en React
React Advanced 2021React Advanced 2021
27 min
(Más fácil) Visualización interactiva de datos en React
Top Content
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
Aceleración de GPU para servicios web y visualización en Node.js con RAPIDS
JSNation 2022JSNation 2022
26 min
Aceleración de GPU para servicios web y visualización en Node.js con RAPIDS
Welcome to GPU Accelerating Node.js Web Services and Visualization with Rapids. Rapids aims to bring high-performance data science capabilities to Node.js, providing a streamlined API to the Rapids platform without the need to learn a new language or environment. GPU acceleration in Node.js enables performance optimization and memory access without changing existing code. The demos showcase the power and speed of GPUs and rapids in ETL data processing, graph visualization, and point cloud interaction. Future plans include expanding the library, improving developer UX, and exploring native Windows support.
¡Nunca vuelvas a tener un Jupyter Notebook inmantenible!
ML conf EU 2020ML conf EU 2020
26 min
¡Nunca vuelvas a tener un Jupyter Notebook inmantenible!
Jupyter Notebooks are important for data science, but maintaining them can be challenging. Visualizing data sets and using code quality tools like NBQA can help address these challenges. Tools like nbdime and Precommit can assist with version control and future code quality. Configuring NBQA and other code quality tools can be done in the PyProject.toml file. NBQA has been integrated into various projects' continuous integration workflows. Moving code from notebooks to Python packages should be considered based on the need for reproducibility and self-contained solutions.
Compartir es Cuidar: Reutilizar Visualización de Datos Web en React Native
React Summit 2022React Summit 2022
26 min
Compartir es Cuidar: Reutilizar Visualización de Datos Web en React Native
PolarisViz is a collection of React components that provide consistent visual styles, motion design, and accessibility features. It aims to solve the problem of inconsistencies in visualization decisions made by different teams. The library is flexible for different visual styles and has centralized theme management. PolarisViz was integrated with React Native using a separate library called Polaris Viz core. Challenges included limitations in native apps and the need to share UI components between web and mobile platforms.