D3 Chart Framework Examples

This document showcases all 31 D3 chart types available in the DataGlass D3 framework with realistic sample data.

Hierarchy Charts

Treemap

Software package dependencies (inspired by D3's Flare dataset):

View Source

type: treemap
engine: d3
data:
  source: |
    [
      {"name": "flare", "parent": null, "value": 0},
      {"name": "analytics", "parent": "flare", "value": 0},
      {"name": "animate", "parent": "flare", "value": 0},
      {"name": "data", "parent": "flare", "value": 0},
      {"name": "display", "parent": "flare", "value": 0},
      {"name": "cluster", "parent": "analytics", "value": 4200},
      {"name": "graph", "parent": "analytics", "value": 3800},
      {"name": "optimization", "parent": "analytics", "value": 2100},
      {"name": "Easing", "parent": "animate", "value": 2400},
      {"name": "FunctionSequence", "parent": "animate", "value": 1800},
      {"name": "Tween", "parent": "animate", "value": 3100},
      {"name": "Converters", "parent": "data", "value": 2800},
      {"name": "DataField", "parent": "data", "value": 1600},
      {"name": "DataSchema", "parent": "data", "value": 2900},
      {"name": "DataSet", "parent": "data", "value": 3400},
      {"name": "DirtySprite", "parent": "display", "value": 2200},
      {"name": "LineSprite", "parent": "display", "value": 1900},
      {"name": "TextSprite", "parent": "display", "value": 2600}
    ]
hierarchy:
  id: name
  parent: parent
  value: value
width: 800
height: 500
maxWidth: 1200
title: "Software Package Dependencies"
colorScheme: blab
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "as hierarchy"

Sunburst

Disk space usage by folder:

View Source

type: sunburst
engine: d3
data:
  source: |
    [
      {"name": "root", "parent": null, "value": 0},
      {"name": "Documents", "parent": "root", "value": 0},
      {"name": "Projects", "parent": "root", "value": 0},
      {"name": "Media", "parent": "root", "value": 0},
      {"name": "Work", "parent": "Documents", "value": 2500},
      {"name": "Personal", "parent": "Documents", "value": 1800},
      {"name": "Archives", "parent": "Documents", "value": 3200},
      {"name": "WebApp", "parent": "Projects", "value": 4500},
      {"name": "MobileApp", "parent": "Projects", "value": 3800},
      {"name": "DataScience", "parent": "Projects", "value": 5200},
      {"name": "Photos", "parent": "Media", "value": 8500},
      {"name": "Videos", "parent": "Media", "value": 12000},
      {"name": "Music", "parent": "Media", "value": 4200}
    ]
hierarchy:
  id: name
  parent: parent
  value: value
width: 550
height: 550
title: "Disk Space Usage (MB)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Circle Packing

Research paper citations by field:

View Source

type: circle-packing
engine: d3
data:
  source: |
    [
      {"name": "Science", "parent": null, "value": 0},
      {"name": "Physics", "parent": "Science", "value": 0},
      {"name": "Biology", "parent": "Science", "value": 0},
      {"name": "Chemistry", "parent": "Science", "value": 0},
      {"name": "Computer Science", "parent": "Science", "value": 0},
      {"name": "Quantum Mechanics", "parent": "Physics", "value": 4500},
      {"name": "Relativity", "parent": "Physics", "value": 3200},
      {"name": "Thermodynamics", "parent": "Physics", "value": 2800},
      {"name": "Genetics", "parent": "Biology", "value": 5100},
      {"name": "Neuroscience", "parent": "Biology", "value": 4800},
      {"name": "Ecology", "parent": "Biology", "value": 2900},
      {"name": "Organic", "parent": "Chemistry", "value": 3600},
      {"name": "Inorganic", "parent": "Chemistry", "value": 2400},
      {"name": "Machine Learning", "parent": "Computer Science", "value": 7200},
      {"name": "Algorithms", "parent": "Computer Science", "value": 4100},
      {"name": "Networks", "parent": "Computer Science", "value": 3500}
    ]
hierarchy:
  id: name
  parent: parent
  value: value
width: 600
height: 600
title: "Research Citations by Field"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Dendrogram

Company organization structure:

View Source

type: dendrogram
engine: d3
data:
  source: |
    [
      {"name": "CEO", "parent": null},
      {"name": "CTO", "parent": "CEO"},
      {"name": "CFO", "parent": "CEO"},
      {"name": "COO", "parent": "CEO"},
      {"name": "VP Engineering", "parent": "CTO"},
      {"name": "VP Product", "parent": "CTO"},
      {"name": "VP Data", "parent": "CTO"},
      {"name": "Controller", "parent": "CFO"},
      {"name": "Treasurer", "parent": "CFO"},
      {"name": "VP Operations", "parent": "COO"},
      {"name": "VP HR", "parent": "COO"},
      {"name": "Frontend Team", "parent": "VP Engineering"},
      {"name": "Backend Team", "parent": "VP Engineering"},
      {"name": "DevOps Team", "parent": "VP Engineering"},
      {"name": "Design Team", "parent": "VP Product"},
      {"name": "Research Team", "parent": "VP Product"},
      {"name": "Analytics Team", "parent": "VP Data"},
      {"name": "ML Team", "parent": "VP Data"}
    ]
hierarchy:
  id: name
  parent: parent
orientation: horizontal
width: 800
height: 500
title: "Organization Chart"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Icicle (Partition)

File system structure with sizes:

View Source

type: icicle
engine: d3
data:
  source: |
    [
      {"name": "/", "parent": null, "value": 0},
      {"name": "usr", "parent": "/", "value": 0},
      {"name": "var", "parent": "/", "value": 0},
      {"name": "home", "parent": "/", "value": 0},
      {"name": "bin", "parent": "usr", "value": 2400},
      {"name": "lib", "parent": "usr", "value": 8500},
      {"name": "share", "parent": "usr", "value": 4200},
      {"name": "local", "parent": "usr", "value": 3100},
      {"name": "log", "parent": "var", "value": 5600},
      {"name": "cache", "parent": "var", "value": 3800},
      {"name": "tmp", "parent": "var", "value": 1200},
      {"name": "user1", "parent": "home", "value": 15000},
      {"name": "user2", "parent": "home", "value": 8500},
      {"name": "shared", "parent": "home", "value": 4200}
    ]
hierarchy:
  id: name
  parent: parent
  value: value
width: 700
height: 450
title: "File System Usage (MB)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Tidy Tree

Biological taxonomy:

View Source

type: tidy-tree
engine: d3
data:
  source: |
    [
      {"name": "Animalia", "parent": null},
      {"name": "Chordata", "parent": "Animalia"},
      {"name": "Arthropoda", "parent": "Animalia"},
      {"name": "Mammalia", "parent": "Chordata"},
      {"name": "Aves", "parent": "Chordata"},
      {"name": "Reptilia", "parent": "Chordata"},
      {"name": "Insecta", "parent": "Arthropoda"},
      {"name": "Arachnida", "parent": "Arthropoda"},
      {"name": "Primates", "parent": "Mammalia"},
      {"name": "Carnivora", "parent": "Mammalia"},
      {"name": "Rodentia", "parent": "Mammalia"},
      {"name": "Passeriformes", "parent": "Aves"},
      {"name": "Accipitriformes", "parent": "Aves"},
      {"name": "Squamata", "parent": "Reptilia"},
      {"name": "Coleoptera", "parent": "Insecta"},
      {"name": "Lepidoptera", "parent": "Insecta"},
      {"name": "Diptera", "parent": "Insecta"}
    ]
hierarchy:
  id: name
  parent: parent
orientation: horizontal
width: 750
height: 500
title: "Animal Taxonomy"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Network Charts

Force-Directed Graph

Social network (inspired by Les Miserables character network):

View Source

type: force-directed
engine: d3
data:
  source: |
    [
      {"source": "Valjean", "target": "Myriel", "value": 5},
      {"source": "Valjean", "target": "Fantine", "value": 8},
      {"source": "Valjean", "target": "Cosette", "value": 10},
      {"source": "Valjean", "target": "Javert", "value": 7},
      {"source": "Valjean", "target": "Marius", "value": 6},
      {"source": "Fantine", "target": "Tholomyes", "value": 3},
      {"source": "Fantine", "target": "Cosette", "value": 4},
      {"source": "Cosette", "target": "Marius", "value": 9},
      {"source": "Marius", "target": "Eponine", "value": 5},
      {"source": "Marius", "target": "Enjolras", "value": 7},
      {"source": "Enjolras", "target": "Combeferre", "value": 6},
      {"source": "Enjolras", "target": "Courfeyrac", "value": 6},
      {"source": "Enjolras", "target": "Gavroche", "value": 4},
      {"source": "Gavroche", "target": "Eponine", "value": 5},
      {"source": "Javert", "target": "Fantine", "value": 2},
      {"source": "Thenardier", "target": "Eponine", "value": 4},
      {"source": "Thenardier", "target": "Gavroche", "value": 3},
      {"source": "Thenardier", "target": "Valjean", "value": 4}
    ]
network:
  source: source
  target: target
  value: value
width: 650
height: 500
title: "Les Miserables Character Network"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Arc Diagram

Software module dependencies:

View Source

type: arc-diagram
engine: d3
data:
  source: |
    [
      {"source": "main", "target": "config", "value": 3},
      {"source": "main", "target": "utils", "value": 5},
      {"source": "main", "target": "api", "value": 4},
      {"source": "api", "target": "auth", "value": 6},
      {"source": "api", "target": "db", "value": 7},
      {"source": "api", "target": "utils", "value": 3},
      {"source": "auth", "target": "crypto", "value": 4},
      {"source": "auth", "target": "db", "value": 5},
      {"source": "db", "target": "config", "value": 2},
      {"source": "db", "target": "utils", "value": 3},
      {"source": "utils", "target": "config", "value": 2},
      {"source": "crypto", "target": "utils", "value": 1}
    ]
network:
  source: source
  target: target
  value: value
width: 700
height: 350
title: "Module Dependencies"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Sankey Diagram

Energy flow (inspired by D3's energy Sankey):

View Source

type: sankey
engine: d3
data:
  source: |
    [
      {"source": "Coal", "target": "Electricity", "value": 250},
      {"source": "Natural Gas", "target": "Electricity", "value": 180},
      {"source": "Nuclear", "target": "Electricity", "value": 120},
      {"source": "Solar", "target": "Electricity", "value": 45},
      {"source": "Wind", "target": "Electricity", "value": 65},
      {"source": "Hydro", "target": "Electricity", "value": 55},
      {"source": "Electricity", "target": "Residential", "value": 280},
      {"source": "Electricity", "target": "Commercial", "value": 220},
      {"source": "Electricity", "target": "Industrial", "value": 180},
      {"source": "Natural Gas", "target": "Residential", "value": 90},
      {"source": "Natural Gas", "target": "Commercial", "value": 60},
      {"source": "Petroleum", "target": "Transportation", "value": 350},
      {"source": "Electricity", "target": "Transportation", "value": 35}
    ]
network:
  source: source
  target: target
  value: value
width: 800
height: 500
title: "US Energy Flow (TWh)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Edge Bundling

Software package imports:

View Source

type: edge-bundling
engine: d3
data:
  source: |
    [
      {"name": "react", "group": "frontend", "imports": ["react-dom", "prop-types"]},
      {"name": "react-dom", "group": "frontend", "imports": ["react"]},
      {"name": "prop-types", "group": "frontend", "imports": []},
      {"name": "redux", "group": "state", "imports": ["react-redux"]},
      {"name": "react-redux", "group": "state", "imports": ["react", "redux"]},
      {"name": "axios", "group": "network", "imports": []},
      {"name": "express", "group": "backend", "imports": ["body-parser", "cors"]},
      {"name": "body-parser", "group": "backend", "imports": []},
      {"name": "cors", "group": "backend", "imports": []},
      {"name": "mongoose", "group": "database", "imports": []},
      {"name": "sequelize", "group": "database", "imports": []}
    ]
hierarchy:
  id: name
  parent: group
width: 550
height: 550
title: "NPM Package Dependencies"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Parallel Sets

Titanic survival data:

View Source

type: parallel-sets
engine: d3
data:
  source: |
    [
      {"survived": "Yes", "sex": "Female", "class": "First", "count": 141},
      {"survived": "Yes", "sex": "Female", "class": "Second", "count": 93},
      {"survived": "Yes", "sex": "Female", "class": "Third", "count": 90},
      {"survived": "No", "sex": "Female", "class": "First", "count": 4},
      {"survived": "No", "sex": "Female", "class": "Second", "count": 13},
      {"survived": "No", "sex": "Female", "class": "Third", "count": 106},
      {"survived": "Yes", "sex": "Male", "class": "First", "count": 62},
      {"survived": "Yes", "sex": "Male", "class": "Second", "count": 25},
      {"survived": "Yes", "sex": "Male", "class": "Third", "count": 88},
      {"survived": "No", "sex": "Male", "class": "First", "count": 118},
      {"survived": "No", "sex": "Male", "class": "Second", "count": 154},
      {"survived": "No", "sex": "Male", "class": "Third", "count": 422}
    ]
dimensions:
  - class
  - sex
  - survived
width: 700
height: 450
title: "Titanic Survival by Class and Gender"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
colorScheme: blab

Chord Diagram

Global trade flows:

View Source

type: chord
engine: d3
data:
  source: |
    [
      {"source": "USA", "target": "China", "value": 120},
      {"source": "USA", "target": "EU", "value": 280},
      {"source": "USA", "target": "Japan", "value": 75},
      {"source": "USA", "target": "Mexico", "value": 265},
      {"source": "China", "target": "USA", "value": 450},
      {"source": "China", "target": "EU", "value": 385},
      {"source": "China", "target": "Japan", "value": 145},
      {"source": "EU", "target": "USA", "value": 320},
      {"source": "EU", "target": "China", "value": 195},
      {"source": "EU", "target": "Japan", "value": 65},
      {"source": "Japan", "target": "USA", "value": 135},
      {"source": "Japan", "target": "China", "value": 160},
      {"source": "Mexico", "target": "USA", "value": 325}
    ]
network:
  source: source
  target: target
  value: value
width: 550
height: 550
title: "Global Trade Flows ($B)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
colorScheme: blab

Directed Chord

Migration flows between regions:

View Source

type: directed-chord
engine: d3
data:
  source: |
    [
      {"from": "Asia", "to": "North America", "value": 850},
      {"from": "Asia", "to": "Europe", "value": 420},
      {"from": "Asia", "to": "Oceania", "value": 280},
      {"from": "Europe", "to": "North America", "value": 380},
      {"from": "Europe", "to": "Asia", "value": 150},
      {"from": "Europe", "to": "Oceania", "value": 120},
      {"from": "Latin America", "to": "North America", "value": 720},
      {"from": "Latin America", "to": "Europe", "value": 250},
      {"from": "Africa", "to": "Europe", "value": 340},
      {"from": "Africa", "to": "North America", "value": 180},
      {"from": "North America", "to": "Europe", "value": 220},
      {"from": "North America", "to": "Asia", "value": 95}
    ]
network:
  source: from
  target: to
  value: value
width: 550
height: 550
title: "International Migration Flows (thousands)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Analysis Charts

Boxplot

Employee salary distribution by department:

View Source

type: boxplot
engine: d3
data:
  source: |
    [
      {"department": "Engineering", "salary": 95000},
      {"department": "Engineering", "salary": 105000},
      {"department": "Engineering", "salary": 88000},
      {"department": "Engineering", "salary": 125000},
      {"department": "Engineering", "salary": 115000},
      {"department": "Engineering", "salary": 92000},
      {"department": "Engineering", "salary": 135000},
      {"department": "Engineering", "salary": 78000},
      {"department": "Sales", "salary": 72000},
      {"department": "Sales", "salary": 85000},
      {"department": "Sales", "salary": 95000},
      {"department": "Sales", "salary": 68000},
      {"department": "Sales", "salary": 78000},
      {"department": "Sales", "salary": 110000},
      {"department": "Sales", "salary": 62000},
      {"department": "Marketing", "salary": 65000},
      {"department": "Marketing", "salary": 75000},
      {"department": "Marketing", "salary": 82000},
      {"department": "Marketing", "salary": 70000},
      {"department": "Marketing", "salary": 88000},
      {"department": "Marketing", "salary": 58000},
      {"department": "HR", "salary": 55000},
      {"department": "HR", "salary": 62000},
      {"department": "HR", "salary": 68000},
      {"department": "HR", "salary": 58000},
      {"department": "HR", "salary": 72000}
    ]
x: department
y: salary
width: 800
height: 400
title: "Salary Distribution by Department"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Histogram

Age distribution of customers:

View Source

type: histogram
engine: d3
data:
  source: |
    [
      {"age": 18}, {"age": 22}, {"age": 25}, {"age": 28}, {"age": 31},
      {"age": 23}, {"age": 27}, {"age": 29}, {"age": 32}, {"age": 35},
      {"age": 24}, {"age": 26}, {"age": 30}, {"age": 33}, {"age": 36},
      {"age": 38}, {"age": 41}, {"age": 44}, {"age": 47}, {"age": 50},
      {"age": 39}, {"age": 42}, {"age": 45}, {"age": 48}, {"age": 52},
      {"age": 40}, {"age": 43}, {"age": 46}, {"age": 49}, {"age": 55},
      {"age": 58}, {"age": 61}, {"age": 64}, {"age": 67}, {"age": 70},
      {"age": 35}, {"age": 37}, {"age": 34}, {"age": 36}, {"age": 38},
      {"age": 28}, {"age": 30}, {"age": 32}, {"age": 29}, {"age": 31},
      {"age": 45}, {"age": 48}, {"age": 51}, {"age": 54}, {"age": 57}
    ]
x: age
bins: 12
width: 600
height: 400
title: "Customer Age Distribution"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Ridgeline (Joy Plot)

Temperature distribution by month:

View Source

type: ridgeline
engine: d3
data:
  source: |
    [
      {"month": "January", "temp": 32}, {"month": "January", "temp": 28},
      {"month": "January", "temp": 35}, {"month": "January", "temp": 30},
      {"month": "January", "temp": 25}, {"month": "January", "temp": 33},
      {"month": "April", "temp": 55}, {"month": "April", "temp": 58},
      {"month": "April", "temp": 52}, {"month": "April", "temp": 60},
      {"month": "April", "temp": 48}, {"month": "April", "temp": 56},
      {"month": "July", "temp": 85}, {"month": "July", "temp": 88},
      {"month": "July", "temp": 82}, {"month": "July", "temp": 90},
      {"month": "July", "temp": 78}, {"month": "July", "temp": 86},
      {"month": "October", "temp": 58}, {"month": "October", "temp": 55},
      {"month": "October", "temp": 62}, {"month": "October", "temp": 50},
      {"month": "October", "temp": 65}, {"month": "October", "temp": 52}
    ]
x: temp
group: month
width: 650
height: 450
title: "Temperature Distribution by Month (F)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Contour (Density)

Earthquake locations (latitude/longitude clustering):

View Source

type: contour
engine: d3
data:
  source: |
    [
      {"x": 35.5, "y": 139.8}, {"x": 35.7, "y": 139.6}, {"x": 35.4, "y": 139.9},
      {"x": 35.8, "y": 139.5}, {"x": 35.6, "y": 139.7}, {"x": 35.3, "y": 140.0},
      {"x": 34.0, "y": 135.5}, {"x": 34.2, "y": 135.3}, {"x": 34.1, "y": 135.6},
      {"x": 34.3, "y": 135.4}, {"x": 33.9, "y": 135.7}, {"x": 34.4, "y": 135.2},
      {"x": 37.5, "y": 122.4}, {"x": 37.7, "y": 122.2}, {"x": 37.4, "y": 122.5},
      {"x": 37.8, "y": 122.1}, {"x": 37.6, "y": 122.3}, {"x": 37.3, "y": 122.6},
      {"x": 19.4, "y": 155.3}, {"x": 19.6, "y": 155.1}, {"x": 19.3, "y": 155.4},
      {"x": 19.7, "y": 155.0}, {"x": 19.5, "y": 155.2}, {"x": 19.2, "y": 155.5}
    ]
x: x
y: y
thresholds: 15
width: 600
height: 450
title: "Seismic Activity Density"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Violin

Response time distribution by server:

View Source

type: violin
engine: d3
data:
  source: |
    [
      {"server": "US-East", "latency": 45}, {"server": "US-East", "latency": 52},
      {"server": "US-East", "latency": 38}, {"server": "US-East", "latency": 65},
      {"server": "US-East", "latency": 48}, {"server": "US-East", "latency": 55},
      {"server": "US-East", "latency": 42}, {"server": "US-East", "latency": 58},
      {"server": "US-West", "latency": 35}, {"server": "US-West", "latency": 42},
      {"server": "US-West", "latency": 28}, {"server": "US-West", "latency": 48},
      {"server": "US-West", "latency": 38}, {"server": "US-West", "latency": 45},
      {"server": "US-West", "latency": 32}, {"server": "US-West", "latency": 50},
      {"server": "EU-West", "latency": 85}, {"server": "EU-West", "latency": 92},
      {"server": "EU-West", "latency": 78}, {"server": "EU-West", "latency": 105},
      {"server": "EU-West", "latency": 88}, {"server": "EU-West", "latency": 95},
      {"server": "EU-West", "latency": 82}, {"server": "EU-West", "latency": 98},
      {"server": "Asia", "latency": 125}, {"server": "Asia", "latency": 138},
      {"server": "Asia", "latency": 115}, {"server": "Asia", "latency": 145},
      {"server": "Asia", "latency": 128}, {"server": "Asia", "latency": 135},
      {"server": "Asia", "latency": 120}, {"server": "Asia", "latency": 142}
    ]
x: server
y: latency
width: 600
height: 400
title: "API Latency by Region (ms)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Bollinger Bands

Stock price with volatility bands:

View Source

type: bollinger
engine: d3
data:
  source: |
    [
      {"date": "2024-01-02", "price": 185.2},
      {"date": "2024-01-03", "price": 184.5},
      {"date": "2024-01-04", "price": 182.8},
      {"date": "2024-01-05", "price": 181.2},
      {"date": "2024-01-08", "price": 183.5},
      {"date": "2024-01-09", "price": 185.8},
      {"date": "2024-01-10", "price": 186.2},
      {"date": "2024-01-11", "price": 188.5},
      {"date": "2024-01-12", "price": 187.2},
      {"date": "2024-01-16", "price": 189.8},
      {"date": "2024-01-17", "price": 191.5},
      {"date": "2024-01-18", "price": 193.2},
      {"date": "2024-01-19", "price": 192.8},
      {"date": "2024-01-22", "price": 195.5},
      {"date": "2024-01-23", "price": 194.2},
      {"date": "2024-01-24", "price": 196.8},
      {"date": "2024-01-25", "price": 198.5},
      {"date": "2024-01-26", "price": 197.2},
      {"date": "2024-01-29", "price": 199.8},
      {"date": "2024-01-30", "price": 201.5}
    ]
x: date
y: price
period: 10
stdDev: 2
width: 700
height: 600
title: "AAPL Stock with Bollinger Bands"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Line Charts

Candlestick

OHLC stock data:

View Source

type: candlestick
engine: d3
data:
  source: |
    [
      {"date": "2024-01-02", "open": 185.0, "high": 186.5, "low": 183.2, "close": 185.2},
      {"date": "2024-01-03", "open": 185.2, "high": 186.0, "low": 183.5, "close": 184.5},
      {"date": "2024-01-04", "open": 184.5, "high": 185.2, "low": 181.8, "close": 182.8},
      {"date": "2024-01-05", "open": 182.8, "high": 183.5, "low": 180.5, "close": 181.2},
      {"date": "2024-01-08", "open": 181.2, "high": 184.2, "low": 180.8, "close": 183.5},
      {"date": "2024-01-09", "open": 183.5, "high": 186.5, "low": 183.0, "close": 185.8},
      {"date": "2024-01-10", "open": 185.8, "high": 187.2, "low": 185.0, "close": 186.2},
      {"date": "2024-01-11", "open": 186.2, "high": 189.5, "low": 186.0, "close": 188.5},
      {"date": "2024-01-12", "open": 188.5, "high": 189.0, "low": 186.5, "close": 187.2},
      {"date": "2024-01-16", "open": 187.2, "high": 190.5, "low": 187.0, "close": 189.8},
      {"date": "2024-01-17", "open": 189.8, "high": 192.2, "low": 189.5, "close": 191.5},
      {"date": "2024-01-18", "open": 191.5, "high": 194.0, "low": 191.0, "close": 193.2}
    ]
x: date
width: 700
height: 400
title: "AAPL Stock Price"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Horizon Chart

Server CPU utilization over time:

View Source

type: horizon
engine: d3
data:
  source: |
    [
      {"time": "2024-01-01T00:00", "cpu": 25}, {"time": "2024-01-01T01:00", "cpu": 18},
      {"time": "2024-01-01T02:00", "cpu": 12}, {"time": "2024-01-01T03:00", "cpu": 8},
      {"time": "2024-01-01T04:00", "cpu": 15}, {"time": "2024-01-01T05:00", "cpu": 22},
      {"time": "2024-01-01T06:00", "cpu": 35}, {"time": "2024-01-01T07:00", "cpu": 55},
      {"time": "2024-01-01T08:00", "cpu": 72}, {"time": "2024-01-01T09:00", "cpu": 85},
      {"time": "2024-01-01T10:00", "cpu": 78}, {"time": "2024-01-01T11:00", "cpu": 82},
      {"time": "2024-01-01T12:00", "cpu": 65}, {"time": "2024-01-01T13:00", "cpu": 75},
      {"time": "2024-01-01T14:00", "cpu": 88}, {"time": "2024-01-01T15:00", "cpu": 92},
      {"time": "2024-01-01T16:00", "cpu": 85}, {"time": "2024-01-01T17:00", "cpu": 68},
      {"time": "2024-01-01T18:00", "cpu": 45}, {"time": "2024-01-01T19:00", "cpu": 38},
      {"time": "2024-01-01T20:00", "cpu": 42}, {"time": "2024-01-01T21:00", "cpu": 35},
      {"time": "2024-01-01T22:00", "cpu": 28}, {"time": "2024-01-01T23:00", "cpu": 22}
    ]
x: time
y: cpu
bands: 4
width: 700
height: 180
title: "Server CPU Usage (%)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Slope Chart

Company rankings before/after acquisition:

View Source

type: slope
engine: d3
data:
  source: |
    [
      {"company": "TechCorp", "before": 85, "after": 92},
      {"company": "DataInc", "before": 78, "after": 65},
      {"company": "CloudSys", "before": 92, "after": 88},
      {"company": "AILabs", "before": 65, "after": 95},
      {"company": "NetWorks", "before": 72, "after": 78},
      {"company": "SecureTech", "before": 88, "after": 82}
    ]
x: company
y:
  - before
  - after
width: 550
height: 450
title: "Company Performance Score: Before vs After Acquisition"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Parallel Coordinates

Iris flower measurements:

View Source

type: parallel-coords
engine: d3
data:
  source: |
    [
      {"sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.9, "sepal_width": 3.0, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 5.4, "sepal_width": 3.9, "petal_length": 1.7, "petal_width": 0.4, "species": "setosa"},
      {"sepal_length": 4.6, "sepal_width": 3.4, "petal_length": 1.4, "petal_width": 0.3, "species": "setosa"},
      {"sepal_length": 5.0, "sepal_width": 3.4, "petal_length": 1.5, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 7.0, "sepal_width": 3.2, "petal_length": 4.7, "petal_width": 1.4, "species": "versicolor"},
      {"sepal_length": 6.4, "sepal_width": 3.2, "petal_length": 4.5, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 6.9, "sepal_width": 3.1, "petal_length": 4.9, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 5.5, "sepal_width": 2.3, "petal_length": 4.0, "petal_width": 1.3, "species": "versicolor"},
      {"sepal_length": 6.5, "sepal_width": 2.8, "petal_length": 4.6, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 6.3, "sepal_width": 3.3, "petal_length": 6.0, "petal_width": 2.5, "species": "virginica"},
      {"sepal_length": 5.8, "sepal_width": 2.7, "petal_length": 5.1, "petal_width": 1.9, "species": "virginica"},
      {"sepal_length": 7.1, "sepal_width": 3.0, "petal_length": 5.9, "petal_width": 2.1, "species": "virginica"},
      {"sepal_length": 6.5, "sepal_width": 3.0, "petal_length": 5.8, "petal_width": 2.2, "species": "virginica"},
      {"sepal_length": 7.6, "sepal_width": 3.0, "petal_length": 6.6, "petal_width": 2.1, "species": "virginica"}
    ]
dimensions:
  - sepal_length
  - sepal_width
  - petal_length
  - petal_width
color: species
width: 700
height: 450
title: "Iris Flower Measurements"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Radial Charts

Radial Bar

Monthly sales performance:

View Source

type: radial-bar
engine: d3
data:
  source: |
    [
      {"month": "Jan", "sales": 42000},
      {"month": "Feb", "sales": 38000},
      {"month": "Mar", "sales": 55000},
      {"month": "Apr", "sales": 48000},
      {"month": "May", "sales": 62000},
      {"month": "Jun", "sales": 71000},
      {"month": "Jul", "sales": 68000},
      {"month": "Aug", "sales": 75000},
      {"month": "Sep", "sales": 58000},
      {"month": "Oct", "sales": 52000},
      {"month": "Nov", "sales": 65000},
      {"month": "Dec", "sales": 85000}
    ]
x: month
y: sales
width: 550
height: 550
title: "Monthly Sales ($)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Radial Area

Wind speed by direction:

View Source

type: radial-area
engine: d3
data:
  source: |
    [
      {"direction": "N", "speed": 12.5},
      {"direction": "NNE", "speed": 8.2},
      {"direction": "NE", "speed": 6.8},
      {"direction": "ENE", "speed": 5.5},
      {"direction": "E", "speed": 7.2},
      {"direction": "ESE", "speed": 9.8},
      {"direction": "SE", "speed": 11.5},
      {"direction": "SSE", "speed": 10.2},
      {"direction": "S", "speed": 8.5},
      {"direction": "SSW", "speed": 14.2},
      {"direction": "SW", "speed": 18.5},
      {"direction": "WSW", "speed": 15.8},
      {"direction": "W", "speed": 12.2},
      {"direction": "WNW", "speed": 9.5},
      {"direction": "NW", "speed": 11.8},
      {"direction": "NNW", "speed": 10.5}
    ]
x: direction
y: speed
width: 550
height: 550
title: "Wind Rose - Average Speed (mph)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Dot Charts

Beeswarm

Test scores distribution by class (color-coded):

View Source

type: beeswarm
engine: d3
data:
  source: |
    [
      {"class": "Math", "score": 78}, {"class": "Math", "score": 82},
      {"class": "Math", "score": 85}, {"class": "Math", "score": 79},
      {"class": "Math", "score": 88}, {"class": "Math", "score": 72},
      {"class": "Math", "score": 91}, {"class": "Math", "score": 76},
      {"class": "Math", "score": 84}, {"class": "Math", "score": 80},
      {"class": "Science", "score": 85}, {"class": "Science", "score": 88},
      {"class": "Science", "score": 92}, {"class": "Science", "score": 78},
      {"class": "Science", "score": 95}, {"class": "Science", "score": 82},
      {"class": "Science", "score": 89}, {"class": "Science", "score": 86},
      {"class": "Science", "score": 91}, {"class": "Science", "score": 84},
      {"class": "English", "score": 72}, {"class": "English", "score": 78},
      {"class": "English", "score": 82}, {"class": "English", "score": 75},
      {"class": "English", "score": 88}, {"class": "English", "score": 70},
      {"class": "English", "score": 85}, {"class": "English", "score": 79},
      {"class": "English", "score": 76}, {"class": "English", "score": 81},
      {"class": "History", "score": 68}, {"class": "History", "score": 75},
      {"class": "History", "score": 82}, {"class": "History", "score": 72},
      {"class": "History", "score": 78}, {"class": "History", "score": 85},
      {"class": "History", "score": 70}, {"class": "History", "score": 88},
      {"class": "History", "score": 74}, {"class": "History", "score": 80}
    ]
x: score
color: class
width: 600
height: 300
title: "Student Test Scores by Subject"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Animation Charts

Bar Race

Company market cap over years:

View Source

type: bar-race
engine: d3
data:
  source: |
    [
      {"company": "Apple", "value": 2100, "year": 2020},
      {"company": "Microsoft", "value": 1680, "year": 2020},
      {"company": "Amazon", "value": 1640, "year": 2020},
      {"company": "Google", "value": 1190, "year": 2020},
      {"company": "Facebook", "value": 780, "year": 2020},
      {"company": "Tesla", "value": 610, "year": 2020},
      {"company": "Apple", "value": 2900, "year": 2021},
      {"company": "Microsoft", "value": 2520, "year": 2021},
      {"company": "Amazon", "value": 1720, "year": 2021},
      {"company": "Google", "value": 1920, "year": 2021},
      {"company": "Tesla", "value": 1060, "year": 2021},
      {"company": "Facebook", "value": 920, "year": 2021},
      {"company": "Apple", "value": 2650, "year": 2022},
      {"company": "Microsoft", "value": 1880, "year": 2022},
      {"company": "Google", "value": 1150, "year": 2022},
      {"company": "Amazon", "value": 970, "year": 2022},
      {"company": "Tesla", "value": 390, "year": 2022},
      {"company": "Meta", "value": 320, "year": 2022},
      {"company": "Apple", "value": 2980, "year": 2023},
      {"company": "Microsoft", "value": 2780, "year": 2023},
      {"company": "Google", "value": 1750, "year": 2023},
      {"company": "Amazon", "value": 1540, "year": 2023},
      {"company": "Nvidia", "value": 1220, "year": 2023},
      {"company": "Tesla", "value": 790, "year": 2023}
    ]
x: company
y: value
time: year
topN: 6
width: 700
height: 400
title: "Tech Company Market Cap ($B)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Streamgraph

Music genre popularity over time:

View Source

type: streamgraph
engine: d3
data:
  source: |
    [
      {"year": "2018", "pop": 28, "rock": 22, "hiphop": 25, "electronic": 15, "country": 10},
      {"year": "2019", "pop": 26, "rock": 20, "hiphop": 28, "electronic": 16, "country": 10},
      {"year": "2020", "pop": 25, "rock": 18, "hiphop": 30, "electronic": 18, "country": 9},
      {"year": "2021", "pop": 24, "rock": 16, "hiphop": 32, "electronic": 20, "country": 8},
      {"year": "2022", "pop": 23, "rock": 15, "hiphop": 33, "electronic": 22, "country": 7},
      {"year": "2023", "pop": 22, "rock": 14, "hiphop": 34, "electronic": 24, "country": 6}
    ]
x: year
keys:
  - pop
  - rock
  - hiphop
  - electronic
  - country
offset: silhouette
height: 550
title: "Music Genre Streaming Share (%)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
colorScheme: blab

Interactive Charts

Brushable Scatter

Car fuel efficiency vs horsepower:

View Source

type: brushable-scatter
engine: d3
data:
  source: |
    [
      {"mpg": 21.0, "hp": 110, "origin": "USA", "name": "Chevrolet Chevelle"},
      {"mpg": 15.0, "hp": 165, "origin": "USA", "name": "Buick Skylark"},
      {"mpg": 18.0, "hp": 150, "origin": "USA", "name": "Plymouth Satellite"},
      {"mpg": 16.0, "hp": 150, "origin": "USA", "name": "AMC Rebel"},
      {"mpg": 17.0, "hp": 140, "origin": "USA", "name": "Ford Torino"},
      {"mpg": 26.0, "hp": 97, "origin": "Europe", "name": "Volkswagen 1131"},
      {"mpg": 24.0, "hp": 95, "origin": "Europe", "name": "Peugeot 504"},
      {"mpg": 22.0, "hp": 97, "origin": "Europe", "name": "Audi 100 LS"},
      {"mpg": 25.0, "hp": 85, "origin": "Europe", "name": "Saab 99"},
      {"mpg": 28.0, "hp": 88, "origin": "Europe", "name": "BMW 2002"},
      {"mpg": 27.0, "hp": 88, "origin": "Japan", "name": "Datsun PL510"},
      {"mpg": 25.0, "hp": 95, "origin": "Japan", "name": "Toyota Corolla"},
      {"mpg": 29.0, "hp": 90, "origin": "Japan", "name": "Toyota Corona"},
      {"mpg": 32.0, "hp": 65, "origin": "Japan", "name": "Honda Civic"},
      {"mpg": 31.0, "hp": 68, "origin": "Japan", "name": "Mazda RX2"},
      {"mpg": 19.0, "hp": 130, "origin": "USA", "name": "Dodge Challenger"},
      {"mpg": 14.0, "hp": 180, "origin": "USA", "name": "Plymouth Cuda"},
      {"mpg": 33.0, "hp": 70, "origin": "Japan", "name": "Datsun 210"},
      {"mpg": 35.0, "hp": 72, "origin": "Japan", "name": "Honda Accord"},
      {"mpg": 30.0, "hp": 75, "origin": "Europe", "name": "Fiat 131"}
    ]
x: hp
y: mpg
color: origin
width: 650
height: 450
title: "Car MPG vs Horsepower (brush to select)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

---

Large Dataset Examples (50+ Points)

The following examples demonstrate DataGlass handling larger datasets with dozens of data points, showcasing real-world use cases.

Stock Price Time Series (40 points)

Daily stock prices showing price trends:

View Source

type: line
engine: d3
data:
  source: |
    [
      {"date": "2024-01-02", "close": 185.2}, {"date": "2024-01-03", "close": 184.5},
      {"date": "2024-01-04", "close": 182.8}, {"date": "2024-01-05", "close": 181.2},
      {"date": "2024-01-08", "close": 183.5}, {"date": "2024-01-09", "close": 185.8},
      {"date": "2024-01-10", "close": 186.2}, {"date": "2024-01-11", "close": 188.5},
      {"date": "2024-01-12", "close": 187.2}, {"date": "2024-01-16", "close": 189.8},
      {"date": "2024-01-17", "close": 191.5}, {"date": "2024-01-18", "close": 193.2},
      {"date": "2024-01-19", "close": 192.8}, {"date": "2024-01-22", "close": 195.5},
      {"date": "2024-01-23", "close": 194.2}, {"date": "2024-01-24", "close": 196.8},
      {"date": "2024-01-25", "close": 198.5}, {"date": "2024-01-26", "close": 197.2},
      {"date": "2024-01-29", "close": 199.8}, {"date": "2024-01-30", "close": 201.5},
      {"date": "2024-01-31", "close": 203.2}, {"date": "2024-02-01", "close": 205.8},
      {"date": "2024-02-02", "close": 204.5}, {"date": "2024-02-05", "close": 207.2},
      {"date": "2024-02-06", "close": 208.8}, {"date": "2024-02-07", "close": 210.5},
      {"date": "2024-02-08", "close": 209.2}, {"date": "2024-02-09", "close": 212.5},
      {"date": "2024-02-12", "close": 214.8}, {"date": "2024-02-13", "close": 213.2},
      {"date": "2024-02-14", "close": 216.5}, {"date": "2024-02-15", "close": 218.2},
      {"date": "2024-02-16", "close": 217.8}, {"date": "2024-02-20", "close": 220.5},
      {"date": "2024-02-21", "close": 219.2}, {"date": "2024-02-22", "close": 222.8},
      {"date": "2024-02-23", "close": 225.5}, {"date": "2024-02-26", "close": 224.2},
      {"date": "2024-02-27", "close": 227.8}, {"date": "2024-02-28", "close": 230.5}
    ]
x: date
y: close
width: 800
height: 400
title: "AAPL Stock Price - 2 Months Daily (40 points)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Candlestick Financial Chart (25 points)

Trading data with OHLC (Open, High, Low, Close):

View Source

type: candlestick
engine: d3
data:
  source: |
    [
      {"date": "2024-01-02", "open": 470.5, "high": 475.2, "low": 468.8, "close": 472.5},
      {"date": "2024-01-03", "open": 472.5, "high": 478.5, "low": 470.2, "close": 476.8},
      {"date": "2024-01-04", "open": 476.8, "high": 480.2, "low": 474.5, "close": 478.2},
      {"date": "2024-01-05", "open": 478.2, "high": 482.8, "low": 476.5, "close": 480.5},
      {"date": "2024-01-08", "open": 480.5, "high": 485.2, "low": 478.8, "close": 483.2},
      {"date": "2024-01-09", "open": 483.2, "high": 488.5, "low": 481.2, "close": 486.8},
      {"date": "2024-01-10", "open": 486.8, "high": 490.2, "low": 484.5, "close": 488.5},
      {"date": "2024-01-11", "open": 488.5, "high": 492.8, "low": 486.2, "close": 490.2},
      {"date": "2024-01-12", "open": 490.2, "high": 494.5, "low": 488.8, "close": 492.8},
      {"date": "2024-01-16", "open": 492.8, "high": 498.2, "low": 490.5, "close": 496.5},
      {"date": "2024-01-17", "open": 496.5, "high": 500.8, "low": 494.2, "close": 498.2},
      {"date": "2024-01-18", "open": 498.2, "high": 502.5, "low": 496.8, "close": 500.5},
      {"date": "2024-01-19", "open": 500.5, "high": 504.2, "low": 498.5, "close": 502.8},
      {"date": "2024-01-22", "open": 502.8, "high": 508.5, "low": 500.2, "close": 506.2},
      {"date": "2024-01-23", "open": 506.2, "high": 510.8, "low": 504.5, "close": 508.5},
      {"date": "2024-01-24", "open": 508.5, "high": 512.2, "low": 506.8, "close": 510.2},
      {"date": "2024-01-25", "open": 510.2, "high": 515.5, "low": 508.5, "close": 513.8},
      {"date": "2024-01-26", "open": 513.8, "high": 518.2, "low": 511.5, "close": 516.5},
      {"date": "2024-01-29", "open": 516.5, "high": 520.8, "low": 514.2, "close": 518.2},
      {"date": "2024-01-30", "open": 518.2, "high": 522.5, "low": 516.8, "close": 520.5},
      {"date": "2024-01-31", "open": 520.5, "high": 525.2, "low": 518.5, "close": 523.8},
      {"date": "2024-02-01", "open": 523.8, "high": 528.5, "low": 521.2, "close": 526.2},
      {"date": "2024-02-02", "open": 526.2, "high": 530.8, "low": 524.5, "close": 528.5},
      {"date": "2024-02-05", "open": 528.5, "high": 532.2, "low": 526.8, "close": 530.2},
      {"date": "2024-02-06", "open": 530.2, "high": 535.5, "low": 528.5, "close": 533.8}
    ]
x: date
open: open
high: high
low: low
close: close
width: 900
height: 450
title: "SPY ETF - 1 Month Daily OHLC (25 trading days)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Sensor Temperature Data (48 points)

IoT sensor readings across multiple sensors:

View Source

type: line
engine: d3
data:
  source: |
    [
      {"timestamp": "2024-01-01T00:00", "temperature": 22.5, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T02:00", "temperature": 21.8, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T04:00", "temperature": 21.2, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T06:00", "temperature": 20.8, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T08:00", "temperature": 22.5, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T10:00", "temperature": 24.2, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T12:00", "temperature": 25.8, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T14:00", "temperature": 26.5, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T16:00", "temperature": 25.2, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T18:00", "temperature": 24.5, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T20:00", "temperature": 23.8, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T22:00", "temperature": 23.2, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T00:00", "temperature": 18.5, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T02:00", "temperature": 17.8, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T04:00", "temperature": 17.2, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T06:00", "temperature": 16.8, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T08:00", "temperature": 18.5, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T10:00", "temperature": 20.2, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T12:00", "temperature": 21.8, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T14:00", "temperature": 22.5, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T16:00", "temperature": 21.2, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T18:00", "temperature": 20.5, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T20:00", "temperature": 19.8, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T22:00", "temperature": 19.2, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T00:00", "temperature": 25.5, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T02:00", "temperature": 24.8, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T04:00", "temperature": 24.2, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T06:00", "temperature": 23.8, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T08:00", "temperature": 25.5, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T10:00", "temperature": 27.2, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T12:00", "temperature": 28.8, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T14:00", "temperature": 29.5, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T16:00", "temperature": 28.2, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T18:00", "temperature": 27.5, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T20:00", "temperature": 26.8, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T22:00", "temperature": 26.2, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T00:00", "temperature": 20.5, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T02:00", "temperature": 19.8, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T04:00", "temperature": 19.2, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T06:00", "temperature": 18.8, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T08:00", "temperature": 20.5, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T10:00", "temperature": 22.2, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T12:00", "temperature": 23.8, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T14:00", "temperature": 24.5, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T16:00", "temperature": 23.2, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T18:00", "temperature": 22.5, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T20:00", "temperature": 21.8, "sensor_id": "Sensor D"},
      {"timestamp": "2024-01-01T22:00", "temperature": 21.2, "sensor_id": "Sensor D"}
    ]
x: timestamp
y: temperature
color: sensor_id
width: 850
height: 400
title: "Multi-Sensor Temperature Readings - 1 Day (48 points)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Global Earthquake Data (30 points)

Earthquake events with magnitude and location:

View Source

type: brushable-scatter
engine: d3
data:
  source: |
    [
      {"longitude": -122.4, "latitude": 37.8, "magnitude": 4.2},
      {"longitude": -118.2, "latitude": 34.1, "magnitude": 3.8},
      {"longitude": -117.2, "latitude": 32.7, "magnitude": 4.5},
      {"longitude": -121.9, "latitude": 36.6, "magnitude": 3.2},
      {"longitude": -119.4, "latitude": 35.4, "magnitude": 4.8},
      {"longitude": 139.7, "latitude": 35.7, "magnitude": 5.2},
      {"longitude": 140.1, "latitude": 36.2, "magnitude": 4.9},
      {"longitude": 138.6, "latitude": 34.9, "magnitude": 4.1},
      {"longitude": 141.2, "latitude": 38.3, "magnitude": 5.8},
      {"longitude": 139.2, "latitude": 35.2, "magnitude": 3.9},
      {"longitude": -155.5, "latitude": 19.4, "magnitude": 4.3},
      {"longitude": -155.2, "latitude": 19.7, "magnitude": 3.7},
      {"longitude": -155.8, "latitude": 19.2, "magnitude": 4.6},
      {"longitude": -154.9, "latitude": 19.5, "magnitude": 3.5},
      {"longitude": -156.1, "latitude": 19.9, "magnitude": 4.1},
      {"longitude": -70.6, "latitude": -33.4, "magnitude": 5.5},
      {"longitude": -71.2, "latitude": -34.1, "magnitude": 4.8},
      {"longitude": -70.1, "latitude": -32.8, "magnitude": 5.1},
      {"longitude": -71.8, "latitude": -35.2, "magnitude": 4.4},
      {"longitude": -69.8, "latitude": -33.1, "magnitude": 4.9},
      {"longitude": 121.5, "latitude": 31.2, "magnitude": 4.2},
      {"longitude": 120.8, "latitude": 30.5, "magnitude": 3.8},
      {"longitude": 122.1, "latitude": 31.8, "magnitude": 4.5},
      {"longitude": 119.9, "latitude": 29.9, "magnitude": 3.6},
      {"longitude": 121.2, "latitude": 30.8, "magnitude": 4.1},
      {"longitude": 14.4, "latitude": 40.8, "magnitude": 3.9},
      {"longitude": 15.1, "latitude": 41.2, "magnitude": 4.3},
      {"longitude": 13.8, "latitude": 40.5, "magnitude": 3.5},
      {"longitude": 14.8, "latitude": 41.5, "magnitude": 4.7},
      {"longitude": 13.2, "latitude": 40.2, "magnitude": 3.8}
    ]
x: longitude
y: latitude
color: magnitude
width: 900
height: 500
title: "Global Earthquake Events (30 events)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Population Density Contour (50 points)

Simulated population distribution across a metropolitan area:

View Source

type: contour
engine: d3
data:
  source: |
    [
      {"x": 0.5, "y": 0.5}, {"x": 0.6, "y": 0.5}, {"x": 0.5, "y": 0.6}, {"x": 0.4, "y": 0.5},
      {"x": 0.5, "y": 0.4}, {"x": 0.55, "y": 0.55}, {"x": 0.45, "y": 0.55}, {"x": 0.55, "y": 0.45},
      {"x": 0.45, "y": 0.45}, {"x": 0.5, "y": 0.52}, {"x": 0.52, "y": 0.5}, {"x": 0.48, "y": 0.5},
      {"x": 0.5, "y": 0.48}, {"x": 0.53, "y": 0.53}, {"x": 0.47, "y": 0.53}, {"x": 0.53, "y": 0.47},
      {"x": 0.3, "y": 0.7}, {"x": 0.35, "y": 0.72}, {"x": 0.32, "y": 0.68}, {"x": 0.28, "y": 0.71},
      {"x": 0.33, "y": 0.75}, {"x": 0.3, "y": 0.65}, {"x": 0.36, "y": 0.69}, {"x": 0.29, "y": 0.73},
      {"x": 0.7, "y": 0.3}, {"x": 0.72, "y": 0.32}, {"x": 0.68, "y": 0.28}, {"x": 0.71, "y": 0.35},
      {"x": 0.75, "y": 0.3}, {"x": 0.69, "y": 0.33}, {"x": 0.73, "y": 0.29}, {"x": 0.67, "y": 0.31},
      {"x": 0.2, "y": 0.2}, {"x": 0.22, "y": 0.18}, {"x": 0.18, "y": 0.22}, {"x": 0.25, "y": 0.2},
      {"x": 0.2, "y": 0.25}, {"x": 0.23, "y": 0.23}, {"x": 0.17, "y": 0.19}, {"x": 0.21, "y": 0.16},
      {"x": 0.8, "y": 0.8}, {"x": 0.82, "y": 0.78}, {"x": 0.78, "y": 0.82}, {"x": 0.85, "y": 0.8},
      {"x": 0.8, "y": 0.85}, {"x": 0.83, "y": 0.83}, {"x": 0.77, "y": 0.79}, {"x": 0.81, "y": 0.76},
      {"x": 0.5, "y": 0.51}, {"x": 0.51, "y": 0.49}
    ]
x: x
y: y
thresholds: 20
width: 700
height: 700
title: "Metropolitan Population Density Distribution (50 sample points)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Website Traffic Streamgraph (30 points)

Daily page views by traffic source:

View Source

type: streamgraph
engine: d3
data:
  source: |
    [
      {"date": "2024-01-01", "organic": 4500, "direct": 2800, "social": 1800, "referral": 1200, "paid": 800},
      {"date": "2024-01-02", "organic": 4800, "direct": 2900, "social": 1900, "referral": 1300, "paid": 850},
      {"date": "2024-01-03", "organic": 5200, "direct": 3100, "social": 2100, "referral": 1400, "paid": 900},
      {"date": "2024-01-04", "organic": 5500, "direct": 3300, "social": 2300, "referral": 1500, "paid": 950},
      {"date": "2024-01-05", "organic": 5100, "direct": 3000, "social": 2000, "referral": 1350, "paid": 880},
      {"date": "2024-01-06", "organic": 3800, "direct": 2200, "social": 2500, "referral": 900, "paid": 600},
      {"date": "2024-01-07", "organic": 3500, "direct": 2000, "social": 2800, "referral": 850, "paid": 550},
      {"date": "2024-01-08", "organic": 4600, "direct": 2850, "social": 1850, "referral": 1250, "paid": 820},
      {"date": "2024-01-09", "organic": 4900, "direct": 2950, "social": 1950, "referral": 1350, "paid": 870},
      {"date": "2024-01-10", "organic": 5300, "direct": 3150, "social": 2150, "referral": 1450, "paid": 920},
      {"date": "2024-01-11", "organic": 5600, "direct": 3350, "social": 2350, "referral": 1550, "paid": 970},
      {"date": "2024-01-12", "organic": 5200, "direct": 3050, "social": 2050, "referral": 1400, "paid": 900},
      {"date": "2024-01-13", "organic": 3900, "direct": 2250, "social": 2550, "referral": 950, "paid": 620},
      {"date": "2024-01-14", "organic": 3600, "direct": 2050, "social": 2850, "referral": 900, "paid": 570},
      {"date": "2024-01-15", "organic": 4700, "direct": 2900, "social": 1900, "referral": 1300, "paid": 840},
      {"date": "2024-01-16", "organic": 5000, "direct": 3000, "social": 2000, "referral": 1400, "paid": 890},
      {"date": "2024-01-17", "organic": 5400, "direct": 3200, "social": 2200, "referral": 1500, "paid": 940},
      {"date": "2024-01-18", "organic": 5700, "direct": 3400, "social": 2400, "referral": 1600, "paid": 990},
      {"date": "2024-01-19", "organic": 5300, "direct": 3100, "social": 2100, "referral": 1450, "paid": 920},
      {"date": "2024-01-20", "organic": 4000, "direct": 2300, "social": 2600, "referral": 1000, "paid": 640},
      {"date": "2024-01-21", "organic": 3700, "direct": 2100, "social": 2900, "referral": 950, "paid": 590},
      {"date": "2024-01-22", "organic": 4800, "direct": 2950, "social": 1950, "referral": 1350, "paid": 860},
      {"date": "2024-01-23", "organic": 5100, "direct": 3050, "social": 2050, "referral": 1450, "paid": 910},
      {"date": "2024-01-24", "organic": 5500, "direct": 3250, "social": 2250, "referral": 1550, "paid": 960},
      {"date": "2024-01-25", "organic": 5800, "direct": 3450, "social": 2450, "referral": 1650, "paid": 1010},
      {"date": "2024-01-26", "organic": 5400, "direct": 3150, "social": 2150, "referral": 1500, "paid": 940},
      {"date": "2024-01-27", "organic": 4100, "direct": 2350, "social": 2650, "referral": 1050, "paid": 660},
      {"date": "2024-01-28", "organic": 3800, "direct": 2150, "social": 2950, "referral": 1000, "paid": 610},
      {"date": "2024-01-29", "organic": 4900, "direct": 3000, "social": 2000, "referral": 1400, "paid": 880},
      {"date": "2024-01-30", "organic": 5200, "direct": 3100, "social": 2100, "referral": 1500, "paid": 930}
    ]
x: date
keys:
  - organic
  - direct
  - social
  - referral
  - paid
offset: wiggle
width: 900
height: 450
title: "Website Traffic by Source - 1 Month Daily (30 days x 5 sources)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Beeswarm Salary Distribution (40 points)

Employee salaries across departments:

View Source

type: beeswarm
engine: d3
data:
  source: |
    [
      {"salary": 65000, "department": "Engineering"}, {"salary": 72000, "department": "Engineering"},
      {"salary": 85000, "department": "Engineering"}, {"salary": 95000, "department": "Engineering"},
      {"salary": 105000, "department": "Engineering"}, {"salary": 115000, "department": "Engineering"},
      {"salary": 125000, "department": "Engineering"}, {"salary": 135000, "department": "Engineering"},
      {"salary": 78000, "department": "Engineering"}, {"salary": 88000, "department": "Engineering"},
      {"salary": 55000, "department": "Sales"}, {"salary": 62000, "department": "Sales"},
      {"salary": 68000, "department": "Sales"}, {"salary": 75000, "department": "Sales"},
      {"salary": 82000, "department": "Sales"}, {"salary": 90000, "department": "Sales"},
      {"salary": 98000, "department": "Sales"}, {"salary": 72000, "department": "Sales"},
      {"salary": 78000, "department": "Sales"}, {"salary": 85000, "department": "Sales"},
      {"salary": 48000, "department": "Marketing"}, {"salary": 55000, "department": "Marketing"},
      {"salary": 62000, "department": "Marketing"}, {"salary": 68000, "department": "Marketing"},
      {"salary": 75000, "department": "Marketing"}, {"salary": 82000, "department": "Marketing"},
      {"salary": 58000, "department": "Marketing"}, {"salary": 65000, "department": "Marketing"},
      {"salary": 72000, "department": "Marketing"}, {"salary": 78000, "department": "Marketing"},
      {"salary": 45000, "department": "HR"}, {"salary": 52000, "department": "HR"},
      {"salary": 58000, "department": "HR"}, {"salary": 65000, "department": "HR"},
      {"salary": 72000, "department": "HR"}, {"salary": 48000, "department": "HR"},
      {"salary": 55000, "department": "HR"}, {"salary": 62000, "department": "HR"},
      {"salary": 68000, "department": "HR"}, {"salary": 75000, "department": "HR"}
    ]
x: salary
color: department
width: 800
height: 400
title: "Employee Salary Distribution by Department (40 employees)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Parallel Coordinates - Iris Dataset (60 points)

Classic Fisher's Iris dataset with 4 dimensions:

View Source

type: parallel-coords
engine: d3
data:
  source: |
    [
      {"sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.9, "sepal_width": 3.0, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.7, "sepal_width": 3.2, "petal_length": 1.3, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.6, "sepal_width": 3.1, "petal_length": 1.5, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 5.0, "sepal_width": 3.6, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 5.4, "sepal_width": 3.9, "petal_length": 1.7, "petal_width": 0.4, "species": "setosa"},
      {"sepal_length": 4.6, "sepal_width": 3.4, "petal_length": 1.4, "petal_width": 0.3, "species": "setosa"},
      {"sepal_length": 5.0, "sepal_width": 3.4, "petal_length": 1.5, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.4, "sepal_width": 2.9, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.9, "sepal_width": 3.1, "petal_length": 1.5, "petal_width": 0.1, "species": "setosa"},
      {"sepal_length": 5.4, "sepal_width": 3.7, "petal_length": 1.5, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.8, "sepal_width": 3.4, "petal_length": 1.6, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 4.8, "sepal_width": 3.0, "petal_length": 1.4, "petal_width": 0.1, "species": "setosa"},
      {"sepal_length": 4.3, "sepal_width": 3.0, "petal_length": 1.1, "petal_width": 0.1, "species": "setosa"},
      {"sepal_length": 5.8, "sepal_width": 4.0, "petal_length": 1.2, "petal_width": 0.2, "species": "setosa"},
      {"sepal_length": 5.7, "sepal_width": 4.4, "petal_length": 1.5, "petal_width": 0.4, "species": "setosa"},
      {"sepal_length": 5.4, "sepal_width": 3.9, "petal_length": 1.3, "petal_width": 0.4, "species": "setosa"},
      {"sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.3, "species": "setosa"},
      {"sepal_length": 5.7, "sepal_width": 3.8, "petal_length": 1.7, "petal_width": 0.3, "species": "setosa"},
      {"sepal_length": 5.1, "sepal_width": 3.8, "petal_length": 1.5, "petal_width": 0.3, "species": "setosa"},
      {"sepal_length": 7.0, "sepal_width": 3.2, "petal_length": 4.7, "petal_width": 1.4, "species": "versicolor"},
      {"sepal_length": 6.4, "sepal_width": 3.2, "petal_length": 4.5, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 6.9, "sepal_width": 3.1, "petal_length": 4.9, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 5.5, "sepal_width": 2.3, "petal_length": 4.0, "petal_width": 1.3, "species": "versicolor"},
      {"sepal_length": 6.5, "sepal_width": 2.8, "petal_length": 4.6, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 5.7, "sepal_width": 2.8, "petal_length": 4.5, "petal_width": 1.3, "species": "versicolor"},
      {"sepal_length": 6.3, "sepal_width": 3.3, "petal_length": 4.7, "petal_width": 1.6, "species": "versicolor"},
      {"sepal_length": 4.9, "sepal_width": 2.4, "petal_length": 3.3, "petal_width": 1.0, "species": "versicolor"},
      {"sepal_length": 6.6, "sepal_width": 2.9, "petal_length": 4.6, "petal_width": 1.3, "species": "versicolor"},
      {"sepal_length": 5.2, "sepal_width": 2.7, "petal_length": 3.9, "petal_width": 1.4, "species": "versicolor"},
      {"sepal_length": 5.0, "sepal_width": 2.0, "petal_length": 3.5, "petal_width": 1.0, "species": "versicolor"},
      {"sepal_length": 5.9, "sepal_width": 3.0, "petal_length": 4.2, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 6.0, "sepal_width": 2.2, "petal_length": 4.0, "petal_width": 1.0, "species": "versicolor"},
      {"sepal_length": 6.1, "sepal_width": 2.9, "petal_length": 4.7, "petal_width": 1.4, "species": "versicolor"},
      {"sepal_length": 5.6, "sepal_width": 2.9, "petal_length": 3.6, "petal_width": 1.3, "species": "versicolor"},
      {"sepal_length": 6.7, "sepal_width": 3.1, "petal_length": 4.4, "petal_width": 1.4, "species": "versicolor"},
      {"sepal_length": 5.6, "sepal_width": 3.0, "petal_length": 4.5, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 5.8, "sepal_width": 2.7, "petal_length": 4.1, "petal_width": 1.0, "species": "versicolor"},
      {"sepal_length": 6.2, "sepal_width": 2.2, "petal_length": 4.5, "petal_width": 1.5, "species": "versicolor"},
      {"sepal_length": 5.6, "sepal_width": 2.5, "petal_length": 3.9, "petal_width": 1.1, "species": "versicolor"},
      {"sepal_length": 6.3, "sepal_width": 3.3, "petal_length": 6.0, "petal_width": 2.5, "species": "virginica"},
      {"sepal_length": 5.8, "sepal_width": 2.7, "petal_length": 5.1, "petal_width": 1.9, "species": "virginica"},
      {"sepal_length": 7.1, "sepal_width": 3.0, "petal_length": 5.9, "petal_width": 2.1, "species": "virginica"},
      {"sepal_length": 6.3, "sepal_width": 2.9, "petal_length": 5.6, "petal_width": 1.8, "species": "virginica"},
      {"sepal_length": 6.5, "sepal_width": 3.0, "petal_length": 5.8, "petal_width": 2.2, "species": "virginica"},
      {"sepal_length": 7.6, "sepal_width": 3.0, "petal_length": 6.6, "petal_width": 2.1, "species": "virginica"},
      {"sepal_length": 4.9, "sepal_width": 2.5, "petal_length": 4.5, "petal_width": 1.7, "species": "virginica"},
      {"sepal_length": 7.3, "sepal_width": 2.9, "petal_length": 6.3, "petal_width": 1.8, "species": "virginica"},
      {"sepal_length": 6.7, "sepal_width": 2.5, "petal_length": 5.8, "petal_width": 1.8, "species": "virginica"},
      {"sepal_length": 7.2, "sepal_width": 3.6, "petal_length": 6.1, "petal_width": 2.5, "species": "virginica"},
      {"sepal_length": 6.5, "sepal_width": 3.2, "petal_length": 5.1, "petal_width": 2.0, "species": "virginica"},
      {"sepal_length": 6.4, "sepal_width": 2.7, "petal_length": 5.3, "petal_width": 1.9, "species": "virginica"},
      {"sepal_length": 6.8, "sepal_width": 3.0, "petal_length": 5.5, "petal_width": 2.1, "species": "virginica"},
      {"sepal_length": 5.7, "sepal_width": 2.5, "petal_length": 5.0, "petal_width": 2.0, "species": "virginica"},
      {"sepal_length": 5.8, "sepal_width": 2.8, "petal_length": 5.1, "petal_width": 2.4, "species": "virginica"},
      {"sepal_length": 6.4, "sepal_width": 3.2, "petal_length": 5.3, "petal_width": 2.3, "species": "virginica"},
      {"sepal_length": 6.5, "sepal_width": 3.0, "petal_length": 5.5, "petal_width": 1.8, "species": "virginica"},
      {"sepal_length": 7.7, "sepal_width": 3.8, "petal_length": 6.7, "petal_width": 2.2, "species": "virginica"},
      {"sepal_length": 7.7, "sepal_width": 2.6, "petal_length": 6.9, "petal_width": 2.3, "species": "virginica"},
      {"sepal_length": 6.0, "sepal_width": 2.2, "petal_length": 5.0, "petal_width": 1.5, "species": "virginica"}
    ]
dimensions:
  - sepal_length
  - sepal_width
  - petal_length
  - petal_width
color: species
width: 800
height: 400
title: "Fisher's Iris Dataset - 4 Dimensions (60 samples)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Violin Plot - Response Times (40 points)

API response time distribution across different endpoints:

View Source

type: violin
engine: d3
data:
  source: |
    [
      {"endpoint": "/api/users", "response_time": 45}, {"endpoint": "/api/users", "response_time": 52},
      {"endpoint": "/api/users", "response_time": 38}, {"endpoint": "/api/users", "response_time": 65},
      {"endpoint": "/api/users", "response_time": 48}, {"endpoint": "/api/users", "response_time": 55},
      {"endpoint": "/api/users", "response_time": 42}, {"endpoint": "/api/users", "response_time": 58},
      {"endpoint": "/api/users", "response_time": 50}, {"endpoint": "/api/users", "response_time": 47},
      {"endpoint": "/api/products", "response_time": 85}, {"endpoint": "/api/products", "response_time": 92},
      {"endpoint": "/api/products", "response_time": 78}, {"endpoint": "/api/products", "response_time": 105},
      {"endpoint": "/api/products", "response_time": 88}, {"endpoint": "/api/products", "response_time": 95},
      {"endpoint": "/api/products", "response_time": 82}, {"endpoint": "/api/products", "response_time": 98},
      {"endpoint": "/api/products", "response_time": 90}, {"endpoint": "/api/products", "response_time": 87},
      {"endpoint": "/api/orders", "response_time": 125}, {"endpoint": "/api/orders", "response_time": 138},
      {"endpoint": "/api/orders", "response_time": 115}, {"endpoint": "/api/orders", "response_time": 145},
      {"endpoint": "/api/orders", "response_time": 128}, {"endpoint": "/api/orders", "response_time": 135},
      {"endpoint": "/api/orders", "response_time": 120}, {"endpoint": "/api/orders", "response_time": 142},
      {"endpoint": "/api/orders", "response_time": 130}, {"endpoint": "/api/orders", "response_time": 133},
      {"endpoint": "/api/search", "response_time": 185}, {"endpoint": "/api/search", "response_time": 198},
      {"endpoint": "/api/search", "response_time": 172}, {"endpoint": "/api/search", "response_time": 215},
      {"endpoint": "/api/search", "response_time": 188}, {"endpoint": "/api/search", "response_time": 205},
      {"endpoint": "/api/search", "response_time": 178}, {"endpoint": "/api/search", "response_time": 210},
      {"endpoint": "/api/search", "response_time": 192}, {"endpoint": "/api/search", "response_time": 195}
    ]
x: endpoint
y: response_time
width: 800
height: 450
title: "API Response Time Distribution by Endpoint (40 requests)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Ridgeline - Daily Temperature (48 points)

Temperature distribution by month:

View Source

type: ridgeline
engine: d3
data:
  source: |
    [
      {"month": "January", "temperature": 32}, {"month": "January", "temperature": 28},
      {"month": "January", "temperature": 35}, {"month": "January", "temperature": 30},
      {"month": "January", "temperature": 25}, {"month": "January", "temperature": 33},
      {"month": "January", "temperature": 27}, {"month": "January", "temperature": 31},
      {"month": "January", "temperature": 29}, {"month": "January", "temperature": 34},
      {"month": "January", "temperature": 26}, {"month": "January", "temperature": 36},
      {"month": "April", "temperature": 55}, {"month": "April", "temperature": 58},
      {"month": "April", "temperature": 52}, {"month": "April", "temperature": 60},
      {"month": "April", "temperature": 48}, {"month": "April", "temperature": 56},
      {"month": "April", "temperature": 54}, {"month": "April", "temperature": 59},
      {"month": "April", "temperature": 51}, {"month": "April", "temperature": 57},
      {"month": "April", "temperature": 53}, {"month": "April", "temperature": 62},
      {"month": "July", "temperature": 85}, {"month": "July", "temperature": 88},
      {"month": "July", "temperature": 82}, {"month": "July", "temperature": 90},
      {"month": "July", "temperature": 78}, {"month": "July", "temperature": 86},
      {"month": "July", "temperature": 84}, {"month": "July", "temperature": 89},
      {"month": "July", "temperature": 81}, {"month": "July", "temperature": 87},
      {"month": "July", "temperature": 83}, {"month": "July", "temperature": 92},
      {"month": "October", "temperature": 58}, {"month": "October", "temperature": 55},
      {"month": "October", "temperature": 62}, {"month": "October", "temperature": 50},
      {"month": "October", "temperature": 65}, {"month": "October", "temperature": 52},
      {"month": "October", "temperature": 56}, {"month": "October", "temperature": 60},
      {"month": "October", "temperature": 48}, {"month": "October", "temperature": 54},
      {"month": "October", "temperature": 59}, {"month": "October", "temperature": 51}
    ]
x: temperature
group: month
overlap: 0.7
width: 750
height: 500
title: "Daily Temperature Distribution by Month (48 days)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

Histogram - Age Distribution (80 points)

Population age distribution:

View Source

type: histogram
engine: d3
data:
  source: |
    [
      {"age": 18}, {"age": 19}, {"age": 20}, {"age": 21}, {"age": 22}, {"age": 23}, {"age": 24}, {"age": 25},
      {"age": 22}, {"age": 23}, {"age": 24}, {"age": 25}, {"age": 26}, {"age": 27}, {"age": 28}, {"age": 29},
      {"age": 25}, {"age": 26}, {"age": 27}, {"age": 28}, {"age": 29}, {"age": 30}, {"age": 31}, {"age": 32},
      {"age": 28}, {"age": 29}, {"age": 30}, {"age": 31}, {"age": 32}, {"age": 33}, {"age": 34}, {"age": 35},
      {"age": 32}, {"age": 33}, {"age": 34}, {"age": 35}, {"age": 36}, {"age": 37}, {"age": 38}, {"age": 39},
      {"age": 35}, {"age": 36}, {"age": 37}, {"age": 38}, {"age": 39}, {"age": 40}, {"age": 41}, {"age": 42},
      {"age": 40}, {"age": 41}, {"age": 42}, {"age": 43}, {"age": 44}, {"age": 45}, {"age": 46}, {"age": 47},
      {"age": 45}, {"age": 46}, {"age": 47}, {"age": 48}, {"age": 49}, {"age": 50}, {"age": 51}, {"age": 52},
      {"age": 50}, {"age": 52}, {"age": 54}, {"age": 56}, {"age": 58}, {"age": 60}, {"age": 62}, {"age": 64},
      {"age": 55}, {"age": 58}, {"age": 61}, {"age": 64}, {"age": 67}, {"age": 70}, {"age": 73}, {"age": 76}
    ]
x: age
bins: 20
width: 700
height: 400
title: "Population Age Distribution (80 samples)"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single

---

Layout System Examples

The layout system provides standardized chart layouts with configurable regions for title, subtitle, metadata, messages, and responsive scaling.

Standard Layout with Full Metadata

Complete chart with title, subtitle, source attribution, and auto point count:

View Source

type: boxplot
engine: d3
data:
  source: |
    [
      {"department": "Engineering", "salary": 65000}, {"department": "Engineering", "salary": 72000},
      {"department": "Engineering", "salary": 85000}, {"department": "Engineering", "salary": 95000},
      {"department": "Engineering", "salary": 105000}, {"department": "Engineering", "salary": 115000},
      {"department": "Engineering", "salary": 125000}, {"department": "Engineering", "salary": 135000},
      {"department": "Sales", "salary": 55000}, {"department": "Sales", "salary": 62000},
      {"department": "Sales", "salary": 68000}, {"department": "Sales", "salary": 75000},
      {"department": "Sales", "salary": 82000}, {"department": "Sales", "salary": 90000},
      {"department": "Marketing", "salary": 48000}, {"department": "Marketing", "salary": 55000},
      {"department": "Marketing", "salary": 62000}, {"department": "Marketing", "salary": 68000},
      {"department": "Marketing", "salary": 75000}, {"department": "Marketing", "salary": 82000},
      {"department": "HR", "salary": 45000}, {"department": "HR", "salary": 52000},
      {"department": "HR", "salary": 58000}, {"department": "HR", "salary": 65000},
      {"department": "HR", "salary": 72000}, {"department": "HR", "salary": 78000}
    ]
x: department
y: salary
title: "Salary Distribution by Department"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "Annual compensation analysis across all divisions"
metadata:
  points: auto
  source: "HR Analytics 2024"
layout:
  preset: standard
width: 600
height: 450
minWidth: 400
maxWidth: 1500

Compact Layout Preset

Minimal layout for small spaces - no legend, smaller title, collapsed messages:

View Source

type: histogram
engine: d3
data:
  source: |
    [
      {"age": 18}, {"age": 22}, {"age": 25}, {"age": 28}, {"age": 31},
      {"age": 23}, {"age": 27}, {"age": 29}, {"age": 32}, {"age": 35},
      {"age": 24}, {"age": 26}, {"age": 30}, {"age": 33}, {"age": 36},
      {"age": 38}, {"age": 41}, {"age": 44}, {"age": 47}, {"age": 50},
      {"age": 39}, {"age": 42}, {"age": 45}, {"age": 48}, {"age": 52},
      {"age": 40}, {"age": 43}, {"age": 46}, {"age": 49}, {"age": 55},
      {"age": 58}, {"age": 61}, {"age": 64}, {"age": 67}, {"age": 70}
    ]
x: age
bins: 15
title: "Age Distribution"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "Population sample"
layout:
  preset: compact
width: 400
height: 300
minWidth: 280

Dashboard Layout Preset

Silent mode for dashboards - suppresses all messages, external legend position:

View Source

type: line
engine: d3
data:
  source: |
    [
      {"timestamp": "2024-01-01T00:00", "temperature": 22.5, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T04:00", "temperature": 21.2, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T08:00", "temperature": 22.5, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T12:00", "temperature": 25.8, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T16:00", "temperature": 25.2, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T20:00", "temperature": 23.8, "sensor_id": "Sensor A"},
      {"timestamp": "2024-01-01T00:00", "temperature": 18.5, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T04:00", "temperature": 17.2, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T08:00", "temperature": 18.5, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T12:00", "temperature": 21.8, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T16:00", "temperature": 21.2, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T20:00", "temperature": 19.8, "sensor_id": "Sensor B"},
      {"timestamp": "2024-01-01T00:00", "temperature": 25.5, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T04:00", "temperature": 24.2, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T08:00", "temperature": 25.5, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T12:00", "temperature": 28.8, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T16:00", "temperature": 28.2, "sensor_id": "Sensor C"},
      {"timestamp": "2024-01-01T20:00", "temperature": 26.8, "sensor_id": "Sensor C"}
    ]
x: timestamp
y: temperature
color: sensor_id
title: "Temperature Monitoring"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
layout:
  preset: dashboard
width: 600
height: 300

Presentation Layout Preset

Large centered title with horizontal legend - ideal for presentations:

View Source

type: radial-bar
engine: d3
data:
  source: |
    [
      {"month": "Jan", "sales": 42000},
      {"month": "Feb", "sales": 38000},
      {"month": "Mar", "sales": 55000},
      {"month": "Apr", "sales": 48000},
      {"month": "May", "sales": 62000},
      {"month": "Jun", "sales": 71000},
      {"month": "Jul", "sales": 68000},
      {"month": "Aug", "sales": 75000},
      {"month": "Sep", "sales": 58000},
      {"month": "Oct", "sales": 52000},
      {"month": "Nov", "sales": 65000},
      {"month": "Dec", "sales": 85000}
    ]
x: month
y: sales
title: "2024 Monthly Sales Performance"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "Revenue by month in USD"
metadata:
  source: "Sales Dashboard"
layout:
  preset: presentation
width: 600
height: 600
maxWidth: 900

Responsive Chart with Constraints

Chart with viewBox-based fluid scaling and min/max width constraints:

View Source

type: brushable-scatter
engine: d3
data:
  source: |
    [
      {"longitude": -122.4, "latitude": 37.8, "magnitude": 4.2},
      {"longitude": -118.2, "latitude": 34.1, "magnitude": 3.8},
      {"longitude": -117.2, "latitude": 32.7, "magnitude": 4.5},
      {"longitude": 139.7, "latitude": 35.7, "magnitude": 5.2},
      {"longitude": 140.1, "latitude": 36.2, "magnitude": 4.9},
      {"longitude": -155.5, "latitude": 19.4, "magnitude": 4.3},
      {"longitude": -155.2, "latitude": 19.7, "magnitude": 3.7},
      {"longitude": -70.6, "latitude": -33.4, "magnitude": 5.5},
      {"longitude": -71.2, "latitude": -34.1, "magnitude": 4.8},
      {"longitude": 121.5, "latitude": 31.2, "magnitude": 4.2},
      {"longitude": 120.8, "latitude": 30.5, "magnitude": 3.8},
      {"longitude": 14.4, "latitude": 40.8, "magnitude": 3.9},
      {"longitude": 15.1, "latitude": 41.2, "magnitude": 4.3}
    ]
x: longitude
y: latitude
color: magnitude
title: "Global Seismic Activity"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "Earthquake events - magnitude 4.0+"
metadata:
  points: auto
  source: "USGS Earthquake Data"
layout:
  preset: standard
  minWidth: 350
  maxWidth: 1200
width: 800
height: 500

Financial Chart with Layout

Stock data with full layout treatment:

View Source

type: candlestick
engine: d3
data:
  source: |
    [
      {"date": "2024-01-02", "open": 470.5, "high": 475.2, "low": 468.8, "close": 472.5},
      {"date": "2024-01-03", "open": 472.5, "high": 478.5, "low": 470.2, "close": 476.8},
      {"date": "2024-01-04", "open": 476.8, "high": 480.2, "low": 474.5, "close": 478.2},
      {"date": "2024-01-05", "open": 478.2, "high": 482.8, "low": 476.5, "close": 480.5},
      {"date": "2024-01-08", "open": 480.5, "high": 485.2, "low": 478.8, "close": 483.2},
      {"date": "2024-01-09", "open": 483.2, "high": 488.5, "low": 481.2, "close": 486.8},
      {"date": "2024-01-10", "open": 486.8, "high": 490.2, "low": 484.5, "close": 488.5},
      {"date": "2024-01-11", "open": 488.5, "high": 492.8, "low": 486.2, "close": 490.2},
      {"date": "2024-01-12", "open": 490.2, "high": 494.5, "low": 488.8, "close": 492.8},
      {"date": "2024-01-16", "open": 492.8, "high": 498.2, "low": 490.5, "close": 496.5},
      {"date": "2024-01-17", "open": 496.5, "high": 500.8, "low": 494.2, "close": 498.2},
      {"date": "2024-01-18", "open": 498.2, "high": 502.5, "low": 496.8, "close": 500.5}
    ]
x: date
open: open
high: high
low: low
close: close
title: "SPY ETF Daily Trading"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "One year of market data"
metadata:
  points: auto
  source: "Market Data Feed"
layout:
  preset: standard
width: 1000
height: 450
minWidth: 800
maxWidth: 1200

Time Series with Metadata

Multi-line chart showcasing auto point count and source attribution:

View Source

type: streamgraph
engine: d3
data:
  source: |
    [
      {"date": "2024-01-01", "organic": 4500, "direct": 2800, "social": 1800, "referral": 1200, "paid": 800},
      {"date": "2024-01-02", "organic": 4800, "direct": 2900, "social": 1900, "referral": 1300, "paid": 850},
      {"date": "2024-01-03", "organic": 5200, "direct": 3100, "social": 2100, "referral": 1400, "paid": 900},
      {"date": "2024-01-04", "organic": 5500, "direct": 3300, "social": 2300, "referral": 1500, "paid": 950},
      {"date": "2024-01-05", "organic": 5100, "direct": 3000, "social": 2000, "referral": 1350, "paid": 880},
      {"date": "2024-01-06", "organic": 3800, "direct": 2200, "social": 2500, "referral": 900, "paid": 600},
      {"date": "2024-01-07", "organic": 3500, "direct": 2000, "social": 2800, "referral": 850, "paid": 550},
      {"date": "2024-01-08", "organic": 4600, "direct": 2850, "social": 1850, "referral": 1250, "paid": 820},
      {"date": "2024-01-09", "organic": 4900, "direct": 2950, "social": 1950, "referral": 1350, "paid": 870},
      {"date": "2024-01-10", "organic": 5300, "direct": 3150, "social": 2150, "referral": 1450, "paid": 920},
      {"date": "2024-01-11", "organic": 5600, "direct": 3350, "social": 2350, "referral": 1550, "paid": 970},
      {"date": "2024-01-12", "organic": 5200, "direct": 3050, "social": 2050, "referral": 1400, "paid": 900},
      {"date": "2024-01-13", "organic": 3900, "direct": 2250, "social": 2550, "referral": 950, "paid": 620},
      {"date": "2024-01-14", "organic": 3600, "direct": 2050, "social": 2850, "referral": 900, "paid": 570}
    ]
x: date
keys:
  - organic
  - direct
  - social
  - referral
  - paid
offset: wiggle
title: "Website Traffic Sources"
interactions:
  hover:
    enabled: true
    highlight: true
  selection:
    enabled: true
    mode: single
subtitle: "Daily page views by acquisition channel"
metadata:
  points: auto
  source: "Google Analytics"
layout:
  preset: compact
width: 900
height: 450
minWidth: 500