D3 Chart Reference

DataGlass renders 34 chart types through its D3 engine, organized into categories by visualization purpose. Each chart type includes configuration options for customizing appearance, data mapping, and interactivity. Browse by category below or use the quick start template to create your first chart.

Quick Start

View Source

type: bar
engine: d3
data:
  source: '[{"category": "A", "value": 30}, {"category": "B", "value": 45}, {"category": "C", "value": 28}, {"category": "D", "value": 52}]'
x: category
y: value
title: Sample Bar Chart
width: 500
height: 300

Chart Categories

Basic Charts

Foundational chart types for comparing categories, tracking trends, finding correlations, and showing proportions.

Chart	Type	Description
Bar Chart	bar	Compare values across categories with rectangular bars
Line Chart	line	Reveal trends by connecting data points in sequence
Scatter Chart	scatter	Discover correlations by plotting x/y coordinates
Area Chart	area	Emphasize magnitude with filled regions under lines
Pie Chart	pie	Display parts of a whole as angular slices
Funnel Chart	funnel	Show conversion rates through sequential stages
Gantt Chart	gantt	Display project timelines with task bars

Analysis Charts

Explore statistical distributions, identify outliers, and understand data spread across groups.

Chart	Type	Description
Boxplot	boxplot	Summarize distributions with quartiles and outliers
Histogram	histogram	Show frequency distribution across value ranges
Heatmap	heatmap	Display 2D data with color intensity
Ridgeline	ridgeline	Compare distributions with stacked density plots
Violin	violin	Combine boxplot statistics with density shapes
Contour	contour	Map 2D point density as topographic contours
Bollinger	bollinger	Overlay price data with volatility bands

Hierarchy Charts

Visualize nested relationships and tree-structured data with spatial layouts.

Chart	Type	Description
Treemap	treemap	Pack hierarchy into nested rectangles by size
Sunburst	sunburst	Arrange levels as concentric rings from center
Circle Packing	circle-packing	Nest circles within circles for containment
Dendrogram	dendrogram	Draw branching tree diagrams with connections
Icicle	icicle	Stack rectangular segments from root to leaves
Tidy Tree	tidy-tree	Lay out trees with optimized node spacing

Network Charts

Map connections, flows, and relationships between entities in your data.

Chart	Type	Description
Force-Directed	force	Arrange nodes using physics simulation
Sankey	sankey	Trace quantity flows between stages
Arc Diagram	arc-diagram	Connect ordered nodes with curved arcs
Chord	chord	Show inter-group flows around a circle
Directed Chord	directed-chord	Show directional flows with arrow ribbons
Edge Bundling	edge-bundling	Bundle dense connections into curved paths
Parallel Sets	parallel-sets	Visualize categorical data flow

Radial Charts

Transform linear charts into circular layouts using polar coordinates.

Chart	Type	Description
Radial Bar	radial-bar	Wrap bars around a central point
Radial Area	radial-area	Create radar displays in polar form

Time Series Charts

Specialized charts for temporal sequences, financial data, and period comparisons.

Chart	Type	Description
Candlestick	candlestick	Display OHLC price movements per period
Slope	slope	Compare values between two time points
Horizon	horizon	Compress series into layered color bands

Dot Charts

Preserve individual data points while preventing visual overlap.

Chart	Type	Description
Beeswarm	beeswarm	Arrange points to prevent overlap via simulation

Animation Charts

Show change over time with motion that reveals transitions between states.

Chart	Type	Description
Bar Race	bar-race	Animate ranked bars competing over time
Streamgraph	streamgraph	Flow stacked areas around a shifting baseline

---

Marks-Only Mode

Create Observable Plot-style composable visualizations using pure mark layers without a base chart type. This mode gives you complete control over what visual elements appear in your chart.

Usage

Omit the type field and specify only marks to enter marks-only mode:

View Source

engine: d3
title: Multi-Mark Composition
width: 500
height: 300
marks:
  - type: dot
    x: temperature
    y: humidity
    fill: steelblue
    r: 4
  - type: line
    x: temperature
    y: humidity
    stroke: steelblue
    strokeWidth: 2
data:
  source: '[{"temperature": 20, "humidity": 45}, {"temperature": 22, "humidity": 50}, {"temperature": 25, "humidity": 55}, {"temperature": 28, "humidity": 52}, {"temperature": 30, "humidity": 60}]'

Available Marks

Primary marks: dot, line, bar, area, text, rule, tick, frame

Statistical marks: regression, box

Network marks: link, arrow

Special marks: cell, waffle, density, hexbin, contour

See the Marks Reference for complete documentation.

---

Common Configuration

All charts share these base options:

Parameter	Type	Default	Description
type	string	required	Chart type identifier
engine	'plot' | 'd3'	'plot'	Rendering engine
x	string	required	X-axis field
y	string	required	Y-axis field
width	number	600	Chart width in pixels
height	number	400	Chart height in pixels
title	string	-	Chart title
subtitle	string	-	Chart subtitle
xLabel	string	-	X-axis label
yLabel	string	-	Y-axis label
color	string	-	Field for color encoding
colorScheme	string	'schemeCategory10'	D3 color scheme
margin	object	{top:20,right:20,bottom:30,left:40}	Chart margins

Layout Presets

layout: compact     # Minimal margins
layout: default     # Standard spacing
layout: spacious    # Extra padding
layout: presentation # Large text, wide margins

Color Schemes

colorScheme: schemeCategory10   # 10 distinct colors
colorScheme: schemeTableau10    # Tableau palette
colorScheme: schemePaired       # Paired colors
colorScheme: schemeSet3         # Pastel set