Curso JavaScript desde 0: Gráficos (Plotly JS) - 114
Summary
TLDREn este capítulo, se presenta la librería Plotti.js, una herramienta de código abierto que permite crear gráficos avanzados en JavaScript. Se discuten más de 40 tipos de gráficos disponibles, incluyendo barras horizontales y verticales, circulares, de líneas, dispersión, burbujas, ecuaciones, 3D, estadísticos, y mapas. Se ofrece un ejemplo práctico de cómo integrar Plotti.js en una página web, pasos para importar la librería y crear un gráfico de dona (tarta) con datos de ejemplo. El video también menciona otras librerías como alternativas y enfatiza la importancia de revisar la documentación y corregir errores comunes como mayúsculas y minúsculas en las funciones. Finalmente, se invita a los espectadores a explorar otras opciones y se alude al próximo capítulo del curso de JavaScript.
Takeaways
- 📚 En este capítulo se discute sobre la librería Plotti.js, una herramienta para crear gráficos avanzados en JavaScript.
- 📈 Plotti.js ofrece más de 40 tipos de gráficos, incluyendo barras horizontales y verticales, circulares, de anillos, líneas, dispersión, burbujas, ecuaciones, 3D, estadísticos, mapas y más.
- 🆓 Plotti.js es gratuito y de código abierto, lo que significa que su uso es libre y se puede modificar el código fuente según sea necesario.
- 🔍 El script destaca la importancia de buscar y comparar diferentes librerías de gráficos en JavaScript antes de elegir una para usar.
- 👀 Se menciona que hay otras librerías como Google Charts y Chart.js, que son alternativas a Plotti.js para crear gráficos en JavaScript.
- 🛠️ El video proporciona un ejemplo práctico de cómo integrar Plotti.js en un documento HTML y cómo utilizarla para crear un gráfico de tipo 'pie' (tarta).
- 📝 Se detalla el proceso de incluir la librería en el código HTML, colocando el enlace a Plotti.js dentro de las etiquetas `<head>`.
- 📊 Se explica cómo crear un array de datos para el gráfico, utilizando ejemplos de productos y sus existencias como datos de entrada.
- 🎨 Se discute la personalización del gráfico a través de estilos CSS y configuraciones específicas de Plotti.js.
- 👨🏫 El script actúa como una guía para principiantes que necesitan crear gráficos complejos en JavaScript y cómo aprovechar Plotti.js para ello.
- 🔚 Al final del capítulo, se menciona que se realizará una conclusión del curso de JavaScript en el próximo capítulo, lo que implica que este es parte de una serie de lecciones.
Q & A
¿Qué es Plotti.js y qué permite hacer?
-Plotti.js es una librería de gráficos que permite realizar gráficos avanzados en JavaScript. Ofrece más de 40 tipos de gráficos, incluyendo gráficos de barras (horizontales y verticales), gráficos circulares, de anillos, de líneas, de dispersión, de burbujas, gráficos de ecuación, gráficos 3D, estadísticos, mapas, entre otros.
¿Por qué Plotti.js es una buena opción para trabajar con gráficos en JavaScript?
-Plotti.js es una buena opción porque es gratuita, de código abierto y cuenta con una gran variedad de tipos de gráficos. Además, su documentación es fácil de seguir y ofrece ejemplos y referencias para facilitar su uso.
¿Cómo se puede incluir Plotti.js en un proyecto HTML?
-Para incluir Plotti.js en un proyecto HTML, se debe ir a su página oficial, buscar el código para incluir la librería y pegar ese código dentro de las etiquetas `<head>` de tu documento HTML.
¿Cómo se crea un gráfico de tipo dona con Plotti.js?
-Para crear un gráfico de tipo dona (también conocido como gráfico de pastel o pizza) en Plotti.js, se debe definir un array 'x' con las etiquetas de los datos y un array 'y' con los valores correspondientes. Luego, se utiliza la función 'plotly.newPlot' pasando el ID del elemento donde se desea mostrar el gráfico, el título y los datos definidos.
¿Qué son las etiquetas 'head' en un documento HTML y por qué son importantes?
-Las etiquetas 'head' en un documento HTML son una sección donde se incluyen metadatos y referencias a recursos externos como hojas de estilo CSS, scripts de JavaScript y más. Son importantes porque proporcionan información sobre el documento y permiten la integración de recursos adicionales que son necesarios para su funcionamiento.
¿Qué es un gráfico de barras y cómo se puede implementar con Plotti.js?
-Un gráfico de barras es una representación de datos donde los valores se muestran mediante barras horizontales o verticales. Con Plotti.js, se puede implementar un gráfico de barras definiendo los datos en arrays y utilizando la función 'plotly.newPlot', especificando el tipo de gráfico y los datos correspondientes.
¿Cómo se pueden descargar los gráficos generados con Plotti.js?
-Los gráficos generados con Plotti.js pueden ser descargados por los usuarios si se incluyen los iconos de descarga en el gráfico. Al hacer clic en estos iconos, se permite la descarga del gráfico en formato PNG u otro formato compatible.
¿Cuáles son algunas alternativas a Plotti.js para trabajar con gráficos en JavaScript?
-Algunas alternativas a Plotti.js para trabajar con gráficos en JavaScript incluyen Google Charts, Chart.js y D3.js, entre otros. Cada una de estas librerías ofrece diferentes características y opciones para la creación de gráficos.
¿Cómo se soluciona un error común al usar Plotti.js, como 'plotly.newPlot' no es una función?
-Un error común como 'plotly.newPlot' no es una función puede deberse a un mal uso de mayúsculas y minúsculas o a que la librería no se haya incluido correctamente en el proyecto. Asegurarse de que el nombre de la función y la inclusión de la librería sean correctos, y revisar la consola de errores para identificar y corregir problemas.
¿Qué se puede hacer para aprender más sobre Plotti.js y otros temas relacionados con JavaScript?
-Para aprender más sobre Plotti.js y otros temas de JavaScript, se pueden buscar tutoriales en línea, asistir a cursos en plataformas de aprendizaje, leer documentación oficial y participar en foros y comunidades de desarrolladores.
Outlines
📊 Introducción a Plotti.js
En este primer párrafo, se presenta la librería Plotti.js, una herramienta de código abierto y gratuita que permite crear gráficos avanzados en JavaScript. Se menciona que Plotti.js incluye más de 40 tipos de gráficos, como barras horizontales y verticales, circulares, de anillos, líneas, dispersión, burbujas, ecuaciones, gráficos 3D, estadísticos, mapas, entre otros. El script ofrece una guía sobre cómo integrar Plotti.js en un proyecto web, incluyendo la búsqueda de la librería, la selección de ejemplos y cómo incluirla en el código HTML a través de etiquetas 'head'. También se sugiere la posibilidad de explorar otras librerías de gráficos disponibles en línea.
🛠️ Creación de un gráfico de tipo dona con Plotti.js
El segundo párrafo se enfoca en la creación de un gráfico de tipo dona utilizando Plotti.js. El script proporciona un ejemplo práctico de cómo definir los datos y estructurar el código JavaScript para generar el gráfico. Se describe el proceso de definir un array 'x' con ejemplos de productos como 'zapatos marrones', 'lentes rosados', 'sombreros azules' y un 'pantalón'. Luego, se asigna una cantidad de stock a cada producto y se utiliza la función 'plotly.newPlot' para renderizar el gráfico con un título y los datos correspondientes. Se menciona la importancia de seguir las convenciones de la librería para evitar errores y se proporciona un ejemplo de cómo corregirlos si surgen.
🌟 Conclusión y recursos adicionales para trabajar con gráficos en JavaScript
El tercer párrafo concluye el tutorial enfocándose en cómo utilizar Plotti.js y otras librerías para trabajar con gráficos en JavaScript. Se menciona que, además de Plotti.js, existen otras opciones como Google Charts y Chart.js, las cuales pueden ser encontradas con facilidad a través de búsquedas en Google. El script resalta que este video ha servido como guía para entender cómo implementar estas librerías en proyectos de JavaScript. Finalmente, se anuncia que el capítulo 7 del curso será una conclusión del curso gratuito de JavaScript desde cero.
Mindmap
Keywords
💡plotti.js
💡gráficos avanzados
💡gráfico de barras
💡gráfico circular
💡línea de tiempo
💡mapas
💡código abierto
💡integración en HTML
💡variables
💡consola
Highlights
Plotti.js es una librería de gráficos que viene con más de 40 tipos de gráficos.
Permite realizar gráficos de barras horizontales y verticales, gráficos circulares y de anillos, gráficos de líneas, gráficos de dispersión y de burbujas, gráficos de ecuación, gráficos 3D, gráficos estadísticos, mapas CBG, etc.
Plotly.js es gratuito y de código abierto bajo la licencia MIT.
Se muestra cómo importar la librería Plotly en un proyecto HTML.
Instrucciones detalladas para agregar la librería Plotly en la etiqueta 'head' del documento HTML.
Ejemplo de cómo crear un gráfico de tipo dona utilizando Plotly.js.
Uso de etiquetas y variables en JavaScript para definir datos de ejemplo para el gráfico.
Instrucciones sobre cómo definir valores y etiquetas para el gráfico de dona.
Definición del tipo de gráfico como 'pie' en Plotly.js.
Implementación del gráfico en un elemento con ID 'miBlog'.
Verificación y corrección de errores comunes al implementar gráficos con Plotly.js.
Opciones para descargar el gráfico generado como archivo PNG.
Recomendación de otras librerías de gráficos como Google Charts y Chart.js.
Guía sobre cómo buscar y encontrar librerías de gráficos en Google.
Conclusión y cierre del capítulo, con un adelanto sobre el próximo capítulo del curso de JavaScript.
Transcripts
en este capítulo vamos a hablar sobre la
librería plotti js que nos permite
realizar gráfico más avanzados en llave
click
plotti.js es una librería de gráficos
que viene con más de 40 tipo de
gráficos.js es una librería que te
permite realizar gráfico de barras
horizontales y verticales gráficos
circulares y de anillos gráficos de
líneas gráfico de dispersión y de
burbujas gráfico de ecuación gráficos 3D
gráficos estadísticos mapas cbg etc
hasta la fecha de este
video.js gratuito y del código abierto
bajo la licencia mic veamos ejemplos en
el código para ver cómo funciona
plotly.js Recuerda que existen varias
librerías.js es una de ellas
Y en este capítulo vamos a ver te voy a
dar una idea de cómo usar una de estas
librerías porque al momento puede que
necesite realizar gráficos más complejos
en javascript
bien acá lo que quiero tengo el código
html de la página que está acá al lado
derecho y también el código javascript
bien para usar la librería
vamos a buscar así
js
y nos aparece su página esta de acá
Recuerda que también puedes colocar acá
librerías javas para gráficos
y te van a aparecer páginas con
librerías
no también Si buscas llave Script
s en inglés te aparecen también otras
alternativas y otras librerías
pero nosotros vamos a usar la que busque
que explote recuerda poner explote y
punta js plotly js porque hay otra Marca
otra empresa que explote y te vayas a
confundir protege la s es esta librería
acá Open source ingresamos aquí y
podemos ver todos los gráficos avanzados
que podemos hacer puedes ver
presionas sobre ellos vas a ver ejemplos
por ejemplo sobre este gráfico de barras
podemos ver ahí ejemplo de cómo
implementar
y las opciones que puedes aplicarles o
los estilos y formatos vale acá lado
izquierdo tenemos referencia presionamos
acá y nos aparece acá botón que dice
yeting acá no dice Cómo podemos
usar plotle puedes usarlo de diferentes
maneras incluso descargarlo pero acá
vamos a usar rápidamente este código que
hay que colocarlo dentro de las
etiquetas Head de nuestro código html
vamos a colocar este de aquí lo
seleccionamos y lo copiamos ya acá ya
nos importa la librería de plotly y lo
colocamos dentro de Head en nuestra
página html vamos acá código
y Aquí vamos en la etiqueta Head acá
Arribita vamos a poner así como buena
práctica hay que colocarle un comentario
para mantener el orden y aquí pegamos
la librería plotte Y grabamos eso sería
todo ahora vamos a ir acá dentro vamos a
colocar acá debajo de mi título vamos a
hacer el gráfico con plotly vamos acá
debajo de mi título vamos a crear un dip
una capa
mi blog por ejemplo no puedo poner el
nombre diría que desees no hay problema
acá vamos a ponerle
1 css estilos css en línea vamos a
decirle que tenga un ancho de 100 por
ciento
todo el ancho
un Max
de 600 píxeles
esto sería todo
y acá Cerramos el
dict ahora vamos al código llave Script
Aquí vamos a crear una variable llamada
x igual después vamos a definir en array
x Recuerda que voy a hacer un gráfico de
tipo dona
parece una dona más que todo es un tipo
Cómo se podría decir
paichard tipo país se ha visto el postre
como un pie que se parte como una pizza
en varias partes
sería un gráfico de tipo Pipe y hay que
definir en x hay que definir
ciertos valores entonces lo que vamos a
poner datos de ejemplo
stock de productos por ejemplo vamos a
poner acá
cinco productos por ejemplo
por los negros
coma estamos creando acá
nuestro
nuestros datos dentro de corchetes vamos
a colocar zapatos zapatos marrones
pero son cinco datos hay que poner vamos
a poner acá
lentes
lentes rosados por ejemplo para mujer
sombreros
azules Por ejemplo
último
es un pantalón
a punto y coma y ahora vamos a quedar
ahora la llamada a raille
donde vamos a colocar datos para nuestro
gráfico
en la línea acá Perdón
vamos a colocar el Stop Ok
después los negros Recuerda que como Acá
tengo cinco datos por los negros
camarones vamos a seguir ese orden para
los polos negros primero le ponemos un
stock de 35 unidades por ejemplo luego
para los zapatos marrones que siguen acá
vamos a ponerle 23 unidades luego ahí
mismo sin salir del corchete para los
lentes rosados Vamos a ponerle 15
unidades luego para
los hombros Azules y Jean
s azules 20 y vamos a ponerle 37
punto y coma
y acá vamos a sacar una llamada
a ver título
geográfico y entre ya le vamos a ponerle
así
tiene que ser títere tal cual como pide
la librería puzle Vamos a ponerle acá
stock de producto
tú lo puedes poner el nombre que desees
y ahí entre corchetes y luego entre
llave vamos a pasar los valores
definidos acá hacemos uso de labels tal
cual y le pasamos el array X que
definimos acá Arribita
aquí es
acá pasamos a Ray x los datos de acá de
los números de los productos
coma y los valores O valores
le ponemos lo que viene a ser el arrayé
esto acá la cantidad de productos o
stock
y acá le definimos el tipo de perdón acá
le definimos coma con taipe el tipo
gráfico que queremos hacer queremos
crear va a ser un tipo de
y ahí está
entonces acá vamos a hacer uso de plotly
el objeto plotte punto
tal cual como ves es el mismo plotter y
acá le vamos a poner
el ID que definimos acá Recuerda que acá
creamos Este y de mi blog esa idea mismo
lo vamos a colocar acá mi blog para
decirle que ahí Se imprime el gráfico mi
blog
y acá pasamos la variable de datos que
definimos aquí arriba
y la variable título
estable título la definimos acá arriba
también Okay vamos a actualizar y Ver
Nuestro gráfico estando algún error es
normal por eso lo podemos corregir vamos
a ver acá la consola
acá dice punto neplo No es una función
aquí
dice plock acá es l minúscula le había
puesto l mayúscula
grabamos y actualizamos y mira tenemos
nuestro gráfico con la librería plotly
como puedes ver
acá la librería ya automáticamente nos
trae estos iconos de acá si hacemos clic
bueno
Y acá pues dejar ese gráfico como png y
acá puede ver se descargó acá lo tienes
tus usuarios van a poder descargar ese
gráfico desde tu web entonces así es
como podemos usar una librería que te
permite hacer gráfico con llave Este
vídeo ha sido como una guía de Cómo
puedes usar una de estas librerías
existen muchas librerías como Google
charge charge js y otras más en Google
Si buscas vas a encontrar muchas
librerías Y en este vídeo te mostrado
Cómo usar una de ellas
en el 7 capítulo vamos a hacer una
conclusión de todo el curso de
javascript para finalizar
nos vemos en el siguiente capítulo de
este curso gratuito de javascript desde
cero
Weitere ähnliche Videos ansehen
Plotly: visualización de datos sencilla y muy potente
Gráficos básicos con plotly (Gráficos de dispersión)
Implementa gráficos muy rápido con Chart Js y Javascript
Cómo EMBEBER UN GPT en una página WEB [Tutorial paso a paso]
Nueva API para crear popovers con HTML SIN usar Javascript - #programacionenespañol
Curso GIMP 2023 - Curso básico (Parte 1)
5.0 / 5 (0 votes)