Viz S13 – Section 1: Introduction to Plotly and Interactive Charts

✨ Why Interactive Visualization?

Viewers explore the data themselves — progressive disclosure
Hover tooltips replace cluttered data labels
Zoom, pan, and filter without creating new charts
HTML output embeds in any webpage or LMS

⚡ Plotly Express (px)

High-level API: px.line(df, x="date", y="sales")
Automatic hover, legend, and color mapping
Charts: line, bar, scatter, pie, histogram, box, violin
color, size, facet_col, animation_frame

🖱️ Hover & Tooltips

hover_data=["col1","col2"] adds fields to tooltip
hover_name="col" sets bold title in hover box
Custom labels: labels={"sales": "Revenue ($)"}
Template: hovertemplate="$%{y:,.0f}"

🎬 Animations

animation_frame="year" adds a play button
animation_group="id" tracks entities over time
Fix axes: set range_x / range_y for stability
Best for: showing change over time interactively

💾 Exporting Plotly Charts

fig.write_html("chart.html") — fully interactive
fig.write_image("chart.png") — static (needs kaleido)
Embed HTML output in Jupyter, web pages, or emails
fig.show() renders inline in notebooks

🧪 Lab 1 — Interactive Plotly Charts

Part A: Interactive sales performance line explorer
Part B: Marketing campaign ROI interactive scatter
Customize hover templates and color by category
Export both charts as standalone HTML files