meta:
  path: /examples/visualization
  name: Data Visualization
  desc: Interactive charts and graphs with Plotly integration
  type: documentation
  format: toon/3.3

context: 7-page Dash docs site
relatedPages[5]:
  Home: /
  AI/LLM Integration: /examples/ai-integration
  Custom Directives: /examples/directives
  Getting Started: /getting-started
  Interactive .md: /examples/interactive

sections[20]:
  1. [3] Introduction
     This page demonstrates how to create **interactive data visualizations** using Plotly with your Dash Documentation Boilerplate. Plotly provides powerful, interactive charts that integrate seamlessly with Dash callbacks.
     ---
  2. [3] Basic Chart Example
     Let's start with a simple bar chart example:
     Source code:
     ---
  3. [3] Interactive Line Chart
     This example shows multiple lines with hover tooltips and a legend:
     Source code:
     ---
  4. [3] Scatter Plot with Filtering
     An interactive scatter plot with dropdown filtering:
     Source code:
     ---
  5. [3] Real-Time Data Updates
     This example demonstrates how to update charts in real-time using intervals:
     Source code:
     ---
  6. [3] TOON Analytics Dashboard
     A real-world dashboard showcasing the token efficiency of **TOON v3.3** format compared to traditional `llms.txt`. This dashboard visualizes actual metrics from the documentation system:
     - **25.5% Token Reduction** - TOON achieves significant compression while preserving content
  7. [4] Available Plotly Chart Types
  8. [5] Basic Charts
     - **Bar Charts** - `px.bar()`
     - **Line Charts** - `px.line()`
     - **Scatter Plots** - `px.scatter()`
  9. [5] Statistical Charts
     - **Box Plots** - `px.box()`
     - **Violin Plots** - `px.violin()`
     - **Density Heatmaps** - `px.density_heatmap()`
  10. [5] Scientific Charts
     - **Scatter Matrix** - `px.scatter_matrix()`
     - **Parallel Coordinates** - `px.parallel_coordinates()`
     - **3D Scatter** - `px.scatter_3d()`
  11. [5] Financial Charts
     - **Candlestick** - `go.Candlestick()`
     - **OHLC** - `go.Ohlc()`
     - **Waterfall** - `go.Waterfall()`
  12. [4] Theme Integration
     Make charts match your Mantine theme automatically using DMC figure templates:
     ```python
     import dash_mantine_components as dmc
  13. [4] Responsive Charts
     Make charts responsive to window size:
     ```python
     fig.update_layout(
  14. [4] Interactive Features
     Enable useful interactions:
     ```python
     config = {
  15. [4] 1. Limit Data Points
     For large datasets, consider:
     ```python
     # Sample data if too large
  16. [4] 2. Use Scattergl for Large Scatter Plots
     ```python
     import plotly.graph_objects as go
     fig = go.Figure(data=go.Scattergl(
  17. [4] 3. Optimize Update Frequency
     ```python
     # Use longer intervals for real-time updates
     dcc.Interval(
  18. [4] Pattern 1: Chart with Controls
  19. [2] My Visualization
     Use the controls below to customize the view:
     ```
     ```python
  20. [4] Pattern 2: Multi-View Dashboard
     ```python
     component = dmc.SimpleGrid([
     dmc.Card([dcc.Graph(figure=fig1)]),

directives:
  llms_copy: [Data Visualization]
  toc: [(none)]
  exec[6]: docs.data-visualization.basic_chart, docs.data-visualization.line_chart, ...
  source[5]: docs/data-visualization/basic_chart.py, docs/data-visualization/line_chart.py, ...

execComponents[6]:
  - docs.data-visualization.basic_chart [callback]
  - docs.data-visualization.line_chart [callback]
  - docs.data-visualization.scatter_plot [callback]
  - docs.data-visualization.realtime_chart [callback]
  - docs.data-visualization.toon_dashboard [callback]
  - docs.viz.controlled_chart

codeExamples[5]:
  1:
    file: docs/data-visualization/basic_chart.py
    lang: python
    code: |
      from dash import dcc, callback, Input, Output
      import dash_mantine_components as dmc
      import pandas as pd
      import plotly.express as px
      
      # Register Mantine templates
      dmc.add_figure_templates(default="mantine_light")
      
      # Sample data
      df = pd.DataFrame({
          "Category": ["Product A", "Product B", "Product C", "Product D", "Product E"],
          "Sales": [120, 95, 180, 140, 165]
      })
      
      # Create initial figure
      fig = px.bar(
          df,
          x="Category",
          y="Sales",
          title="Product Sales Comparison",
      # ... (42 more lines)
  2:
    file: docs/data-visualization/line_chart.py
    lang: python
    code: |
      from dash import dcc, callback, Input, Output
      import dash_mantine_components as dmc
      import pandas as pd
      import plotly.express as px
      import numpy as np
      
      # Register Mantine templates
      dmc.add_figure_templates(default="mantine_light")
      
      # Generate sample time series data
      dates = pd.date_range('2024-01-01', periods=30, freq='D')
      np.random.seed(42)
      
      df = pd.DataFrame({
          'Date': dates,
          'Revenue': np.cumsum(np.random.randn(30) * 10 + 100),
          'Costs': np.cumsum(np.random.randn(30) * 8 + 80),
          'Profit': np.cumsum(np.random.randn(30) * 5 + 20)
      })
      
      # ... (73 more lines)
  3:
    file: docs/data-visualization/scatter_plot.py
    lang: python
    code: |
      from dash import html, dcc, callback, Input, Output, State
      import pandas as pd
      import plotly.express as px
      import dash_mantine_components as dmc
      import numpy as np
      
      # Register Mantine templates
      dmc.add_figure_templates(default="mantine_light")
      
      # Generate sample data
      np.random.seed(42)
      df = pd.DataFrame({
          'Height': np.random.normal(170, 10, 100),
          'Weight': np.random.normal(70, 15, 100),
          'Age': np.random.randint(20, 60, 100),
          'Gender': np.random.choice(['Male', 'Female'], 100)
      })
      
      component = html.Div([
          dmc.Title("Height vs Weight Analysis", order=4, mb=10),
      # ... (50 more lines)
  4:
    file: docs/data-visualization/realtime_chart.py
    lang: python
    code: |
      from dash import html, dcc, callback, Input, Output
      import dash_mantine_components as dmc
      import plotly.graph_objects as go
      from collections import deque
      import random
      from datetime import datetime, timedelta
      
      # Register Mantine templates
      dmc.add_figure_templates(default="mantine_light")
      
      # Initialize deque to store recent data points
      MAX_DATA_POINTS = 50
      time_data = deque(maxlen=MAX_DATA_POINTS)
      value_data = deque(maxlen=MAX_DATA_POINTS)
      
      # Initialize with some data
      start_time = datetime.now()
      for i in range(20):
          time_data.append(start_time + timedelta(seconds=i))
          value_data.append(random.uniform(20, 80))
      # ... (65 more lines)
  5:
    file: docs/data-visualization/toon_dashboard.py
    lang: python
    code: |
      from dash import html, dcc, callback, Input, Output
      import plotly.express as px
      import plotly.graph_objects as go
      import dash_mantine_components as dmc
      
      # Register Mantine templates
      dmc.add_figure_templates(default="mantine_light")
      
      # ============================================================================
      # TOON v3.3 Analytics Data
      # Real metrics from comparing llms.toon vs llms.txt for Data Visualization page
      # ============================================================================
      
      # Token/Character comparison data
      format_comparison = {
          'Format': ['llms.txt', 'llms.toon'],
          'Characters': [15369, 11444],  # Actual measured values
          'Description': ['Full markdown with embedded code', 'TOON v3.3 compressed format']
      }
      
      # ... (295 more lines)

keyLists[5]:
  - unordered: **25.5% Token Reduction** - TOON achieves significant compre..., **95% LLM Comprehension** - Improved from 75-80% in earlier ..., **43 Content Items** - Sections, code examples, tips, best p...
  - unordered: **Bar Charts** - `px.bar()`, **Line Charts** - `px.line()`, **Scatter Plots** - `px.scatter()`, **Pie Charts** - `px.pie()`, **Histograms** - `px.histogram()`
  - unordered: **Box Plots** - `px.box()`, **Violin Plots** - `px.violin()`, **Density Heatmaps** - `px.density_heatmap()`
  - unordered: **Scatter Matrix** - `px.scatter_matrix()`, **Parallel Coordinates** - `px.parallel_coordinates()`, **3D Scatter** - `px.scatter_3d()`
  - unordered: **Candlestick** - `go.Candlestick()`, **OHLC** - `go.Ohlc()`, **Waterfall** - `go.Waterfall()`

tips[6]:
  Theme Integration:
    [python] import dash_mantine_components as dmc...
  Responsive Charts:
    [python] fig.update_layout(...
  Interactive Features:
    [python] config = {...
  Limit Data Points:
    [python] # Sample data if too large...
  Use Scattergl for Large Scatter Plots:
    [python] import plotly.graph_objects as go...
  Optimize Update Frequency:
    [python] # Use longer intervals for real-time updates...

bestPractices[5]:
  1. Add Axis Labels
     Always label your axes:
     code[python]: |
       fig.update_layout(
           xaxis_title="Time (hours)",
           yaxis_title="Temperature (°C)"
       )
  2. Include Titles
     Make charts self-explanatory:
     code[python]: |
       fig.update_layout(
           title="Monthly Sales Performance",
           title_x=0.5  # Center the title
       )
  3. Use Color Wisely
     Choose accessible colors:
     code[python]: |
       # Good - accessible color palette
       colors = ['#1f77b4', '#ff7f0e', '#2ca02c']
       
       # Even better - use colorblind-friendly palettes
       import plotly.express as px
       fig = px.bar(df, color_discrete_sequence=px.colors.qualitative.Safe)
  4. Add Hover Information
     Provide context on hover:
     code[python]: |
       fig = px.scatter(
           df, x="x", y="y",
           hover_data=["category", "value", "date"]
       )
  5. Handle Empty Data
     Always check for empty datasets:
     code[python]: |
       if df.empty:
           return {
               'data': [],
               'layout': {
                   'xaxis': {'visible': False},
                   'yaxis': {'visible': False},
                   'annotations': [{
                       'text': 'No data available',

patterns[3]:
  Chart with Controls:
    code[python]: |
      component = html.Div([
          dmc.Select(
              label="Metric",
              data=[...],
              id="metric-select"
          ),
          dcc.Graph(id="chart")
      ])
      
      @callback(Output("chart", "figure"), Input("metric-select", "value"))
      def update(metric):
          return create_figure(metric)
  Multi-View Dashboard:
    code[python]: |
      component = dmc.SimpleGrid([
          dmc.Card([dcc.Graph(figure=fig1)]),
          dmc.Card([dcc.Graph(figure=fig2)]),
          dmc.Card([dcc.Graph(figure=fig3)]),
          dmc.Card([dcc.Graph(figure=fig4)]),
      ], cols={"base": 1, "sm": 2})
  Clickable Charts:
    code[python]: |
      @callback(
          Output("details", "children"),
          Input("chart", "clickData")
      )
      def display_click_data(clickData):
          if not clickData:
              return "Click on a data point"
          return f"Selected: {clickData['points'][0]['x']}"

resources[4]:
  - plotly.com/python/plotly-express/: https://plotly.com/python/plotly-express/
  - plotly.com/python/graph-objects/: https://plotly.com/python/graph-objects/
  - dash.plotly.com/dash-core-components/graph: https://dash.plotly.com/dash-core-components/graph
  - plotly.com/python/builtin-colorscales/: https://plotly.com/python/builtin-colorscales/

summary: Data Visualization: | 20 sections | 5 code examples | 6 tips | 5 best practices | 3 patterns | 4 resources | uses exec, llms_copy, source, toc | 5 interactive components