Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
Divorce Rate by Occupation
A deterministic beeswarm transform packs 530 occupation records by divorce-rate position and employment-scaled radius.
Data Sources
5
Fields
29
Scales
2
Layers
5
Glyphs
540
line 5 / text 5 / point 530
Data Flow Diagram
Select a glyph to highlight its complete source path.
Scope
Roles
No matching flow nodes
Adjust search, scope, or role filters.
Available Data
Source metadata
ChartSpec
{
"id": "flowingdata.divorce-occupation.overall",
"data": [
{
"id": "source-metadata",
"rows": 1
},
{
"id": "occupations",
"rows": 530
},
{
"id": "occupation-beeswarm",
"rows": 530
},
{
"id": "__guide.divorce-rate-grid",
"rows": 4
},
{
"id": "__guide.divorce-rate-y",
"rows": 4
}
],
"transforms": [
{
"id": "occupation-beeswarm-layout",
"type": "layout",
"input": "occupations",
"output": "occupation-beeswarm",
"options": {
"layout": "plot",
"layoutKind": "beeswarm",
"value": "everDivorcedProxyRate",
"radiusField": "totalEmployed",
"radiusDivisor": 40,
"minRadius": 2,
"nodePadding": 1,
"iterations": 120,
"jitter": 10,
"start": 0.14,
"end": 0.5
}
}
],
"axes": [
{
"id": "divorce-rate-y",
"scale": "y",
"orientation": "left",
"tickFormat": {
"style": "percent",
"maximumFractionDigits": 0
}
}
],
"grids": [
{
"id": "divorce-rate-grid",
"scale": "y",
"orientation": "y"
}
],
"fields": [
"occCode",
"occupation",
"totalEmployed",
"everDivorcedProxyRate",
"groupCode",
"tooltip",
"tooltipEyebrow",
"tooltipTitle",
"tooltipBody",
"tooltipAccentColor",
"cx",
"cy",
"targetY",
"r",
"articleUrl",
"embedUrl",
"sourceDataset",
"extractedOn",
"divorcedSeparatedRate",
"groupTitle",
"groupShortTitle",
"groupColor",
"groupOrder",
"panelX0",
"panelX1",
"panelY0",
"panelY1",
"value",
"label"
],
"scales": [
{
"id": "y",
"type": "linear",
"domain": {
"source": "values",
"values": [
0.14,
0.5
]
}
},
{
"id": "divorceColor",
"type": "sequential",
"domain": {
"source": "values",
"values": [
0.25,
0.35,
0.45
]
}
}
],
"layers": [
{
"id": "divorce-rate-grid",
"mark": "line",
"role": "guide"
},
{
"id": "divorce-rate-y-labels",
"mark": "text",
"role": "guide"
},
{
"id": "overall-average",
"mark": "line",
"role": "guide"
},
{
"id": "overall-average-label",
"mark": "text",
"role": "guide"
},
{
"id": "occupation-points",
"mark": "point",
"role": "data"
}
]
}Resolved SceneGraph
{
"scene": "flowingdata.divorce-occupation.overall.scene",
"scales": [
{
"id": "y",
"type": "linear",
"domain": [
0.14,
0.5
],
"range": [
662,
16
],
"ticks": [
0.14,
0.23,
0.32,
0.41000000000000003,
0.5
]
},
{
"id": "divorceColor",
"type": "sequential",
"domain": [
0.25,
0.45
],
"range": [
"#44bbb1",
"#cccccc",
"#ea8b24"
],
"ticks": [
0.25,
0.3,
0.35,
0.4,
0.45
]
}
],
"layers": [
{
"id": "divorce-rate-grid",
"role": "guide",
"zIndex": 0,
"glyphs": 4
},
{
"id": "overall-average",
"role": "guide",
"zIndex": 8,
"glyphs": 1
},
{
"id": "divorce-rate-y-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 4
},
{
"id": "occupation-points",
"role": "data",
"zIndex": 20,
"glyphs": 530
},
{
"id": "overall-average-label",
"role": "guide",
"zIndex": 30,
"glyphs": 1
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
divorce-rate-grid
overall-average
divorce-rate-y-labels
occupation-points
overall-average-label
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.