Music formats¶

Nota: Si deseas ejecutar este ejemplo en Google Colab, primero debes ejecutar la siguiente celda para instalar las librerías necesarias:

!pip install ipyvizzu pandas

In [1]:

#!pip install ipyvizzu pandas

#!pip install ipyvizzu pandas

In [2]:

import pandas as pd
from ipyvizzu import Chart, Data, Config, Style, DisplayTarget 

# Cargamos los datos desde un archivo CSV en un DataFrame
df = pd.read_csv(
    "https://ipyvizzu.vizzuhq.com/0.16/showcases/music/music.csv",
    dtype={"Year": str},  # Especificamos el tipo de dato para la columna "Year"
)

data = Data()  # Creamos un objeto Data para manejar los datos
data.add_df(df)  # Agregamos el DataFrame al objeto Data

# Crear un objeto Chart con el ancho y el alto deseados 
chart = Chart(width="640px", height="360px",display=DisplayTarget.END)

# Animamos la gráfica utilizando los datos cargados
chart.animate(data)

# Configuramos la visualización con diferentes opciones de estilo y título
chart.animate(
    Config(
        {
            "x": "Year",  # Eje X representado por la columna "Year"
            "y": ["Format", "Revenue [m$]"],  # Eje Y compuesto por "Format" y "Revenue [m$]"
            "color": "Format",  # Color basado en la columna "Format"
            "geometry": "area",  # Geometría de área para las visualizaciones
            "align": "center",  # Alineación central de los elementos
            "title": "Ingresos de la Música por Formato 1973-2020",  # Título de la gráfica
        }
    ),
    Style(
        {
            "plot": {
                "xAxis": {"label": {"fontSize": 9, "angle": 2.0}},  # Configuración del eje X
                "marker": {
                    "colorPalette": "#b74c20FF #c47f58FF #1c9761FF"
                    + " #ea4549FF #875792FF #3562b6FF"
                    + " #ee7c34FF #efae3aFF",  # Paleta de colores para los marcadores
                },
            }
        }
    ),
)

# Animaciones adicionales con diferentes configuraciones y filtros
chart.animate(
    Config(
        {
            "align": "stretch",  # Alineación estirada de los elementos
            "title": "Ingresos de la Música por Formato 1973-2020(%)",  # Nuevo título
        }
    ),
    delay=1,  # Retardo de 1 segundo
)

chart.animate(
    Config(
        {
            "align": "center",  # Alineación central de los elementos
            "title": "Ingresos de la Música por Formato 1973-2020",  # Nuevo título
        }
    ),
    delay=1,  # Retardo de 1 segundo
)

chart.animate(Config({"split": True}), delay=1)  # División de la gráfica, retardo de 1 segundo

chart.animate(
    Data.filter("record.Format == 'Vinyl' ||record.Format == 'Streaming'"),  # Filtramos por formato Vinyl o Streaming
    Config({"title": "Ingresos de Vinyl y Streaming 1973-2020"}),  # Nuevo título
    delay=1,  # Retardo de 1 segundo
)

chart.animate(
    Data.filter(None),  # Eliminamos cualquier filtro aplicado anteriormente
    Config(
        {"title": "Ingresos de la Música por Formato 1973-2020", "split": False}  # Configuración de título y división
    ),
    delay=1,  # Retardo de 1 segundo
)

chart.animate(
    Config(
        {
            "x": "Year",  # Eje X representado por la columna "Year"
            "y": "Revenue [m$]",  # Eje Y representado por "Revenue [m$]"
            "noop": "Format",  # No realizar ninguna operación en la columna "Format"
            "align": "none",  # Sin alineación específica
            "geometry": "line",  # Geometría de línea para las visualizaciones
        }
    ),
    delay=1,  # Retardo de 1 segundo
)

import pandas as pd from ipyvizzu import Chart, Data, Config, Style, DisplayTarget # Cargamos los datos desde un archivo CSV en un DataFrame df = pd.read_csv( "https://ipyvizzu.vizzuhq.com/0.16/showcases/music/music.csv", dtype={"Year": str}, # Especificamos el tipo de dato para la columna "Year" ) data = Data() # Creamos un objeto Data para manejar los datos data.add_df(df) # Agregamos el DataFrame al objeto Data # Crear un objeto Chart con el ancho y el alto deseados chart = Chart(width="640px", height="360px",display=DisplayTarget.END) # Animamos la gráfica utilizando los datos cargados chart.animate(data) # Configuramos la visualización con diferentes opciones de estilo y título chart.animate( Config( { "x": "Year", # Eje X representado por la columna "Year" "y": ["Format", "Revenue [m$]"], # Eje Y compuesto por "Format" y "Revenue [m$]" "color": "Format", # Color basado en la columna "Format" "geometry": "area", # Geometría de área para las visualizaciones "align": "center", # Alineación central de los elementos "title": "Ingresos de la Música por Formato 1973-2020", # Título de la gráfica } ), Style( { "plot": { "xAxis": {"label": {"fontSize": 9, "angle": 2.0}}, # Configuración del eje X "marker": { "colorPalette": "#b74c20FF #c47f58FF #1c9761FF" + " #ea4549FF #875792FF #3562b6FF" + " #ee7c34FF #efae3aFF", # Paleta de colores para los marcadores }, } } ), ) # Animaciones adicionales con diferentes configuraciones y filtros chart.animate( Config( { "align": "stretch", # Alineación estirada de los elementos "title": "Ingresos de la Música por Formato 1973-2020(%)", # Nuevo título } ), delay=1, # Retardo de 1 segundo ) chart.animate( Config( { "align": "center", # Alineación central de los elementos "title": "Ingresos de la Música por Formato 1973-2020", # Nuevo título } ), delay=1, # Retardo de 1 segundo ) chart.animate(Config({"split": True}), delay=1) # División de la gráfica, retardo de 1 segundo chart.animate( Data.filter("record.Format == 'Vinyl' ||record.Format == 'Streaming'"), # Filtramos por formato Vinyl o Streaming Config({"title": "Ingresos de Vinyl y Streaming 1973-2020"}), # Nuevo título delay=1, # Retardo de 1 segundo ) chart.animate( Data.filter(None), # Eliminamos cualquier filtro aplicado anteriormente Config( {"title": "Ingresos de la Música por Formato 1973-2020", "split": False} # Configuración de título y división ), delay=1, # Retardo de 1 segundo ) chart.animate( Config( { "x": "Year", # Eje X representado por la columna "Year" "y": "Revenue [m$]", # Eje Y representado por "Revenue [m$]" "noop": "Format", # No realizar ninguna operación en la columna "Format" "align": "none", # Sin alineación específica "geometry": "line", # Geometría de línea para las visualizaciones } ), delay=1, # Retardo de 1 segundo )