Visualización de datos para desarrolladores web

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

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.
Sign in to access video transcription and chapter summary.

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
Workshop
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
Workshop
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
Workshop
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.