Leer Interactiviteit Toevoegen: Hover, Zoomen en Selectie

Interactieve functies vormen een kernsterkte van Plotly-grafieken, waardoor gegevensverkenning intuïtiever en boeiender wordt. Met Plotly kunt u hover-tooltips toevoegen om details van elk punt te tonen, inzoomen om specifieke gegevensregio's te onderzoeken en subsets van gegevens direct op de grafiek selecteren. Deze interactieve elementen zijn bijzonder nuttig bij het verkennen van complexe datasets, het identificeren van trends of het delen van inzichten met anderen die met uw visualisaties kunnen interageren. Standaard bevatten Plotly Express-grafieken veel interactieve mogelijkheden, maar u kunt deze verder aanpassen om de informatie te benadrukken die het meest relevant is voor uw analyse.


              1234567891011121314151617181920212223242526272829
            
import plotly.express as px
import pandas as pd
from IPython.display import display, HTML

# Sample data
df = pd.DataFrame({
    "city": ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"],
    "population": [8398748, 3990456, 2705994, 2325502, 1660272],
    "area": [783.8, 1214.9, 589.6, 1651.1, 1340.6]
})

# Create scatter plot with custom hover data
fig = px.scatter(
    df,
    x="area",
    y="population",
    text="city",
    hover_data={
        "city": True,
        "population": ":,",
        "area": ":.1f"
    },
    labels={"area": "City Area (sq km)", "population": "Population"},
    title="City Population vs. Area"
)
fig.update_traces(marker=dict(size=14, color='skyblue'), textposition="top center")

html = fig.to_html(full_html=False, include_plotlyjs="cdn")
display(HTML(html))

In dit voorbeeld ziet u hoe u een spreidingsdiagram maakt dat aangepaste informatie in de hover-tooltip weergeeft. Met de parameter hover_data kunt u precies aangeven welke kolommen in de tooltip verschijnen en hoe deze worden opgemaakt. Hier worden de stadsnaam, bevolking (met duizendtallen) en oppervlakte (met één decimaal) getoond. U kunt ook de parameter text gebruiken om labels direct op de grafiekpunten weer te geven, zodat elke stad in één oogopslag herkenbaar is. Dit niveau van aanpassing helpt u om de meest relevante details aan uw publiek te presenteren zonder de grafiek te overladen.


              1234567891011121314151617181920212223242526
            
import plotly.express as px
import pandas as pd
from IPython.display import display, HTML

# Sample data
df = pd.DataFrame({
    "category": ["A", "B", "C", "D", "E"],
    "value1": [10, 15, 13, 17, 12],
    "value2": [23, 11, 18, 10, 15]
})

# Create a scatter plot to demonstrate zoom and selection
fig = px.scatter(
    df,
    x="value1",
    y="value2",
    color="category",
    title="Zoom and Selection Example"
)

# By default, Plotly Express enables zoom and selection tools
# You can configure the dragmode (e.g., 'zoom', 'select', 'lasso') as needed
fig.update_layout(dragmode='select')  # Try 'zoom', 'pan', or 'lasso' for different behaviors

html = fig.to_html(full_html=False, include_plotlyjs="cdn")
display(HTML(html))

Interactiviteit verandert statische grafieken in krachtige hulpmiddelen voor data-exploratie. Met Plotly Express zijn functies zoals hover-tooltips, zoomen en selectie standaard ingeschakeld, waardoor jij en je publiek dieper in de gegevens kunnen duiken. Het aanpassen van hover-informatie maakt het eenvoudig om belangrijke details te tonen, terwijl zoom- en selectiebediening helpen om te focussen op specifieke patronen of uitschieters. Deze interactieve functies verbeteren niet alleen je analyse, maar maken je visualisaties ook boeiender en informatiever voor anderen.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 6

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Veeg om het menu te tonen


              1234567891011121314151617181920212223242526272829
            
import plotly.express as px
import pandas as pd
from IPython.display import display, HTML

# Sample data
df = pd.DataFrame({
    "city": ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"],
    "population": [8398748, 3990456, 2705994, 2325502, 1660272],
    "area": [783.8, 1214.9, 589.6, 1651.1, 1340.6]
})

# Create scatter plot with custom hover data
fig = px.scatter(
    df,
    x="area",
    y="population",
    text="city",
    hover_data={
        "city": True,
        "population": ":,",
        "area": ":.1f"
    },
    labels={"area": "City Area (sq km)", "population": "Population"},
    title="City Population vs. Area"
)
fig.update_traces(marker=dict(size=14, color='skyblue'), textposition="top center")

html = fig.to_html(full_html=False, include_plotlyjs="cdn")
display(HTML(html))


              1234567891011121314151617181920212223242526
            
import plotly.express as px
import pandas as pd
from IPython.display import display, HTML

# Sample data
df = pd.DataFrame({
    "category": ["A", "B", "C", "D", "E"],
    "value1": [10, 15, 13, 17, 12],
    "value2": [23, 11, 18, 10, 15]
})

# Create a scatter plot to demonstrate zoom and selection
fig = px.scatter(
    df,
    x="value1",
    y="value2",
    color="category",
    title="Zoom and Selection Example"
)

# By default, Plotly Express enables zoom and selection tools
# You can configure the dragmode (e.g., 'zoom', 'select', 'lasso') as needed
fig.update_layout(dragmode='select')  # Try 'zoom', 'pan', or 'lasso' for different behaviors

html = fig.to_html(full_html=False, include_plotlyjs="cdn")
display(HTML(html))

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 6