# Data Visualization > Data Visualization - Skill: `deeleeramone/data-visualization` (Agent Skill) - Install (CLI): `npx skillmds@latest add deeleeramone/data-visualization` - Raw SKILL.md: https://api.skillmd.com/api/skills/deeleeramone/data-visualization/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: deeleeramone (https://skillmd.com/u/deeleeramone) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/deeleeramone/data-visualization --- # Data Visualization > Best practices for creating charts, tables, and live data displays. ## Plotly Charts ### Creating a Chart ```python import plotly.express as px # Create figure df = pd.DataFrame({"x": [1, 2, 3], "y": [4, 5, 6]}) fig = px.line(df, x="x", y="y", title="My Chart") # Show as widget show_plotly(figure_json=fig.to_json(), title="Line Chart") ``` ### Updating a Chart ```python # Full update new_fig = px.bar(df, x="category", y="value") update_plotly(widget_id, figure_json=new_fig.to_json()) # Layout-only update (faster - doesn't re-render data) layout_update = {"title": {"text": "Updated Title"}} update_plotly(widget_id, figure_json=json.dumps({"layout": layout_update}), layout_only=True) ``` ### Theme Consistency PyWry automatically switches Plotly charts between `plotly_dark` and `plotly_white` templates when the theme toggles. To customize per-theme styles while preserving automatic switching, use `template_dark` and `template_light` on `PlotlyConfig`: ```python from pywry import PlotlyConfig config = PlotlyConfig( template_dark={"layout": {"paper_bgcolor": "#1a1a2e", "plot_bgcolor": "#16213e"}}, template_light={"layout": {"paper_bgcolor": "#ffffff", "plot_bgcolor": "#f0f0f0"}}, ) show_plotly(figure_json=fig.to_json(), title="Themed Chart", config=config) ``` User values are **deep-merged** on top of the built-in base template — your overrides always win, and anything you don't set is inherited from the base. ### Chart Sizing ```python # Let chart fill container fig.update_layout( autosize=True, margin=dict(l=40, r=40, t=50, b=40), ) # Or set explicit size fig.update_layout( width=600, height=400, ) ``` ## AG Grid Tables ### Creating a Table ```python import json # Data as list of dicts data = [ {"name": "Alice", "age": 30, "city": "NYC"}, {"name": "Bob", "age": 25, "city": "LA"}, ] # Show as AG Grid widget show_dataframe(data_json=json.dumps(data), title="Users") ``` ### Theme Consistency ```python # AG Grid themes # - ag-theme-quartz-dark (dark mode) # - ag-theme-quartz (light mode) # Widget auto-applies based on current theme ``` ### Large Datasets ```python # AG Grid handles large datasets efficiently via virtualization # Pagination is built-in data = [{"id": i, "value": random.random()} for i in range(10000)] show_dataframe(data_json=json.dumps(data), title="Large Dataset") # Grid virtualizes - only visible rows are rendered ``` ## Marquee for Live Data ### Building Ticker Items ```python # Build individual ticker items items = [ build_ticker_item(ticker="AAPL", text="AAPL $185.50"), build_ticker_item(ticker="GOOGL", text="GOOGL $142.20"), build_ticker_item(ticker="MSFT", text="MSFT $378.90"), ] ``` ### Creating Marquee ```python create_widget( html="
Dashboard Content
", toolbars=[{ "position": "top", "items": [{ "type": "marquee", "ticker_items": [ {"ticker": "AAPL", "text": "AAPL $185.50"}, {"ticker": "GOOGL", "text": "GOOGL $142.20"}, ], "speed": 50, # pixels per second "direction": "left", # left or right }] }] ) ``` ### Updating Individual Tickers ```python # Update one ticker without affecting others update_ticker_item( widget_id, ticker="AAPL", text="AAPL $186.25 ▲", styles={"color": "#22c55e"} # Green for up ) update_ticker_item( widget_id, ticker="GOOGL", text="GOOGL $141.50 ▼", styles={"color": "#ef4444"} # Red for down ) ``` ### Updating All Tickers ```python # Replace all ticker items update_marquee(widget_id, ticker_items=[ {"ticker": "AAPL", "text": "AAPL $186.25", "styles": {"color": "#22c55e"}}, {"ticker": "GOOGL", "text": "GOOGL $141.50", "styles": {"color": "#ef4444"}}, {"ticker": "NEW", "text": "NEW $100.00"}, # Add new ticker ]) ``` ## Live Data Patterns ### Pattern 1: Polling ```python import time widget = create_widget(html=initial_html, toolbars=[...]) while True: # Fetch new data data = fetch_latest_data() # Update chart fig = create_chart(data) update_plotly(widget.id, figure_json=fig.to_json()) # Update tickers for ticker, price in data["prices"].items(): update_ticker_item(widget.id, ticker=ticker, text=f"{ticker} ${price:.2f}") time.sleep(5) # Poll every 5 seconds ``` ### Pattern 2: Event-Driven ```python widget = create_widget(html=initial_html, toolbars=[ { "position": "top", "items": [ {"type": "button", "label": "Refresh", "event": "refresh"}, {"type": "select", "label": "Timeframe", "event": "timeframe", "options": [ {"label": "1D", "value": "1d"}, {"label": "1W", "value": "1w"}, {"label": "1M", "value": "1m"}, ]}, ] } ]) while True: events = get_events(widget.id, clear=True) for e in events: if e["event_type"] == "refresh": data = fetch_data() update_chart(widget.id, data) elif e["event_type"] == "timeframe": timeframe = e["data"]["value"] data = fetch_data(timeframe=timeframe) update_chart(widget.id, data) time.sleep(0.1) ``` ### Pattern 3: Streaming via Marquee ```python # Marquee is ideal for streaming price data # - Continuous scrolling - Individual ticker updates - Visual indication of changes def stream_prices(): while True: for ticker, price, change in get_price_updates(): color = "#22c55e" if change >= 0 else "#ef4444" arrow = "▲" if change >= 0 else "▼" update_ticker_item( widget_id, ticker=ticker, text=f"{ticker} ${price:.2f} {arrow}", styles={"color": color} ) time.sleep(0.1) # High-frequency updates OK for ticker ``` ## Dashboard Layout ### Multi-Chart Layout ```python content = Div( content="""
""", component_id="dashboard", ) widget = create_widget(html=content.build_html(), height=700) # Embed Plotly charts in each div # (Use Plotly.js directly for embedded charts, or use separate widgets) ``` ### Chart + Table Layout ```python content = Div( content="""
""", component_id="layout", ) ``` ## Performance Tips ### For Charts - Use `layout_only=True` when only changing titles, axes, annotations - Reduce data points for line charts (downsample) - Use WebGL for large scatter plots (`fig = px.scatter(..., render_mode='webgl')`) ### For Tables - AG Grid virtualizes automatically - send all data - Use server-side pagination for very large datasets (100k+ rows) - Avoid complex cell renderers for large tables ### For Marquee - Keep ticker count reasonable (10-20 items) - Update only changed tickers, not all - Use reasonable update frequency (not faster than visual perception ~100ms)