Stop Making Dead Charts: Plotly and the World of Interactive Visualization

try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 1358056) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Akhilesh Posted on Apr 28 Stop Making Dead Charts: Plotly and the World of Interactive Visualization #programming #ai #productivity #python Every chart you have made so far is dead. You save it as a PNG. You look at it. You wonder what that one outlier point is. You squint at the axis. You cannot zoom in. You cannot click anything. You cannot hover to see exact values. You make a new chart with different settings. Save again. Look again. This loop is fine for quick exploration. It becomes painful when you have a complex dataset with thousands of points and patterns hiding at every zoom level. Plotly makes charts that are alive. Hover over any point and the exact values appear. Click a legend item to hide that group. Zoom into a region. Pan across a timeline. Select a subset of points. Export as PNG with one click. All of this in the browser, in Jupyter, or in a Streamlit app. The learning curve is minimal. The payoff is immediate. Install and Import pip install plotly Enter fullscreen mode Exit fullscreen mode import plotly.express as px import plotly.graph_objects as go from plotly.subplots import make_subplots import pandas as pd import numpy as np Enter fullscreen mode Exit fullscreen mode Two interfaces. plotly.express (px) is the fast, high-level interface. One line per chart. plotly.graph_objects (go) is the low-level interface for full control and custom layouts. You will use px for most things and go when px cannot do what you need. Your First Interactive Chart in One Line df = px.data.gapminder().query("year == 2007") fig = px.scatter( df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=60, title="GDP Per Capita vs Life Expectancy (2007)" ) fig.show() fig.write_html("gapminder.html") Enter fullscreen mode Exit fullscreen mode Run this. Hover over any bubble. The country name appears with exact values. Click a continent in the legend to hide it. Double-click to isolate it. Zoom into a region. This is the Hans Rosling bubble chart, made interactive in eight lines. hover_name="country" sets what appears as the bold title in the tooltip. size="pop" scales bubble size by population. log_x=True uses a logarithmic x-axis because GDP per capita spans several orders of magnitude. fig.write_html("gapminder.html") saves a fully self-contained HTML file. Send it to anyone. It works in any browser. No Python needed on their machine. Line Charts: Time Series That You Can Actually Explore stocks = px.data.stocks() fig = px.line( stocks, x="date", y=["GOOG", "AAPL", "AMZN", "FB"], title="Stock Prices Over Time", labels={"value": "Price (USD)", "variable": "Stock"}, template="plotly_dark" ) fig.update_layout( hovermode="x unified", legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1) ) fig.show() fig.write_html("stocks.html") Enter fullscreen mode Exit fullscreen mode hovermode="x unified" shows all four stock values in one tooltip when you hover over any point on the timeline. Click and drag to zoom into a date range. Double-click to zoom back out. The range selector appears automatically in the x-axis. template="plotly_dark" applies a dark theme. Other…

This excerpt is published under fair use for community discussion. Read the full article at DEV Community.