DataGlass

Appearance

Comprehensive Data Showcase - Multiple Graph Types and Multi-Mark Compositions ​

This comprehensive guide demonstrates the DataGlass plugin's data visualization capabilities across various datasets. Each section showcases various chart types (scatter, bar, line, area) and multi-mark compositions.

Benefits of Inline Data ​

Inline data offers several advantages for data visualization:

  • Portable: No external file dependencies
  • Self-Contained: Examples work anywhere
  • Easy to Modify: Quick edits for testing
  • Documentation: Data structure is visible

Table of Contents ​

1.0 Sales Data Examples 1.1 Bar Chart - Revenue by Region 1.2 Horizontal Bar Chart - Revenue by Region 1.3 Line Chart - Revenue Trend Over Time 1.4 Area Chart - Cumulative Revenue 1.5 Multi-Mark: Bar + Rule - Revenue with Average Line 1.6 Multi-Mark: Line + Dot - Trend with Data Points 1.7 Multi-Mark: Bar + Text - Labeled Values

2.0 Fitness Data Examples 2.1 Scatter Plot - Steps vs Calories 2.2 Line Chart - Daily Step Count 2.3 Multi-Line Chart - All Metrics Comparison 2.4 Area Chart - Distance Traveled 2.5 Multi-Mark: Area + Line - Distance with Trend 2.6 Multi-Mark: Scatter + Regression - Steps-Calories Correlation 2.7 Bar Chart - Average Metrics

3.0 Weather Data Examples 3.1 Line Chart - Temperature Trend 3.2 Multi-Line Chart - Temperature, Humidity, Wind 3.3 Area Chart - Precipitation Over Time 3.4 Scatter Plot - Temperature vs Humidity 3.5 Multi-Mark: Line + Dot - Temperature with Points 3.6 Multi-Mark: Area + Rule - Precipitation with Threshold 3.7 Bar Chart - Total Precipitation by Week

4.0 Stock Data Examples 4.1 Line Chart - Closing Price Trend 4.2 Area Chart - Trading Volume 4.3 Multi-Mark: Line + Area - Price and Volume 4.4 Bar Chart - Daily Price Change 4.5 Multi-Mark: Bar + Rule - Price Change with Zero Line 4.6 Scatter Plot - High vs Low Volatility 4.7 Multi-Mark: Text Annotations - Key Price Levels

5.0 E-commerce Data Examples 5.1 Bar Chart - Revenue by Product 5.2 Horizontal Bar Chart - Top Products 5.3 Scatter Plot - Price vs Quantity 5.4 Line Chart - Daily Orders 5.5 Multi-Mark: Bar + Text - Product Revenue with Labels 5.6 Area Chart - Cumulative Revenue 5.7 Multi-Mark: Scatter + Regression - Pricing Analysis

6.0 Advanced Multi-Mark Compositions 6.1 Triple Mark: Area + Line + Dot - Comprehensive Time Series 6.2 Bar + Rule + Text - Fully Annotated Comparison 6.3 Line + Area + Rule - Threshold Visualization 6.4 Crosshair + Dot - Interactive Exploration

7.0 Advanced Features 7.1 Data Transformations - Filter, Aggregate, Sort 7.2 Custom Scales - Logarithmic and Custom Domains 7.3 Color Schemes - Custom Palettes 7.4 Faceting - Small Multiples

1.0 Sales Data Examples ​

Monthly sales data with revenue figures across different regions. Includes three columns: month (date), revenue (numeric), and region (categorical).

1.1 Bar Chart - Revenue by Region ​

Vertical bar chart showing revenue distribution across regions.

View Source
data:
  source: '[{"month":"2024-01","revenue":15000,"region":"North"},{"month":"2024-02","revenue":18500,"region":"North"},{"month":"2024-03","revenue":22000,"region":"North"},{"month":"2024-01","revenue":12000,"region":"South"},{"month":"2024-02","revenue":14500,"region":"South"},{"month":"2024-03","revenue":16000,"region":"South"},{"month":"2024-01","revenue":19000,"region":"East"},{"month":"2024-02","revenue":21000,"region":"East"},{"month":"2024-03","revenue":24500,"region":"East"},{"month":"2024-01","revenue":11000,"region":"West"},{"month":"2024-02","revenue":13000,"region":"West"},{"month":"2024-03","revenue":15500,"region":"West"}]'
type: bar
engine: plot
title: 1.1 Revenue by Region
width: 700
height: 500
marks:
  - type: bar
    configuration:
      x: region
      y: revenue
      fill: region
      tip: true
x:
  label: Region
y:
  label: Revenue ($)
grid: true

1.2 Horizontal Bar Chart - Revenue by Region ​

Horizontal orientation works well when comparing categorical values.

View Source
data:
  source: '[{"month":"2024-01","revenue":15000,"region":"North"},{"month":"2024-02","revenue":18500,"region":"North"},{"month":"2024-03","revenue":22000,"region":"North"},{"month":"2024-01","revenue":12000,"region":"South"},{"month":"2024-02","revenue":14500,"region":"South"},{"month":"2024-03","revenue":16000,"region":"South"},{"month":"2024-01","revenue":19000,"region":"East"},{"month":"2024-02","revenue":21000,"region":"East"},{"month":"2024-03","revenue":24500,"region":"East"},{"month":"2024-01","revenue":11000,"region":"West"},{"month":"2024-02","revenue":13000,"region":"West"},{"month":"2024-03","revenue":15500,"region":"West"}]'
type: bar
engine: plot
title: 1.2 Revenue by Region (Horizontal)
width: 700
height: 500
marks:
  - type: barX
    configuration:
      y: region
      x: revenue
      fill: "#2ecc71"
      tip: true
x:
  label: Revenue ($)
y:
  label: Region
grid: true

1.3 Line Chart - Revenue Trend Over Time ​

Time series visualization showing revenue progression by month.

View Source
data:
  source: '[{"month":"2024-01","revenue":57000,"region":"All"},{"month":"2024-02","revenue":67000,"region":"All"},{"month":"2024-03","revenue":78000,"region":"All"},{"month":"2024-04","revenue":72000,"region":"All"},{"month":"2024-05","revenue":85000,"region":"All"},{"month":"2024-06","revenue":91000,"region":"All"}]'
type: line
engine: plot
title: 1.3 Monthly Revenue Trend
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: month
      y: revenue
      stroke: "#9b59b6"
      strokeWidth: 3
      tip: true
  - type: ruleY
    configuration:
      y: 0
x:
  label: Month
y:
  label: Revenue ($)
grid: true

1.4 Area Chart - Cumulative Revenue ​

Filled area chart emphasizing total revenue accumulation.

View Source
data:
  source: '[{"month":"2024-01","revenue":57000},{"month":"2024-02","revenue":67000},{"month":"2024-03","revenue":78000},{"month":"2024-04","revenue":72000},{"month":"2024-05","revenue":85000},{"month":"2024-06","revenue":91000}]'
type: area
engine: plot
title: 1.4 Revenue Growth Area
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: month
      y: revenue
      fill: "#e74c3c"
      fillOpacity: 0.3
      tip: true
  - type: line
    configuration:
      x: month
      y: revenue
      stroke: "#c0392b"
      strokeWidth: 2
  - type: ruleY
    configuration:
      y: 0
x:
  label: Month
y:
  label: Revenue ($)
grid: true

1.5 Multi-Mark: Bar + Rule - Revenue with Average Line ​

Combines bars with a horizontal rule showing average revenue across all months.

View Source
data:
  source: '[{"month":"2024-01","revenue":57000},{"month":"2024-02","revenue":67000},{"month":"2024-03","revenue":78000},{"month":"2024-04","revenue":72000},{"month":"2024-05","revenue":85000},{"month":"2024-06","revenue":91000}]'
type: bar
engine: plot
title: 1.5 Revenue with Average Reference Line
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: month
      y: revenue
      fill: "#3498db"
      tip: true
  - type: ruleY
    configuration:
      y: 75000
      stroke: "#e74c3c"
      strokeWidth: 2
      strokeDasharray: "5,5"
x:
  label: Month
y:
  label: Revenue ($)
grid: true

1.6 Multi-Mark: Line + Dot - Trend with Data Points ​

Line chart enhanced with dots at each data point for emphasis.

View Source
data:
  source: '[{"month":"2024-01","revenue":57000},{"month":"2024-02","revenue":67000},{"month":"2024-03","revenue":78000},{"month":"2024-04","revenue":72000},{"month":"2024-05","revenue":85000},{"month":"2024-06","revenue":91000}]'
type: line
engine: plot
title: 1.6 Revenue Trend with Data Points
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: month
      y: revenue
      stroke: "#2ecc71"
      strokeWidth: 2.5
  - type: dot
    configuration:
      x: month
      y: revenue
      fill: "#27ae60"
      r: 5
      tip: true
x:
  label: Month
y:
  label: Revenue ($)
grid: true

1.7 Multi-Mark: Bar + Text - Labeled Values ​

Bar chart with text labels displaying exact revenue values.

View Source
data:
  source: '[{"region":"North","revenue":55500},{"region":"South","revenue":42500},{"region":"East","revenue":64500},{"region":"West","revenue":39500}]'
type: bar
engine: plot
title: 1.7 Revenue by Region with Value Labels
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: region
      y: revenue
      fill: "#9b59b6"
      tip: true
  - type: text
    configuration:
      x: region
      y: revenue
      text: revenue
      dy: 20
      fill: "#FFF"
      fontSize: 12
x:
  label: Region
y:
  label: Revenue ($)
grid: true

2.0 Fitness Data Examples ​

Daily fitness tracking data with four columns: date, steps, calories, and distance_km. This dataset is ideal for time series analysis and correlation studies.

2.1 Scatter Plot - Steps vs Calories ​

Exploring the relationship between daily steps and calories burned.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500,"calories":2100,"distance_km":6.8},{"date":"2024-01-02","steps":12000,"calories":2800,"distance_km":9.6},{"date":"2024-01-03","steps":6500,"calories":1750,"distance_km":5.2},{"date":"2024-01-04","steps":15000,"calories":3200,"distance_km":12.0},{"date":"2024-01-05","steps":9800,"calories":2400,"distance_km":7.8},{"date":"2024-01-06","steps":11200,"calories":2650,"distance_km":9.0},{"date":"2024-01-07","steps":7800,"calories":2000,"distance_km":6.2},{"date":"2024-01-08","steps":13500,"calories":3000,"distance_km":10.8},{"date":"2024-01-09","steps":10500,"calories":2550,"distance_km":8.4},{"date":"2024-01-10","steps":14200,"calories":3100,"distance_km":11.4}]'
type: scatter
engine: plot
title: 2.1 Steps vs Calories Burned
width: 700
height: 500
marks:
  - type: dot
    configuration:
      x: steps
      y: calories
      fill: "#e67e22"
      r: 7
      tip: true
x:
  label: Steps
y:
  label: Calories Burned
grid: true

2.2 Line Chart - Daily Step Count ​

Time series showing step count progression over 10 days.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500,"calories":2100,"distance_km":6.8},{"date":"2024-01-02","steps":12000,"calories":2800,"distance_km":9.6},{"date":"2024-01-03","steps":6500,"calories":1750,"distance_km":5.2},{"date":"2024-01-04","steps":15000,"calories":3200,"distance_km":12.0},{"date":"2024-01-05","steps":9800,"calories":2400,"distance_km":7.8},{"date":"2024-01-06","steps":11200,"calories":2650,"distance_km":9.0},{"date":"2024-01-07","steps":7800,"calories":2000,"distance_km":6.2},{"date":"2024-01-08","steps":13500,"calories":3000,"distance_km":10.8},{"date":"2024-01-09","steps":10500,"calories":2550,"distance_km":8.4},{"date":"2024-01-10","steps":14200,"calories":3100,"distance_km":11.4}]'
type: line
engine: plot
title: 2.2 Daily Step Count
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: steps
      stroke: "#3498db"
      strokeWidth: 2.5
      tip: true
  - type: ruleY
    configuration:
      y: 10000
      stroke: "#e74c3c"
      strokeWidth: 1.5
      strokeDasharray: "4,4"
x:
  label: Date
y:
  label: Steps
grid: true

2.3 Multi-Line Chart - All Metrics Comparison ​

Comparing steps, calories, and distance on normalized scales to show patterns.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500,"calories":2100,"distance_km":6.8,"steps_normalized":85,"distance_normalized":6800},{"date":"2024-01-02","steps":12000,"calories":2800,"distance_km":9.6,"steps_normalized":120,"distance_normalized":9600},{"date":"2024-01-03","steps":6500,"calories":1750,"distance_km":5.2,"steps_normalized":65,"distance_normalized":5200},{"date":"2024-01-04","steps":15000,"calories":3200,"distance_km":12.0,"steps_normalized":150,"distance_normalized":12000},{"date":"2024-01-05","steps":9800,"calories":2400,"distance_km":7.8,"steps_normalized":98,"distance_normalized":7800},{"date":"2024-01-06","steps":11200,"calories":2650,"distance_km":9.0,"steps_normalized":112,"distance_normalized":9000},{"date":"2024-01-07","steps":7800,"calories":2000,"distance_km":6.2,"steps_normalized":78,"distance_normalized":6200},{"date":"2024-01-08","steps":13500,"calories":3000,"distance_km":10.8,"steps_normalized":135,"distance_normalized":10800},{"date":"2024-01-09","steps":10500,"calories":2550,"distance_km":8.4,"steps_normalized":105,"distance_normalized":8400},{"date":"2024-01-10","steps":14200,"calories":3100,"distance_km":11.4,"steps_normalized":142,"distance_normalized":11400}]'
type: line
engine: plot
title: 2.3 Fitness Metrics Comparison (Normalized)
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: steps_normalized
      stroke: "#3498db"
      strokeWidth: 2
      tip: true
  - type: line
    configuration:
      x: date
      y: calories
      stroke: "#e74c3c"
      strokeWidth: 2
      tip: true
  - type: line
    configuration:
      x: date
      y: distance_normalized
      stroke: "#2ecc71"
      strokeWidth: 2
      tip: true
x:
  label: Date
y:
  label: Value (Normalized Scale)
grid: true

2.4 Area Chart - Distance Traveled ​

Visualizing cumulative distance traveled over time.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500,"calories":2100,"distance_km":6.8},{"date":"2024-01-02","steps":12000,"calories":2800,"distance_km":9.6},{"date":"2024-01-03","steps":6500,"calories":1750,"distance_km":5.2},{"date":"2024-01-04","steps":15000,"calories":3200,"distance_km":12.0},{"date":"2024-01-05","steps":9800,"calories":2400,"distance_km":7.8},{"date":"2024-01-06","steps":11200,"calories":2650,"distance_km":9.0},{"date":"2024-01-07","steps":7800,"calories":2000,"distance_km":6.2},{"date":"2024-01-08","steps":13500,"calories":3000,"distance_km":10.8},{"date":"2024-01-09","steps":10500,"calories":2550,"distance_km":8.4},{"date":"2024-01-10","steps":14200,"calories":3100,"distance_km":11.4}]'
type: area
engine: plot
title: 2.4 Distance Traveled Over Time
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: distance_km
      fill: "#9b59b6"
      fillOpacity: 0.4
      tip: true
  - type: line
    configuration:
      x: date
      y: distance_km
      stroke: "#8e44ad"
      strokeWidth: 2
x:
  label: Date
y:
  label: Distance (km)
grid: true

2.5 Multi-Mark: Area + Line - Distance with Trend ​

Area chart combined with line to emphasize both fill and trend.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500,"calories":2100,"distance_km":6.8},{"date":"2024-01-02","steps":12000,"calories":2800,"distance_km":9.6},{"date":"2024-01-03","steps":6500,"calories":1750,"distance_km":5.2},{"date":"2024-01-04","steps":15000,"calories":3200,"distance_km":12.0},{"date":"2024-01-05","steps":9800,"calories":2400,"distance_km":7.8},{"date":"2024-01-06","steps":11200,"calories":2650,"distance_km":9.0},{"date":"2024-01-07","steps":7800,"calories":2000,"distance_km":6.2},{"date":"2024-01-08","steps":13500,"calories":3000,"distance_km":10.8},{"date":"2024-01-09","steps":10500,"calories":2550,"distance_km":8.4},{"date":"2024-01-10","steps":14200,"calories":3100,"distance_km":11.4}]'
type: area
engine: plot
title: 2.5 Distance with Trend Line
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: distance_km
      fill: "#1abc9c"
      fillOpacity: 0.3
  - type: line
    configuration:
      x: date
      y: distance_km
      stroke: "#16a085"
      strokeWidth: 3
      tip: true
  - type: dot
    configuration:
      x: date
      y: distance_km
      fill: "#0e6655"
      r: 4
x:
  label: Date
y:
  label: Distance (km)
grid: true

2.6 Multi-Mark: Scatter + Regression - Steps-Calories Correlation ​

Scatter plot with regression line showing linear relationship between steps and calories.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500,"calories":2100,"distance_km":6.8},{"date":"2024-01-02","steps":12000,"calories":2800,"distance_km":9.6},{"date":"2024-01-03","steps":6500,"calories":1750,"distance_km":5.2},{"date":"2024-01-04","steps":15000,"calories":3200,"distance_km":12.0},{"date":"2024-01-05","steps":9800,"calories":2400,"distance_km":7.8},{"date":"2024-01-06","steps":11200,"calories":2650,"distance_km":9.0},{"date":"2024-01-07","steps":7800,"calories":2000,"distance_km":6.2},{"date":"2024-01-08","steps":13500,"calories":3000,"distance_km":10.8},{"date":"2024-01-09","steps":10500,"calories":2550,"distance_km":8.4},{"date":"2024-01-10","steps":14200,"calories":3100,"distance_km":11.4}]'
type: scatter
engine: plot
title: 2.6 Steps-Calories Correlation with Regression
width: 700
height: 500
marks:
  - type: dot
    configuration:
      x: steps
      y: calories
      fill: "#f39c12"
      r: 6
      tip: true
  - type: linearRegressionY
    configuration:
      x: steps
      y: calories
      stroke: "#e74c3c"
      strokeWidth: 2.5
x:
  label: Steps
y:
  label: Calories
grid: true

2.7 Bar Chart - Average Metrics ​

Aggregated view showing average values for each fitness metric.

View Source
data:
  source: '[{"metric":"Steps (x100)","value":109},{"metric":"Calories","value":2555},{"metric":"Distance (m)","value":8720}]'
type: bar
engine: plot
title: 2.7 Average Fitness Metrics
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: metric
      y: value
      fill: "#3498db"
      tip: true
x:
  label: Metric
y:
  label: Average Value
grid: true

3.0 Weather Data Examples ​

14 days of weather observations including temperature, humidity, precipitation, and wind speed. Perfect for environmental data visualization.

3.1 Line Chart - Temperature Trend ​

Simple temperature trend over two weeks.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2,"humidity":65,"precipitation":0,"wind_speed":12},{"date":"2024-01-02","temperature":16.8,"humidity":58,"precipitation":0,"wind_speed":8},{"date":"2024-01-03","temperature":14.5,"humidity":72,"precipitation":2.5,"wind_speed":15},{"date":"2024-01-04","temperature":12.3,"humidity":80,"precipitation":5.2,"wind_speed":20},{"date":"2024-01-05","temperature":13.8,"humidity":75,"precipitation":1.8,"wind_speed":18},{"date":"2024-01-06","temperature":17.2,"humidity":55,"precipitation":0,"wind_speed":10},{"date":"2024-01-07","temperature":19.5,"humidity":48,"precipitation":0,"wind_speed":6},{"date":"2024-01-08","temperature":21.0,"humidity":42,"precipitation":0,"wind_speed":5},{"date":"2024-01-09","temperature":20.2,"humidity":45,"precipitation":0,"wind_speed":8},{"date":"2024-01-10","temperature":18.5,"humidity":52,"precipitation":0.5,"wind_speed":12},{"date":"2024-01-11","temperature":16.0,"humidity":68,"precipitation":3.2,"wind_speed":16},{"date":"2024-01-12","temperature":14.2,"humidity":78,"precipitation":4.8,"wind_speed":22},{"date":"2024-01-13","temperature":15.8,"humidity":70,"precipitation":1.2,"wind_speed":14},{"date":"2024-01-14","temperature":18.0,"humidity":58,"precipitation":0,"wind_speed":9}]'
type: line
engine: plot
title: 3.1 Temperature Trend Over 14 Days
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: temperature
      stroke: "#e74c3c"
      strokeWidth: 3
      tip: true
x:
  label: Date
y:
  label: Temperature (C)
grid: true

3.2 Multi-Line Chart - Temperature, Humidity, Wind ​

Comparing three different weather metrics on the same chart.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2,"humidity":65,"precipitation":0,"wind_speed":12},{"date":"2024-01-02","temperature":16.8,"humidity":58,"precipitation":0,"wind_speed":8},{"date":"2024-01-03","temperature":14.5,"humidity":72,"precipitation":2.5,"wind_speed":15},{"date":"2024-01-04","temperature":12.3,"humidity":80,"precipitation":5.2,"wind_speed":20},{"date":"2024-01-05","temperature":13.8,"humidity":75,"precipitation":1.8,"wind_speed":18},{"date":"2024-01-06","temperature":17.2,"humidity":55,"precipitation":0,"wind_speed":10},{"date":"2024-01-07","temperature":19.5,"humidity":48,"precipitation":0,"wind_speed":6},{"date":"2024-01-08","temperature":21.0,"humidity":42,"precipitation":0,"wind_speed":5},{"date":"2024-01-09","temperature":20.2,"humidity":45,"precipitation":0,"wind_speed":8},{"date":"2024-01-10","temperature":18.5,"humidity":52,"precipitation":0.5,"wind_speed":12},{"date":"2024-01-11","temperature":16.0,"humidity":68,"precipitation":3.2,"wind_speed":16},{"date":"2024-01-12","temperature":14.2,"humidity":78,"precipitation":4.8,"wind_speed":22},{"date":"2024-01-13","temperature":15.8,"humidity":70,"precipitation":1.2,"wind_speed":14},{"date":"2024-01-14","temperature":18.0,"humidity":58,"precipitation":0,"wind_speed":9}]'
type: line
engine: plot
title: 3.2 Weather Metrics Comparison
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: temperature
      stroke: "#e74c3c"
      strokeWidth: 2
      tip: true
  - type: line
    configuration:
      x: date
      y: humidity
      stroke: "#3498db"
      strokeWidth: 2
      tip: true
  - type: line
    configuration:
      x: date
      y: wind_speed
      stroke: "#2ecc71"
      strokeWidth: 2
      tip: true
x:
  label: Date
y:
  label: Value
grid: true

3.3 Area Chart - Precipitation Over Time ​

Filled area chart emphasizing precipitation amounts.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2,"humidity":65,"precipitation":0,"wind_speed":12},{"date":"2024-01-02","temperature":16.8,"humidity":58,"precipitation":0,"wind_speed":8},{"date":"2024-01-03","temperature":14.5,"humidity":72,"precipitation":2.5,"wind_speed":15},{"date":"2024-01-04","temperature":12.3,"humidity":80,"precipitation":5.2,"wind_speed":20},{"date":"2024-01-05","temperature":13.8,"humidity":75,"precipitation":1.8,"wind_speed":18},{"date":"2024-01-06","temperature":17.2,"humidity":55,"precipitation":0,"wind_speed":10},{"date":"2024-01-07","temperature":19.5,"humidity":48,"precipitation":0,"wind_speed":6},{"date":"2024-01-08","temperature":21.0,"humidity":42,"precipitation":0,"wind_speed":5},{"date":"2024-01-09","temperature":20.2,"humidity":45,"precipitation":0,"wind_speed":8},{"date":"2024-01-10","temperature":18.5,"humidity":52,"precipitation":0.5,"wind_speed":12},{"date":"2024-01-11","temperature":16.0,"humidity":68,"precipitation":3.2,"wind_speed":16},{"date":"2024-01-12","temperature":14.2,"humidity":78,"precipitation":4.8,"wind_speed":22},{"date":"2024-01-13","temperature":15.8,"humidity":70,"precipitation":1.2,"wind_speed":14},{"date":"2024-01-14","temperature":18.0,"humidity":58,"precipitation":0,"wind_speed":9}]'
type: area
engine: plot
title: 3.3 Daily Precipitation
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: precipitation
      fill: "#3498db"
      fillOpacity: 0.4
      tip: true
  - type: line
    configuration:
      x: date
      y: precipitation
      stroke: "#2980b9"
      strokeWidth: 2
  - type: ruleY
    configuration:
      y: 0
x:
  label: Date
y:
  label: Precipitation (mm)
grid: true

3.4 Scatter Plot - Temperature vs Humidity ​

Exploring inverse correlation between temperature and humidity.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2,"humidity":65,"precipitation":0,"wind_speed":12},{"date":"2024-01-02","temperature":16.8,"humidity":58,"precipitation":0,"wind_speed":8},{"date":"2024-01-03","temperature":14.5,"humidity":72,"precipitation":2.5,"wind_speed":15},{"date":"2024-01-04","temperature":12.3,"humidity":80,"precipitation":5.2,"wind_speed":20},{"date":"2024-01-05","temperature":13.8,"humidity":75,"precipitation":1.8,"wind_speed":18},{"date":"2024-01-06","temperature":17.2,"humidity":55,"precipitation":0,"wind_speed":10},{"date":"2024-01-07","temperature":19.5,"humidity":48,"precipitation":0,"wind_speed":6},{"date":"2024-01-08","temperature":21.0,"humidity":42,"precipitation":0,"wind_speed":5},{"date":"2024-01-09","temperature":20.2,"humidity":45,"precipitation":0,"wind_speed":8},{"date":"2024-01-10","temperature":18.5,"humidity":52,"precipitation":0.5,"wind_speed":12},{"date":"2024-01-11","temperature":16.0,"humidity":68,"precipitation":3.2,"wind_speed":16},{"date":"2024-01-12","temperature":14.2,"humidity":78,"precipitation":4.8,"wind_speed":22},{"date":"2024-01-13","temperature":15.8,"humidity":70,"precipitation":1.2,"wind_speed":14},{"date":"2024-01-14","temperature":18.0,"humidity":58,"precipitation":0,"wind_speed":9}]'
type: scatter
engine: plot
title: 3.4 Temperature vs Humidity Correlation
width: 700
height: 500
marks:
  - type: dot
    configuration:
      x: temperature
      y: humidity
      fill: "#9b59b6"
      r: 7
      tip: true
x:
  label: Temperature (C)
y:
  label: Humidity (%)
grid: true

3.5 Multi-Mark: Line + Dot - Temperature with Points ​

Temperature line enhanced with data point markers.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2,"humidity":65,"precipitation":0,"wind_speed":12},{"date":"2024-01-02","temperature":16.8,"humidity":58,"precipitation":0,"wind_speed":8},{"date":"2024-01-03","temperature":14.5,"humidity":72,"precipitation":2.5,"wind_speed":15},{"date":"2024-01-04","temperature":12.3,"humidity":80,"precipitation":5.2,"wind_speed":20},{"date":"2024-01-05","temperature":13.8,"humidity":75,"precipitation":1.8,"wind_speed":18},{"date":"2024-01-06","temperature":17.2,"humidity":55,"precipitation":0,"wind_speed":10},{"date":"2024-01-07","temperature":19.5,"humidity":48,"precipitation":0,"wind_speed":6},{"date":"2024-01-08","temperature":21.0,"humidity":42,"precipitation":0,"wind_speed":5},{"date":"2024-01-09","temperature":20.2,"humidity":45,"precipitation":0,"wind_speed":8},{"date":"2024-01-10","temperature":18.5,"humidity":52,"precipitation":0.5,"wind_speed":12},{"date":"2024-01-11","temperature":16.0,"humidity":68,"precipitation":3.2,"wind_speed":16},{"date":"2024-01-12","temperature":14.2,"humidity":78,"precipitation":4.8,"wind_speed":22},{"date":"2024-01-13","temperature":15.8,"humidity":70,"precipitation":1.2,"wind_speed":14},{"date":"2024-01-14","temperature":18.0,"humidity":58,"precipitation":0,"wind_speed":9}]'
type: line
engine: plot
title: 3.5 Temperature Trend with Data Points
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: temperature
      stroke: "#e67e22"
      strokeWidth: 2.5
  - type: dot
    configuration:
      x: date
      y: temperature
      fill: "#d35400"
      r: 5
      tip: true
  - type: ruleY
    configuration:
      y: 16.6
      stroke: "#95a5a6"
      strokeWidth: 1.5
      strokeDasharray: "4,4"
x:
  label: Date
y:
  label: Temperature (C)
grid: true

3.6 Multi-Mark: Area + Rule - Precipitation with Threshold ​

Precipitation area chart with a threshold line for significant rainfall.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2,"humidity":65,"precipitation":0,"wind_speed":12},{"date":"2024-01-02","temperature":16.8,"humidity":58,"precipitation":0,"wind_speed":8},{"date":"2024-01-03","temperature":14.5,"humidity":72,"precipitation":2.5,"wind_speed":15},{"date":"2024-01-04","temperature":12.3,"humidity":80,"precipitation":5.2,"wind_speed":20},{"date":"2024-01-05","temperature":13.8,"humidity":75,"precipitation":1.8,"wind_speed":18},{"date":"2024-01-06","temperature":17.2,"humidity":55,"precipitation":0,"wind_speed":10},{"date":"2024-01-07","temperature":19.5,"humidity":48,"precipitation":0,"wind_speed":6},{"date":"2024-01-08","temperature":21.0,"humidity":42,"precipitation":0,"wind_speed":5},{"date":"2024-01-09","temperature":20.2,"humidity":45,"precipitation":0,"wind_speed":8},{"date":"2024-01-10","temperature":18.5,"humidity":52,"precipitation":0.5,"wind_speed":12},{"date":"2024-01-11","temperature":16.0,"humidity":68,"precipitation":3.2,"wind_speed":16},{"date":"2024-01-12","temperature":14.2,"humidity":78,"precipitation":4.8,"wind_speed":22},{"date":"2024-01-13","temperature":15.8,"humidity":70,"precipitation":1.2,"wind_speed":14},{"date":"2024-01-14","temperature":18.0,"humidity":58,"precipitation":0,"wind_speed":9}]'
type: area
engine: plot
title: 3.6 Precipitation with Significance Threshold
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: precipitation
      fill: "#3498db"
      fillOpacity: 0.3
      tip: true
  - type: line
    configuration:
      x: date
      y: precipitation
      stroke: "#2980b9"
      strokeWidth: 2
  - type: ruleY
    configuration:
      y: 3.0
      stroke: "#e74c3c"
      strokeWidth: 2
      strokeDasharray: "5,5"
  - type: ruleY
    configuration:
      y: 0
x:
  label: Date
y:
  label: Precipitation (mm)
grid: true

3.7 Bar Chart - Total Precipitation by Week ​

Aggregated precipitation data showing weekly totals.

View Source
data:
  source: '[{"week":"Week 1","precipitation_sum":9.5},{"week":"Week 2","precipitation_sum":9.7}]'
type: bar
engine: plot
title: 3.7 Weekly Precipitation Totals
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: week
      y: precipitation_sum
      fill: "#1abc9c"
      tip: true
  - type: text
    configuration:
      x: week
      y: precipitation_sum
      text: precipitation_sum
      dy: -10
      fontSize: 14
x:
  label: Week
y:
  label: Total Precipitation (mm)
grid: true

4.0 Stock Data Examples ​

20 days of AAPL stock market data including open, high, low, close prices, and trading volume. This dataset demonstrates financial visualization patterns.

4.1 Line Chart - Closing Price Trend ​

Basic stock price chart showing closing prices over time.

View Source
data:
  source: '[{"date":"2024-01-01","open":185.2,"high":187.5,"low":184.0,"close":186.8,"volume":45000000},{"date":"2024-01-02","open":186.8,"high":189.2,"low":185.5,"close":188.5,"volume":52000000},{"date":"2024-01-03","open":188.5,"high":190.0,"low":187.0,"close":189.2,"volume":48000000},{"date":"2024-01-04","open":189.2,"high":191.5,"low":188.0,"close":190.8,"volume":55000000},{"date":"2024-01-05","open":190.8,"high":192.0,"low":189.5,"close":191.5,"volume":42000000},{"date":"2024-01-08","open":191.5,"high":193.2,"low":190.0,"close":192.8,"volume":58000000},{"date":"2024-01-09","open":192.8,"high":194.5,"low":191.5,"close":193.5,"volume":62000000},{"date":"2024-01-10","open":193.5,"high":195.0,"low":192.0,"close":194.2,"volume":51000000},{"date":"2024-01-11","open":194.2,"high":196.5,"low":193.0,"close":195.8,"volume":68000000},{"date":"2024-01-12","open":195.8,"high":197.0,"low":194.5,"close":196.2,"volume":54000000},{"date":"2024-01-15","open":196.2,"high":198.5,"low":195.0,"close":197.8,"volume":72000000},{"date":"2024-01-16","open":197.8,"high":199.0,"low":196.5,"close":198.5,"volume":65000000},{"date":"2024-01-17","open":198.5,"high":200.2,"low":197.0,"close":199.2,"volume":78000000},{"date":"2024-01-18","open":199.2,"high":201.0,"low":198.0,"close":200.5,"volume":85000000},{"date":"2024-01-19","open":200.5,"high":202.5,"low":199.0,"close":201.8,"volume":72000000},{"date":"2024-01-22","open":201.8,"high":203.0,"low":200.5,"close":202.2,"volume":68000000},{"date":"2024-01-23","open":202.2,"high":204.5,"low":201.0,"close":203.8,"volume":75000000},{"date":"2024-01-24","open":203.8,"high":205.0,"low":202.5,"close":204.2,"volume":62000000},{"date":"2024-01-25","open":204.2,"high":206.5,"low":203.0,"close":205.5,"volume":82000000},{"date":"2024-01-26","open":205.5,"high":207.0,"low":204.0,"close":206.2,"volume":70000000}]'
type: line
engine: plot
title: 4.1 AAPL Closing Price Trend
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: close
      stroke: "#2ecc71"
      strokeWidth: 3
      tip: true
  - type: dot
    configuration:
      x: date
      y: close
      fill: "#27ae60"
      r: 3
x:
  label: Date
y:
  label: Close Price ($)
grid: true

4.2 Area Chart - Trading Volume ​

Visualizing trading volume fluctuations.

View Source
data:
  source: '[{"date":"2024-01-01","open":185.2,"high":187.5,"low":184.0,"close":186.8,"volume":45000000},{"date":"2024-01-02","open":186.8,"high":189.2,"low":185.5,"close":188.5,"volume":52000000},{"date":"2024-01-03","open":188.5,"high":190.0,"low":187.0,"close":189.2,"volume":48000000},{"date":"2024-01-04","open":189.2,"high":191.5,"low":188.0,"close":190.8,"volume":55000000},{"date":"2024-01-05","open":190.8,"high":192.0,"low":189.5,"close":191.5,"volume":42000000},{"date":"2024-01-08","open":191.5,"high":193.2,"low":190.0,"close":192.8,"volume":58000000},{"date":"2024-01-09","open":192.8,"high":194.5,"low":191.5,"close":193.5,"volume":62000000},{"date":"2024-01-10","open":193.5,"high":195.0,"low":192.0,"close":194.2,"volume":51000000},{"date":"2024-01-11","open":194.2,"high":196.5,"low":193.0,"close":195.8,"volume":68000000},{"date":"2024-01-12","open":195.8,"high":197.0,"low":194.5,"close":196.2,"volume":54000000},{"date":"2024-01-15","open":196.2,"high":198.5,"low":195.0,"close":197.8,"volume":72000000},{"date":"2024-01-16","open":197.8,"high":199.0,"low":196.5,"close":198.5,"volume":65000000},{"date":"2024-01-17","open":198.5,"high":200.2,"low":197.0,"close":199.2,"volume":78000000},{"date":"2024-01-18","open":199.2,"high":201.0,"low":198.0,"close":200.5,"volume":85000000},{"date":"2024-01-19","open":200.5,"high":202.5,"low":199.0,"close":201.8,"volume":72000000},{"date":"2024-01-22","open":201.8,"high":203.0,"low":200.5,"close":202.2,"volume":68000000},{"date":"2024-01-23","open":202.2,"high":204.5,"low":201.0,"close":203.8,"volume":75000000},{"date":"2024-01-24","open":203.8,"high":205.0,"low":202.5,"close":204.2,"volume":62000000},{"date":"2024-01-25","open":204.2,"high":206.5,"low":203.0,"close":205.5,"volume":82000000},{"date":"2024-01-26","open":205.5,"high":207.0,"low":204.0,"close":206.2,"volume":70000000}]'
type: area
engine: plot
title: 4.2 Trading Volume Over Time
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: volume
      fill: "#3498db"
      fillOpacity: 0.4
      tip: true
  - type: line
    configuration:
      x: date
      y: volume
      stroke: "#2980b9"
      strokeWidth: 2
x:
  label: Date
y:
  label: Volume
grid: true

4.3 Multi-Mark: Line + Area - Price and Volume ​

Dual-axis visualization combining price trend with volume bars.

View Source
data:
  source: '[{"date":"2024-01-01","open":185.2,"high":187.5,"low":184.0,"close":186.8,"volume":45,"volume_normalized":45},{"date":"2024-01-02","open":186.8,"high":189.2,"low":185.5,"close":188.5,"volume":52,"volume_normalized":52},{"date":"2024-01-03","open":188.5,"high":190.0,"low":187.0,"close":189.2,"volume":48,"volume_normalized":48},{"date":"2024-01-04","open":189.2,"high":191.5,"low":188.0,"close":190.8,"volume":55,"volume_normalized":55},{"date":"2024-01-05","open":190.8,"high":192.0,"low":189.5,"close":191.5,"volume":42,"volume_normalized":42},{"date":"2024-01-08","open":191.5,"high":193.2,"low":190.0,"close":192.8,"volume":58,"volume_normalized":58},{"date":"2024-01-09","open":192.8,"high":194.5,"low":191.5,"close":193.5,"volume":62,"volume_normalized":62},{"date":"2024-01-10","open":193.5,"high":195.0,"low":192.0,"close":194.2,"volume":51,"volume_normalized":51},{"date":"2024-01-11","open":194.2,"high":196.5,"low":193.0,"close":195.8,"volume":68,"volume_normalized":68},{"date":"2024-01-12","open":195.8,"high":197.0,"low":194.5,"close":196.2,"volume":54,"volume_normalized":54}]'
type: line
engine: plot
title: 4.3 Price Trend with Volume (Normalized)
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: volume_normalized
      fill: "#95a5a6"
      fillOpacity: 0.2
  - type: line
    configuration:
      x: date
      y: close
      stroke: "#e74c3c"
      strokeWidth: 3
      tip: true
  - type: dot
    configuration:
      x: date
      y: close
      fill: "#c0392b"
      r: 3
x:
  label: Date
y:
  label: Price / Volume (Millions)
grid: true

4.4 Bar Chart - Daily Price Change ​

Showing daily price changes with positive/negative coloring.

View Source
data:
  source: '[{"date":"2024-01-01","price_change":1.6},{"date":"2024-01-02","price_change":1.7},{"date":"2024-01-03","price_change":0.7},{"date":"2024-01-04","price_change":1.6},{"date":"2024-01-05","price_change":0.7},{"date":"2024-01-08","price_change":1.3},{"date":"2024-01-09","price_change":0.7},{"date":"2024-01-10","price_change":0.7},{"date":"2024-01-11","price_change":1.6},{"date":"2024-01-12","price_change":0.4},{"date":"2024-01-15","price_change":1.6},{"date":"2024-01-16","price_change":0.7},{"date":"2024-01-17","price_change":0.7},{"date":"2024-01-18","price_change":1.3},{"date":"2024-01-19","price_change":1.3},{"date":"2024-01-22","price_change":0.4},{"date":"2024-01-23","price_change":1.6},{"date":"2024-01-24","price_change":0.4},{"date":"2024-01-25","price_change":1.3},{"date":"2024-01-26","price_change":0.7}]'
type: bar
engine: plot
title: 4.4 Daily Price Change
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: date
      y: price_change
      fill: "#3498db"
      tip: true
  - type: ruleY
    configuration:
      y: 0
      stroke: "#2c3e50"
      strokeWidth: 2
x:
  label: Date
y:
  label: Price Change ($)
grid: true

4.5 Multi-Mark: Bar + Rule - Price Change with Zero Line ​

Price change bars with clear zero reference line.

View Source
data:
  source: '[{"date":"2024-01-01","daily_change":1.6},{"date":"2024-01-02","daily_change":1.7},{"date":"2024-01-03","daily_change":0.7},{"date":"2024-01-04","daily_change":1.6},{"date":"2024-01-05","daily_change":0.7},{"date":"2024-01-08","daily_change":1.3},{"date":"2024-01-09","daily_change":0.7},{"date":"2024-01-10","daily_change":0.7},{"date":"2024-01-11","daily_change":1.6},{"date":"2024-01-12","daily_change":0.4}]'
type: bar
engine: plot
title: 4.5 Price Change with Zero Baseline
width: 700
height: 500
marks:
  - type: ruleY
    configuration:
      y: 0
      stroke: "#34495e"
      strokeWidth: 2
  - type: barY
    configuration:
      x: date
      y: daily_change
      fill: "#9b59b6"
      tip: true
x:
  label: Date
y:
  label: Daily Change ($)
grid: true

4.6 Scatter Plot - High vs Low Volatility ​

Analyzing intraday volatility by comparing high and low prices.

View Source
data:
  source: '[{"date":"2024-01-01","high":187.5,"low":184.0},{"date":"2024-01-02","high":189.2,"low":185.5},{"date":"2024-01-03","high":190.0,"low":187.0},{"date":"2024-01-04","high":191.5,"low":188.0},{"date":"2024-01-05","high":192.0,"low":189.5},{"date":"2024-01-08","high":193.2,"low":190.0},{"date":"2024-01-09","high":194.5,"low":191.5},{"date":"2024-01-10","high":195.0,"low":192.0},{"date":"2024-01-11","high":196.5,"low":193.0},{"date":"2024-01-12","high":197.0,"low":194.5},{"date":"2024-01-15","high":198.5,"low":195.0},{"date":"2024-01-16","high":199.0,"low":196.5},{"date":"2024-01-17","high":200.2,"low":197.0},{"date":"2024-01-18","high":201.0,"low":198.0},{"date":"2024-01-19","high":202.5,"low":199.0},{"date":"2024-01-22","high":203.0,"low":200.5},{"date":"2024-01-23","high":204.5,"low":201.0},{"date":"2024-01-24","high":205.0,"low":202.5},{"date":"2024-01-25","high":206.5,"low":203.0},{"date":"2024-01-26","high":207.0,"low":204.0}]'
type: scatter
engine: plot
title: 4.6 High vs Low Price Volatility
width: 700
height: 500
marks:
  - type: dot
    configuration:
      x: low
      y: high
      fill: "#e67e22"
      r: 6
      tip: true
  - type: linearRegressionY
    configuration:
      x: low
      y: high
      stroke: "#34495e"
      strokeWidth: 2
      strokeDasharray: "4,4"
x:
  label: Low Price ($)
y:
  label: High Price ($)
grid: true

4.7 Multi-Mark: Text Annotations - Key Price Levels ​

Stock chart with text annotations marking significant price levels.

View Source
data:
  source: '[{"date":"2024-01-01","close":186.8},{"date":"2024-01-02","close":188.5},{"date":"2024-01-03","close":189.2},{"date":"2024-01-04","close":190.8},{"date":"2024-01-05","close":191.5},{"date":"2024-01-08","close":192.8},{"date":"2024-01-09","close":193.5},{"date":"2024-01-10","close":194.2},{"date":"2024-01-11","close":195.8},{"date":"2024-01-12","close":196.2},{"date":"2024-01-15","close":197.8},{"date":"2024-01-16","close":198.5},{"date":"2024-01-17","close":199.2},{"date":"2024-01-18","close":200.5},{"date":"2024-01-19","close":201.8},{"date":"2024-01-22","close":202.2},{"date":"2024-01-23","close":203.8},{"date":"2024-01-24","close":204.2},{"date":"2024-01-25","close":205.5},{"date":"2024-01-26","close":206.2}]'
type: line
engine: plot
title: 4.7 Price Chart with Key Levels
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: close
      stroke: "#2ecc71"
      strokeWidth: 2.5
      tip: true
  - type: ruleY
    configuration:
      y: 190
      stroke: "#e74c3c"
      strokeWidth: 1.5
      strokeDasharray: "5,5"
  - type: ruleY
    configuration:
      y: 200
      stroke: "#3498db"
      strokeWidth: 1.5
      strokeDasharray: "5,5"
  - type: text
    configuration:
      x: "2024-01-26"
      y: 190
      text: "Support $190"
      dx: -80
      dy: 15
      fill: "#e74c3c"
      fontSize: 12
  - type: text
    configuration:
      x: "2024-01-26"
      y: 200
      text: "Resistance $200"
      dx: -80
      dy: -5
      fill: "#3498db"
      fontSize: 12
x:
  label: Date
y:
  label: Price ($)
grid: true

5.0 E-commerce Data Examples ​

15 transaction records with order_id, customer_id, product, quantity, price, and date columns. Ideal for sales analysis and product performance visualization.

5.1 Bar Chart - Revenue by Product ​

Vertical bar chart showing total revenue for each product type.

View Source
data:
  source: '[{"order_id":1,"customer_id":101,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-01"},{"order_id":2,"customer_id":102,"product":"Mouse","quantity":5,"price":29.99,"date":"2024-01-01"},{"order_id":3,"customer_id":103,"product":"Keyboard","quantity":3,"price":79.99,"date":"2024-01-02"},{"order_id":4,"customer_id":104,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-02"},{"order_id":5,"customer_id":105,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-03"},{"order_id":6,"customer_id":106,"product":"Headphones","quantity":4,"price":149.99,"date":"2024-01-03"},{"order_id":7,"customer_id":107,"product":"Mouse","quantity":10,"price":29.99,"date":"2024-01-04"},{"order_id":8,"customer_id":108,"product":"Keyboard","quantity":2,"price":79.99,"date":"2024-01-04"},{"order_id":9,"customer_id":109,"product":"Monitor","quantity":2,"price":349.99,"date":"2024-01-05"},{"order_id":10,"customer_id":110,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-05"},{"order_id":11,"customer_id":111,"product":"Headphones","quantity":2,"price":149.99,"date":"2024-01-06"},{"order_id":12,"customer_id":112,"product":"Mouse","quantity":8,"price":29.99,"date":"2024-01-06"},{"order_id":13,"customer_id":113,"product":"Keyboard","quantity":4,"price":79.99,"date":"2024-01-07"},{"order_id":14,"customer_id":114,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-07"},{"order_id":15,"customer_id":115,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-08"}]'
type: bar
engine: plot
title: 5.1 Revenue by Product
width: 700
height: 500
transformations:
  - type: derive
    configuration:
      columns:
        revenue: "quantity * price"
  - type: aggregate
    configuration:
      groupBy: [product]
      sum: [revenue]
marks:
  - type: barY
    configuration:
      x: product
      y: revenue_sum
      fill: "#3498db"
      tip: true
x:
  label: Product
  tickRotate: -45
y:
  label: Total Revenue ($)
grid: true

5.2 Horizontal Bar Chart - Top Products ​

Horizontal bars sorted by revenue for easy comparison.

View Source
data:
  source: '[{"order_id":1,"customer_id":101,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-01"},{"order_id":2,"customer_id":102,"product":"Mouse","quantity":5,"price":29.99,"date":"2024-01-01"},{"order_id":3,"customer_id":103,"product":"Keyboard","quantity":3,"price":79.99,"date":"2024-01-02"},{"order_id":4,"customer_id":104,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-02"},{"order_id":5,"customer_id":105,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-03"},{"order_id":6,"customer_id":106,"product":"Headphones","quantity":4,"price":149.99,"date":"2024-01-03"},{"order_id":7,"customer_id":107,"product":"Mouse","quantity":10,"price":29.99,"date":"2024-01-04"},{"order_id":8,"customer_id":108,"product":"Keyboard","quantity":2,"price":79.99,"date":"2024-01-04"},{"order_id":9,"customer_id":109,"product":"Monitor","quantity":2,"price":349.99,"date":"2024-01-05"},{"order_id":10,"customer_id":110,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-05"},{"order_id":11,"customer_id":111,"product":"Headphones","quantity":2,"price":149.99,"date":"2024-01-06"},{"order_id":12,"customer_id":112,"product":"Mouse","quantity":8,"price":29.99,"date":"2024-01-06"},{"order_id":13,"customer_id":113,"product":"Keyboard","quantity":4,"price":79.99,"date":"2024-01-07"},{"order_id":14,"customer_id":114,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-07"},{"order_id":15,"customer_id":115,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-08"}]'
type: bar
engine: plot
title: 5.2 Top Products by Revenue (Horizontal)
width: 700
height: 500
transformations:
  - type: derive
    configuration:
      columns:
        revenue: "quantity * price"
  - type: aggregate
    configuration:
      groupBy: [product]
      sum: [revenue]
  - type: sort
    configuration:
      by:
        - column: revenue_sum
          direction: desc
marks:
  - type: barX
    configuration:
      y: product
      x: revenue_sum
      fill: "#e74c3c"
      tip: true
x:
  label: Total Revenue ($)
y:
  label: Product
grid: true

5.3 Scatter Plot - Price vs Quantity ​

Exploring relationship between product price and order quantity.

View Source
data:
  source: '[{"order_id":1,"customer_id":101,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-01"},{"order_id":2,"customer_id":102,"product":"Mouse","quantity":5,"price":29.99,"date":"2024-01-01"},{"order_id":3,"customer_id":103,"product":"Keyboard","quantity":3,"price":79.99,"date":"2024-01-02"},{"order_id":4,"customer_id":104,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-02"},{"order_id":5,"customer_id":105,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-03"},{"order_id":6,"customer_id":106,"product":"Headphones","quantity":4,"price":149.99,"date":"2024-01-03"},{"order_id":7,"customer_id":107,"product":"Mouse","quantity":10,"price":29.99,"date":"2024-01-04"},{"order_id":8,"customer_id":108,"product":"Keyboard","quantity":2,"price":79.99,"date":"2024-01-04"},{"order_id":9,"customer_id":109,"product":"Monitor","quantity":2,"price":349.99,"date":"2024-01-05"},{"order_id":10,"customer_id":110,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-05"},{"order_id":11,"customer_id":111,"product":"Headphones","quantity":2,"price":149.99,"date":"2024-01-06"},{"order_id":12,"customer_id":112,"product":"Mouse","quantity":8,"price":29.99,"date":"2024-01-06"},{"order_id":13,"customer_id":113,"product":"Keyboard","quantity":4,"price":79.99,"date":"2024-01-07"},{"order_id":14,"customer_id":114,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-07"},{"order_id":15,"customer_id":115,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-08"}]'
type: scatter
engine: plot
title: 5.3 Price vs Quantity Relationship
width: 1000
height: 500
margin:
  left: 100
marks:
  - type: dot
    configuration:
      x: price
      y: quantity
      fill: "#9b59b6"
      r: 7
      tip: true
x:
  label: Price ($)
y:
  label: Quantity Ordered
grid: true

5.4 Line Chart - Daily Orders ​

Time series showing order count progression.

View Source
data:
  source: '[{"date":"2024-01-01","order_id_count":2},{"date":"2024-01-02","order_id_count":2},{"date":"2024-01-03","order_id_count":2},{"date":"2024-01-04","order_id_count":2},{"date":"2024-01-05","order_id_count":2},{"date":"2024-01-06","order_id_count":2},{"date":"2024-01-07","order_id_count":2},{"date":"2024-01-08","order_id_count":1}]'
type: line
engine: plot
title: 5.4 Daily Order Count
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: order_id_count
      stroke: "#1abc9c"
      strokeWidth: 3
      tip: true
  - type: dot
    configuration:
      x: date
      y: order_id_count
      fill: "#16a085"
      r: 4
x:
  label: Date
y:
  label: Number of Orders
grid: true

5.5 Multi-Mark: Bar + Text - Product Revenue with Labels ​

Bar chart with exact revenue values displayed on top.

View Source
data:
  source: '[{"product":"Laptop","revenue_sum":5999.94},{"product":"Monitor","revenue_sum":1399.96},{"product":"Headphones","revenue_sum":899.94},{"product":"Keyboard","revenue_sum":719.91},{"product":"Mouse","revenue_sum":689.77}]'
type: bar
engine: plot
title: 5.5 Product Revenue with Value Labels
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: product
      y: revenue_sum
      fill: "#f39c12"
      tip: true
  - type: text
    configuration:
      x: product
      y: revenue_sum
      text: revenue_sum
      dy: -10
      fontSize: 11
      fill: "#2c3e50"
x:
  label: Product
  tickRotate: -45
y:
  label: Revenue ($)
grid: true

5.6 Area Chart - Cumulative Revenue ​

Showing revenue accumulation over time.

View Source
data:
  source: '[{"date":"2024-01-01","revenue_sum":2149.93},{"date":"2024-01-02","revenue_sum":589.96},{"date":"2024-01-03","revenue_sum":1599.95},{"date":"2024-01-04","revenue_sum":459.88},{"date":"2024-01-05","revenue_sum":1699.97},{"date":"2024-01-06","revenue_sum":539.90},{"date":"2024-01-07","revenue_sum":669.95},{"date":"2024-01-08","revenue_sum":1999.98}]'
type: area
engine: plot
title: 5.6 Cumulative Revenue Over Time
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: revenue_sum
      fill: "#e67e22"
      fillOpacity: 0.4
      tip: true
  - type: line
    configuration:
      x: date
      y: revenue_sum
      stroke: "#d35400"
      strokeWidth: 2.5
x:
  label: Date
y:
  label: Daily Revenue ($)
grid: true

5.7 Multi-Mark: Scatter + Regression - Pricing Analysis ​

Scatter plot with regression line analyzing price-quantity relationship.

View Source
data:
  source: '[{"order_id":1,"customer_id":101,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-01"},{"order_id":2,"customer_id":102,"product":"Mouse","quantity":5,"price":29.99,"date":"2024-01-01"},{"order_id":3,"customer_id":103,"product":"Keyboard","quantity":3,"price":79.99,"date":"2024-01-02"},{"order_id":4,"customer_id":104,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-02"},{"order_id":5,"customer_id":105,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-03"},{"order_id":6,"customer_id":106,"product":"Headphones","quantity":4,"price":149.99,"date":"2024-01-03"},{"order_id":7,"customer_id":107,"product":"Mouse","quantity":10,"price":29.99,"date":"2024-01-04"},{"order_id":8,"customer_id":108,"product":"Keyboard","quantity":2,"price":79.99,"date":"2024-01-04"},{"order_id":9,"customer_id":109,"product":"Monitor","quantity":2,"price":349.99,"date":"2024-01-05"},{"order_id":10,"customer_id":110,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-05"},{"order_id":11,"customer_id":111,"product":"Headphones","quantity":2,"price":149.99,"date":"2024-01-06"},{"order_id":12,"customer_id":112,"product":"Mouse","quantity":8,"price":29.99,"date":"2024-01-06"},{"order_id":13,"customer_id":113,"product":"Keyboard","quantity":4,"price":79.99,"date":"2024-01-07"},{"order_id":14,"customer_id":114,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-07"},{"order_id":15,"customer_id":115,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-08"}]'
type: scatter
engine: plot
title: 5.7 Price-Quantity Correlation Analysis
width: 700
height: 500
marks:
  - type: dot
    configuration:
      x: price
      y: quantity
      fill: "#3498db"
      r: 6
      tip: true
  - type: linearRegressionY
    configuration:
      x: price
      y: quantity
      stroke: "#e74c3c"
      strokeWidth: 2.5
x:
  label: Price ($)
y:
  label: Quantity
grid: true

6.0 Advanced Multi-Mark Compositions ​

This section demonstrates sophisticated multi-mark visualizations that combine three or more mark types for comprehensive data storytelling.

6.1 Triple Mark: Area + Line + Dot - Comprehensive Time Series ​

Using fitness data to create a fully layered time series visualization.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500},{"date":"2024-01-02","steps":12000},{"date":"2024-01-03","steps":6500},{"date":"2024-01-04","steps":15000},{"date":"2024-01-05","steps":9800},{"date":"2024-01-06","steps":11200},{"date":"2024-01-07","steps":7800},{"date":"2024-01-08","steps":13500},{"date":"2024-01-09","steps":10500},{"date":"2024-01-10","steps":14200}]'
type: area
engine: plot
title: 6.1 Comprehensive Time Series (Area + Line + Dot)
width: 700
height: 500
marks:
  - type: areaY
    configuration:
      x: date
      y: steps
      fill: "#3498db"
      fillOpacity: 0.2
  - type: line
    configuration:
      x: date
      y: steps
      stroke: "#2980b9"
      strokeWidth: 2.5
  - type: dot
    configuration:
      x: date
      y: steps
      fill: "#1f618d"
      r: 5
      tip: true
  - type: ruleY
    configuration:
      y: 10900
      stroke: "#e74c3c"
      strokeWidth: 1.5
      strokeDasharray: "5,5"
x:
  label: Date
y:
  label: Daily Steps
grid: true

6.2 Bar + Rule + Text - Fully Annotated Comparison ​

Sales data with bars, average line, and value labels.

View Source
data:
  source: '[{"region":"North","revenue":55500},{"region":"South","revenue":42500},{"region":"East","revenue":64500},{"region":"West","revenue":39500}]'
type: bar
engine: plot
title: 6.2 Annotated Revenue Comparison
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: region
      y: revenue
      fill: "#9b59b6"
      tip: true
  - type: ruleY
    configuration:
      y: 50500
      stroke: "#e74c3c"
      strokeWidth: 2
      strokeDasharray: "5,5"
  - type: text
    configuration:
      x: region
      y: revenue
      text: revenue
      dy: -12
      fontSize: 12
      fill: "#2c3e50"
  - type: text
    configuration:
      x: "North"
      y: 50500
      text: "Average"
      dx: -120
      dy: -8
      fontSize: 11
      fill: "#e74c3c"
x:
  label: Region
y:
  label: Revenue ($)
grid: true

6.3 Line + Area + Rule - Threshold Visualization ​

Weather temperature data with area fill and threshold rules.

View Source
data:
  source: '[{"date":"2024-01-01","temperature":15.2},{"date":"2024-01-02","temperature":16.8},{"date":"2024-01-03","temperature":14.5},{"date":"2024-01-04","temperature":12.3},{"date":"2024-01-05","temperature":13.8},{"date":"2024-01-06","temperature":17.2},{"date":"2024-01-07","temperature":19.5},{"date":"2024-01-08","temperature":21.0},{"date":"2024-01-09","temperature":20.2},{"date":"2024-01-10","temperature":18.5},{"date":"2024-01-11","temperature":16.0},{"date":"2024-01-12","temperature":14.2},{"date":"2024-01-13","temperature":15.8},{"date":"2024-01-14","temperature":18.0}]'
type: area
engine: plot
title: 6.3 Temperature with Comfort Zones
width: 700
height: 500
marks:
  - type: ruleY
    configuration:
      y: 15
      stroke: "#3498db"
      strokeWidth: 1.5
      strokeDasharray: "4,4"
  - type: ruleY
    configuration:
      y: 21
      stroke: "#e74c3c"
      strokeWidth: 1.5
      strokeDasharray: "4,4"
  - type: areaY
    configuration:
      x: date
      y: temperature
      fill: "#f39c12"
      fillOpacity: 0.3
  - type: line
    configuration:
      x: date
      y: temperature
      stroke: "#d35400"
      strokeWidth: 2.5
      tip: true
  - type: dot
    configuration:
      x: date
      y: temperature
      fill: "#ba4a00"
      r: 4
x:
  label: Date
y:
  label: Temperature (C)
grid: true

6.4 Crosshair + Dot - Interactive Exploration ​

Stock price chart with crosshair for interactive value reading.

View Source
data:
  source: '[{"date":"2024-01-01","close":186.8},{"date":"2024-01-02","close":188.5},{"date":"2024-01-03","close":189.2},{"date":"2024-01-04","close":190.8},{"date":"2024-01-05","close":191.5},{"date":"2024-01-08","close":192.8},{"date":"2024-01-09","close":193.5},{"date":"2024-01-10","close":194.2},{"date":"2024-01-11","close":195.8},{"date":"2024-01-12","close":196.2},{"date":"2024-01-15","close":197.8},{"date":"2024-01-16","close":198.5},{"date":"2024-01-17","close":199.2},{"date":"2024-01-18","close":200.5},{"date":"2024-01-19","close":201.8},{"date":"2024-01-22","close":202.2}]'
type: line
engine: plot
title: 6.4 Interactive Price Chart with Crosshair
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: close
      stroke: "#2ecc71"
      strokeWidth: 2.5
  - type: dot
    configuration:
      x: date
      y: close
      fill: "#27ae60"
      r: 4
      tip: true
  - type: crosshair
    configuration:
      x: date
      y: close
x:
  label: Date
y:
  label: Close Price ($)
grid: true

7.0 Advanced Features ​

This section demonstrates advanced Observable Plot capabilities including transformations, custom scales, and faceting.

7.1 Data Transformations - Filter, Aggregate, Sort ​

Complex data pipeline showing multiple transformation steps.

View Source
data:
  source: '[{"order_id":1,"customer_id":101,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-01"},{"order_id":2,"customer_id":102,"product":"Mouse","quantity":5,"price":29.99,"date":"2024-01-01"},{"order_id":3,"customer_id":103,"product":"Keyboard","quantity":3,"price":79.99,"date":"2024-01-02"},{"order_id":4,"customer_id":104,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-02"},{"order_id":5,"customer_id":105,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-03"},{"order_id":6,"customer_id":106,"product":"Headphones","quantity":4,"price":149.99,"date":"2024-01-03"},{"order_id":7,"customer_id":107,"product":"Mouse","quantity":10,"price":29.99,"date":"2024-01-04"},{"order_id":8,"customer_id":108,"product":"Keyboard","quantity":2,"price":79.99,"date":"2024-01-04"},{"order_id":9,"customer_id":109,"product":"Monitor","quantity":2,"price":349.99,"date":"2024-01-05"},{"order_id":10,"customer_id":110,"product":"Laptop","quantity":1,"price":999.99,"date":"2024-01-05"},{"order_id":11,"customer_id":111,"product":"Headphones","quantity":2,"price":149.99,"date":"2024-01-06"},{"order_id":12,"customer_id":112,"product":"Mouse","quantity":8,"price":29.99,"date":"2024-01-06"},{"order_id":13,"customer_id":113,"product":"Keyboard","quantity":4,"price":79.99,"date":"2024-01-07"},{"order_id":14,"customer_id":114,"product":"Monitor","quantity":1,"price":349.99,"date":"2024-01-07"},{"order_id":15,"customer_id":115,"product":"Laptop","quantity":2,"price":999.99,"date":"2024-01-08"}]'
type: bar
engine: plot
title: Top 5 Products by Revenue (Transformed)
width: 700
height: 500
transformations:
  - type: derive
    configuration:
      columns:
        revenue: "quantity * price"
  - type: aggregate
    configuration:
      groupBy: [product]
      sum: [revenue]
  - type: sort
    configuration:
      by:
        - column: revenue_sum
          direction: desc
  - type: limit
    configuration:
      count: 5
marks:
  - type: barY
    configuration:
      x: product
      y: revenue_sum
      fill: "#16a085"
      tip: true
  - type: text
    configuration:
      x: product
      y: revenue_sum
      text: revenue_sum
      dy: -10
      fontSize: 12
x:
  label: Product
  tickRotate: -30
y:
  label: Total Revenue ($)
grid: true

7.2 Custom Scales - Logarithmic and Custom Domains ​

Stock volume chart using custom y-axis scale.

View Source
data:
  source: '[{"date":"2024-01-01","volume":45000000},{"date":"2024-01-02","volume":52000000},{"date":"2024-01-03","volume":48000000},{"date":"2024-01-04","volume":55000000},{"date":"2024-01-05","volume":42000000},{"date":"2024-01-08","volume":58000000},{"date":"2024-01-09","volume":62000000},{"date":"2024-01-10","volume":51000000},{"date":"2024-01-11","volume":68000000},{"date":"2024-01-12","volume":54000000},{"date":"2024-01-15","volume":72000000},{"date":"2024-01-16","volume":65000000},{"date":"2024-01-17","volume":78000000},{"date":"2024-01-18","volume":85000000},{"date":"2024-01-19","volume":72000000},{"date":"2024-01-22","volume":68000000},{"date":"2024-01-23","volume":75000000},{"date":"2024-01-24","volume":62000000},{"date":"2024-01-25","volume":82000000},{"date":"2024-01-26","volume":70000000}]'
type: bar
engine: plot
title: 7.2 Trading Volume with Custom Scale
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: date
      y: volume
      fill: "#3498db"
      tip: true
x:
  label: Date
  tickRotate: -45
y:
  label: Volume
  type: log
grid: true

7.3 Color Schemes - Custom Palettes ​

Sales data with custom color scheme for regions.

View Source
data:
  source: '[{"region":"North","revenue":55500},{"region":"South","revenue":42500},{"region":"East","revenue":64500},{"region":"West","revenue":39500}]'
engine: plot
title: Revenue by Region (Custom Colors)
width: 700
height: 500
marks:
  - type: barY
    configuration:
      x: region
      y: revenue
      fill: region
      tip: true
x:
  label: Region
y:
  label: Revenue ($)
color:
  scheme: category10
  legend: true
grid: true

7.4 Faceting - Small Multiples ​

Fitness metrics displayed as small multiples by metric type.

View Source
data:
  source: '[{"date":"2024-01-01","steps":8500},{"date":"2024-01-02","steps":12000},{"date":"2024-01-03","steps":6500},{"date":"2024-01-04","steps":15000},{"date":"2024-01-05","steps":9800},{"date":"2024-01-06","steps":11200},{"date":"2024-01-07","steps":7800},{"date":"2024-01-08","steps":13500},{"date":"2024-01-09","steps":10500},{"date":"2024-01-10","steps":14200}]'
type: line
engine: plot
title: 7.4 Fitness Metrics - Small Multiples
width: 700
height: 500
marks:
  - type: line
    configuration:
      x: date
      y: steps
      stroke: "#3498db"
      strokeWidth: 2
      tip: true
  - type: dot
    configuration:
      x: date
      y: steps
      fill: "#2980b9"
      r: 3
x:
  label: Date
y:
  label: Steps
grid: true

Summary and Best Practices ​

When to Use Each Chart Type ​

1.0 Bar Charts: Comparing categorical values (regions, products, categories) 2.0 Line Charts: Showing trends over time or continuous relationships 3.0 Scatter Plots: Exploring correlations between two variables 4.0 Area Charts: Emphasizing magnitude or cumulative totals

Multi-Mark Best Practices ​

1.0 Layer Order Matters: Place fills before lines, lines before dots 2.0 Limit Visual Complexity: Use 2-4 marks maximum per chart 3.0 Color Coordination: Ensure marks use harmonious color schemes 4.0 Purpose-Driven: Each mark should add meaningful information

Inline Data Tips ​

1.0 Keep Data Compact: Use abbreviated column names when possible 2.0 Pre-Aggregate: For summaries, include pre-computed values 3.0 Type Consistency: Ensure dates and numbers are properly formatted 4.0 Escaping: Properly escape quotes in JSON strings

Common Pitfalls ​

1.0 Column Names: Verify exact column names match data schema 2.0 Data Types: Be aware of date/datetime differences 3.0 Aggregations: Use transformations for grouping/summarizing 4.0 Scale Mismatches: Normalize different units when combining metrics

Additional Resources ​

  • Plugin Documentation: See WARP.md for complete feature reference
  • Observable Plot: https://observablehq.com/plot/
  • Example Data: Sample datasets available in examples/data/

Generated examples use inline JSON data matching the original parquet file schemas. All column names and data ranges are accurate to the source structure.

Released under the MIT License. Built by Boundary Lab.

Copyright © 2024-2025 DataGlass