Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
FD Epstein Emails
Reproduction of the FlowingData/Economist monthly-email strip plot from archived article text and rendered-image geometry.
Data Sources
11
Fields
51
Scales
1
Layers
20
Glyphs
940
rect 869 / line 15 / text 56
Build Path
This example is rebuilt from gallery data source source-metadata by recipe flowingDataEpsteinEmailNetwork: raw table rows -> TabularSource -> pipeline drafts -> analyzeAuthoringDrafts() -> materialized ChartSpec -> compileChart() -> SceneGraph -> SVG. The graph below shows the authored pipeline stage.
Pipeline recipe graph
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
Imported table
ChartSpec
{
"id": "gallery.flowingDataEpsteinEmailNetwork",
"data": [
{
"id": "source_gallery_flowingdataepsteinemailnetwork",
"rows": 1
},
{
"id": "pipeline_visible_correspondent_rows_source",
"rows": 11
},
{
"id": "pipeline_reconstructed_monthly_email_cells_source",
"rows": 857
},
{
"id": "pipeline_monthly_total_legend_source_source",
"rows": 4
},
{
"id": "pipeline_timeline_tick_source_source",
"rows": 3
},
{
"id": "pipeline_chart_annotations_and_headers_source",
"rows": 5
},
{
"id": "pipeline_timeline_axis_layer_constants_source",
"rows": 1
},
{
"id": "source_correspondents",
"rows": 11
},
{
"id": "source_month_cells",
"rows": 857
},
{
"id": "source_legend",
"rows": 4
},
{
"id": "source_time_ticks",
"rows": 3
}
],
"transforms": [
{
"id": "pipeline_correspondent_row_layout_transform",
"type": "layout",
"input": "pipeline_visible_correspondent_rows_source",
"output": "source_correspondents",
"options": {
"errorMethod": "standardError",
"field": "contactId",
"fit": "contain",
"geometryField": "contactId",
"groupBy": [
"contactId"
],
"idField": "contactId",
"includeMax": false,
"labelField": "contactId",
"layout": "pipeline_monthplot_layout",
"layoutKind": "stripRows",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"ruemmler",
"krauss",
"rothschild",
"pritzker",
"wolff",
"chomsky",
"summers",
"bannon",
"hoffman",
"gates",
"musk"
],
"orderField": "contactId",
"paddingInner": 0.14,
"paddingOuter": 0.04,
"sourceField": "contactId",
"value": "contactId"
}
},
{
"id": "pipeline_monthly_cell_layout_transform",
"type": "layout",
"input": "pipeline_reconstructed_monthly_email_cells_source",
"output": "source_month_cells",
"options": {
"end": 144,
"errorMethod": "standardError",
"field": "contactId",
"fit": "contain",
"geometryField": "contactId",
"groupBy": [
"contactId"
],
"idField": "contactId",
"includeMax": false,
"itemHeight": 24,
"itemWidth": 6.8,
"labelField": "contactId",
"layout": "pipeline_monthplot_layout",
"layoutKind": "stripCells",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"ruemmler",
"krauss",
"rothschild",
"pritzker",
"wolff",
"chomsky",
"summers",
"bannon",
"hoffman",
"gates",
"musk"
],
"orderField": "contactId",
"paddingInner": 0.14,
"paddingOuter": 0.04,
"parentField": "monthIndex",
"seriesBy": "monthIndex",
"sourceField": "contactId",
"start": 0,
"startField": "monthIndex",
"targetField": "monthIndex",
"value": "monthIndex",
"xField": "monthIndex",
"yOffset": 60
}
},
{
"id": "pipeline_legend_swatch_layout_transform",
"type": "layout",
"input": "pipeline_monthly_total_legend_source_source",
"output": "source_legend",
"options": {
"errorMethod": "standardError",
"field": "estimatedMonthlyTotal",
"fit": "contain",
"geometryField": "estimatedMonthlyTotal",
"groupBy": [
"estimatedMonthlyTotal"
],
"idField": "estimatedMonthlyTotal",
"includeMax": false,
"itemGap": 4,
"itemHeight": 16,
"itemWidth": 54,
"labelField": "estimatedMonthlyTotal",
"labelXOffset": 10,
"layout": "pipeline_legend_strip_layout",
"layoutKind": "legendSwatches",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [],
"orderField": "estimatedMonthlyTotal",
"sourceField": "estimatedMonthlyTotal",
"value": "estimatedMonthlyTotal",
"yOffset": 10
}
},
{
"id": "pipeline_timeline_tick_layout_transform",
"type": "layout",
"input": "pipeline_timeline_tick_source_source",
"output": "source_time_ticks",
"options": {
"end": 144,
"errorMethod": "standardError",
"field": "monthIndex",
"fit": "contain",
"geometryField": "monthIndex",
"groupBy": [
"monthIndex"
],
"idField": "monthIndex",
"includeMax": false,
"labelOffset": 30,
"labelField": "monthIndex",
"layout": "pipeline_monthplot_layout",
"layoutKind": "timelineTicks",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [],
"orderField": "monthIndex",
"sourceField": "monthIndex",
"start": 0,
"tickSize": 8,
"value": "monthIndex",
"xField": "monthIndex"
}
}
],
"axes": [],
"grids": [],
"legends": [],
"fields": [
"__rowLabel",
"id",
"flowingdataarticleurl",
"economistarticleurl",
"economistarchiveurl",
"imageurl",
"sourcedataset",
"upstreamsources",
"extractedon",
"contactId",
"name",
"order",
"ratioColor",
"role",
"roleX",
"sentReceivedRatio",
"sentReceivedRatioText",
"totalEmails",
"totalEmailsText",
"bucket",
"estimatedMonthlyTotal",
"month",
"monthIndex",
"samplePixels",
"sampledRgb",
"sortKey",
"sourceXPixel",
"tooltip",
"tooltipAccentColor",
"tooltipBody",
"tooltipEyebrow",
"tooltipTitle",
"year",
"yearMonth",
"label",
"fill",
"fontSize",
"fontWeight",
"text",
"textAnchor",
"x",
"y",
"x1",
"x2",
"y1",
"y2",
"bandHeight",
"height",
"width",
"labelX",
"labelY"
],
"scales": [
{
"id": "pipeline_monthlytotalcolor_color_scale",
"type": "threshold",
"domain": {
"source": "values",
"values": [
10,
50,
100
],
"includeZero": false,
"order": "input",
"reverse": false,
"symmetric": false
}
}
],
"layers": [
{
"id": "create_chart_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_view_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_chart_shell_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_monthplot_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_table_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_ratio_column_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_total_column_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_legend_strip_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_row_separators_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_timeline_axis_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_timeline_ticks_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_monthly_email_cells_layer",
"mark": "rect",
"role": "data"
},
{
"id": "pipeline_legend_swatches_layer",
"mark": "rect",
"role": "guide"
},
{
"id": "pipeline_header_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_legend_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_contact_names_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_contact_roles_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_sent_received_ratio_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_total_emails_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_timeline_tick_labels_layer",
"mark": "text",
"role": "guide"
}
]
}Resolved SceneGraph
{
"scene": "gallery.flowingDataEpsteinEmailNetwork.scene",
"scales": [
{
"id": "pipeline_monthlytotalcolor_color_scale",
"type": "threshold",
"domain": [
10,
50,
100
],
"range": [
"#f0efea",
"#dddbcf",
"#eda494",
"#d5342a"
],
"ticks": [
10,
50,
100
]
}
],
"layers": [
{
"id": "create_chart_surface",
"role": "context",
"zIndex": -10,
"glyphs": 1
},
{
"id": "pipeline_view_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_chart_shell_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_monthplot_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_table_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_ratio_column_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_total_column_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_legend_strip_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_row_separators_layer",
"role": "guide",
"zIndex": 0,
"glyphs": 11
},
{
"id": "pipeline_timeline_axis_layer",
"role": "guide",
"zIndex": 5,
"glyphs": 1
},
{
"id": "pipeline_timeline_ticks_layer",
"role": "guide",
"zIndex": 6,
"glyphs": 3
},
{
"id": "pipeline_timeline_tick_labels_layer",
"role": "guide",
"zIndex": 6,
"glyphs": 3
},
{
"id": "pipeline_monthly_email_cells_layer",
"role": "data",
"zIndex": 15,
"glyphs": 857
},
{
"id": "pipeline_legend_swatches_layer",
"role": "guide",
"zIndex": 20,
"glyphs": 4
},
{
"id": "pipeline_legend_labels_layer",
"role": "guide",
"zIndex": 25,
"glyphs": 4
},
{
"id": "pipeline_header_labels_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 5
},
{
"id": "pipeline_contact_names_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 11
},
{
"id": "pipeline_contact_roles_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 11
},
{
"id": "pipeline_sent_received_ratio_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 11
},
{
"id": "pipeline_total_emails_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 11
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
create_chart_surface
pipeline_view_layout_surface
pipeline_chart_shell_layout_surface
pipeline_monthplot_layout_surface
pipeline_table_layout_surface
pipeline_ratio_column_layout_surface
pipeline_total_column_layout_surface
pipeline_legend_strip_layout_surface
pipeline_row_separators_layer
pipeline_timeline_axis_layer
pipeline_timeline_ticks_layer
pipeline_timeline_tick_labels_layer
pipeline_monthly_email_cells_layer
pipeline_legend_swatches_layer
pipeline_legend_labels_layer
pipeline_header_labels_layer
pipeline_contact_names_layer
pipeline_contact_roles_layer
pipeline_sent_received_ratio_layer
pipeline_total_emails_layer
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.