GoPie Logo
User Guide/Visualizations

Creating Charts

Transform your data into compelling visualizations with GoPie's intelligent charting

GoPie makes data visualization effortless with automatic chart recommendations, interactive features, and extensive customization options. Whether you're creating simple bar charts or complex multi-series visualizations, GoPie's charting engine powered by Vega-Lite has you covered.

Automatic Chart Generation

From Natural Language

Simply ask for a visualization in your query:

"Show monthly revenue as a line chart"
"Create a bar chart of sales by region"
"Plot customer distribution on a map"
"Make a pie chart of market share"

GoPie will:

  1. Execute the appropriate query
  2. Analyze the result structure
  3. Recommend the best chart type
  4. Generate an interactive visualization

From SQL Results

After running any SQL query, click the "Visualize" button to:

  • See recommended chart types
  • Preview different visualizations
  • Select the most appropriate option

GoPie's recommendation engine considers your data types, cardinality, and relationships to suggest the most effective visualizations.

Chart Recommendation Engine

How Recommendations Work

GoPie analyzes your data to recommend charts:

Data PatternRecommended ChartsExample Use Case
Time seriesLine, Area, CandlestickRevenue over time
Categories + ValuesBar, Column, PieSales by product
Two measuresScatter, BubblePrice vs. quantity
Geographic dataMap, ChoroplethSales by region
DistributionHistogram, Box plotAge distribution
RelationshipsHeatmap, NetworkCorrelation matrix

Smart Defaults

GoPie automatically configures:

  • Axes - Appropriate scales and labels
  • Colors - Categorical or continuous palettes
  • Legend - Positioned for clarity
  • Tooltips - Informative hover details
  • Formatting - Numbers, dates, and currencies

Customizing Visualizations

Visual Editor

Use the visual editor to customize:

Basic Customization

  • Chart Type - Switch between compatible types
  • Title - Add descriptive titles and subtitles
  • Colors - Choose color schemes or set custom colors
  • Size - Adjust width and height
  • Legend - Position and formatting
// Example color customization
{
  "color": {
    "scheme": "blues",  // or "reds", "greens", etc.
    "domain": ["Low", "Medium", "High"],
    "range": ["#e7f0fd", "#3182ce", "#08306b"]
  }
}

Advanced Options

  • Axes - Scale types, ranges, and formatting
  • Marks - Point sizes, line styles, bar widths
  • Encoding - Map data to visual properties
  • Transforms - Aggregate or filter data
  • Faceting - Small multiples layout
// Example axis customization
{
  "axis": {
    "x": {
      "title": "Quarter",
      "labelAngle": -45,
      "format": "%Y Q%q"
    },
    "y": {
      "title": "Revenue (USD)",
      "format": "$,.0f",
      "grid": true
    }
  }
}

Interactive Features

  • Tooltips - Custom hover information
  • Zoom/Pan - Navigate large datasets
  • Selection - Click to highlight
  • Filtering - Interactive data filtering
  • Cross-filtering - Link multiple charts
// Example interaction configuration
{
  "selection": {
    "highlight": {
      "type": "single",
      "on": "mouseover",
      "empty": "none"
    }
  },
  "tooltip": [
    {"field": "date", "type": "temporal", "format": "%B %Y"},
    {"field": "revenue", "type": "quantitative", "format": "$,.0f"},
    {"field": "growth", "type": "quantitative", "format": "+.1%"}
  ]
}

Vega-Lite Specifications

For complete control, edit the Vega-Lite specification directly:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "category",
      "type": "nominal",
      "axis": {"labelAngle": -45}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "aggregate": "sum"
    },
    "color": {
      "field": "subcategory",
      "type": "nominal",
      "scale": {"scheme": "category10"}
    }
  }
}

Press Ctrl+Space in the Vega-Lite editor for schema-aware auto-completion.

Interactive Chart Features

Tooltips

Customize tooltip content:

{
  "tooltip": [
    {"field": "product", "title": "Product Name"},
    {"field": "revenue", "format": "$,.0f", "title": "Revenue"},
    {"field": "units", "format": ",d", "title": "Units Sold"},
    {"field": "margin", "format": ".1%", "title": "Profit Margin"}
  ]
}

Zoom and Pan

Enable zoom/pan for large datasets:

{
  "selection": {
    "zoom": {
      "type": "interval",
      "bind": "scales",
      "zoom": "wheel!",
      "translate": "[mousedown, mouseup] > mousemove!"
    }
  }
}

Cross-Chart Filtering

Link multiple charts together:

Create Selection

Define a selection in the first chart

"selection": {
  "brush": {
    "type": "interval"
  }
}

Apply Filter

Use the selection in other charts

"transform": [{
  "filter": {"selection": "brush"}
}]

Connect Charts

Charts now filter based on selection

Common Chart Types

Time Series

Perfect for showing trends over time:

{
  "mark": {
    "type": "line",
    "point": true,
    "interpolate": "monotone"
  },
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "axis": {"format": "%Y-%m"}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "scale": {"zero": false}
    }
  }
}

Comparison Charts

Compare values across categories:

Simple Bar Chart

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Grouped Bar Chart

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group"},
    "color": {"field": "group"}
  }
}

Stacked Bar Chart

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {
      "field": "value",
      "type": "quantitative",
      "stack": "normalize"  // or "zero" for absolute
    },
    "color": {"field": "series"}
  }
}

Distribution Charts

Show data distribution patterns:

// Histogram
{
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "value",
      "type": "quantitative",
      "bin": {"maxbins": 20}
    },
    "y": {
      "aggregate": "count"
    }
  }
}

// Box Plot
{
  "mark": "boxplot",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Correlation Charts

Visualize relationships between variables:

// Scatter Plot
{
  "mark": "point",
  "encoding": {
    "x": {"field": "variable1", "type": "quantitative"},
    "y": {"field": "variable2", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"},
    "size": {"field": "weight", "type": "quantitative"}
  }
}

// Heatmap
{
  "mark": "rect",
  "encoding": {
    "x": {"field": "x_category", "type": "ordinal"},
    "y": {"field": "y_category", "type": "ordinal"},
    "color": {
      "field": "value",
      "type": "quantitative",
      "scale": {"scheme": "viridis"}
    }
  }
}

Advanced Techniques

Composite Charts

Combine multiple marks:

{
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "month", "type": "ordinal"},
        "y": {"field": "revenue", "type": "quantitative"}
      }
    },
    {
      "mark": {
        "type": "line",
        "color": "red",
        "strokeWidth": 2
      },
      "encoding": {
        "x": {"field": "month", "type": "ordinal"},
        "y": {"field": "target", "type": "quantitative"}
      }
    }
  ]
}

Calculated Fields

Create new fields on the fly:

{
  "transform": [
    {
      "calculate": "datum.revenue - datum.cost",
      "as": "profit"
    },
    {
      "calculate": "datum.profit / datum.revenue",
      "as": "margin"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "product"},
    "y": {"field": "margin", "format": ".1%"}
  }
}

Conditional Formatting

Apply formatting based on values:

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "metric"},
    "y": {"field": "value"},
    "color": {
      "condition": {
        "test": "datum.value > 100",
        "value": "green"
      },
      "value": "red"
    }
  }
}

Performance Optimization

Large Datasets

For datasets with many points:

  1. Sampling - Show representative subset

    "transform": [{"sample": 1000}]

  2. Aggregation - Pre-aggregate data

    "transform": [{
  "aggregate": [{
    "op": "mean",
    "field": "value",
    "as": "avg_value"
  }],
  "groupby": ["category"]
}]

  3. Binning - Group continuous values

    "encoding": {
  "x": {
    "field": "timestamp",
    "timeUnit": "yearmonth"
  }
}

Rendering Performance

  • Use Canvas instead of SVG for many marks
  • Limit the number of color categories
  • Avoid overlapping marks when possible
  • Consider static charts for dashboards

Sharing and Embedding

Export Options

Export your charts in various formats:

  • PNG/JPG - High-resolution images
  • SVG - Scalable vector graphics
  • PDF - Print-ready documents
  • Vega-Lite Spec - Share the specification
  • Interactive HTML - Embed in websites

Embedding Charts

Embed charts in your applications:

<!-- Static Image -->
<img src="https://gopie.app/api/charts/abc123.png" />

<!-- Interactive iframe -->
<iframe 
  src="https://gopie.app/embed/charts/abc123"
  width="800"
  height="400"
></iframe>

<!-- JavaScript Embed -->
<div id="chart"></div>
<script src="https://gopie.app/embed.js"></script>
<script>
  GoPie.embed('#chart', 'abc123');
</script>

Best Practices

Design Principles

  1. Start with the question - What insight are you trying to convey?
  2. Choose appropriate charts - Match visualization to data type
  3. Minimize cognitive load - Don't overload with information
  4. Use color purposefully - Highlight important data
  5. Label clearly - Include units and context

Common Pitfalls

Avoid These Mistakes:

  • Using pie charts for many categories (>5-7)
  • Starting bar charts at non-zero baselines
  • Using 3D effects that distort data
  • Overloading charts with too many series
  • Using color as the only differentiator

Accessibility

Make charts accessible to all users:

  • Include descriptive titles
  • Use colorblind-friendly palettes
  • Provide text alternatives
  • Ensure sufficient contrast
  • Enable keyboard navigation

What's Next?

Multi-Dataset Queries

Query and join data across multiple datasets in GoPie

Chart Types

Explore the various chart types available in GoPie for data visualization