Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
Tufte Cancer Survival
Faceted slopegraph reproduction of Edward Tufte/Dave Nash cancer survival-rate table graphics.
Data Sources
9
Fields
44
Scales
0
Layers
17
Glyphs
273
rect 9 / line 20 / text 147 / path 1 / point 96
Build Path
This example is rebuilt from gallery data source survival-table by recipe tufteCancerSurvival: 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.tufteCancerSurvival",
"data": [
{
"id": "source_gallery_tuftecancersurvival",
"rows": 96
},
{
"id": "pipeline_source_and_extraction_notes_source",
"rows": 1
},
{
"id": "pipeline_cancer_label_anchors_source",
"rows": 31
},
{
"id": "pipeline_year_guide_anchors_source",
"rows": 16
},
{
"id": "pipeline_chart_background_layer_constants_source",
"rows": 1
},
{
"id": "source_category_panels",
"rows": 4
},
{
"id": "source_survival_points",
"rows": 96
},
{
"id": "source_cancer_label_points",
"rows": 31
},
{
"id": "source_year_guide_points",
"rows": 16
}
],
"transforms": [
{
"id": "pipeline_category_panel_layout_transform",
"type": "layout",
"input": "source_gallery_tuftecancersurvival",
"output": "source_category_panels",
"options": {
"errorMethod": "standardError",
"field": "category",
"fit": "contain",
"geometryField": "category",
"groupBy": [
"category"
],
"idField": "category",
"idPrefix": "cancer-survival-panel",
"includeMax": false,
"labelField": "category",
"layout": "pipeline_cancer_survival_facet_grid_layout",
"layoutKind": "facetPanels",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Digestive",
"Respiratory",
"Reproductive",
"Other"
],
"orderField": "category",
"panelHeaderHeight": 52,
"sourceField": "category",
"value": "category"
}
},
{
"id": "pipeline_survival_point_layout_transform",
"type": "layout",
"input": "source_gallery_tuftecancersurvival",
"output": "source_survival_points",
"options": {
"end": 100,
"endField": "survival",
"errorMethod": "standardError",
"field": "category",
"fit": "contain",
"geometryField": "category",
"groupBy": [
"category"
],
"idField": "category",
"includeMax": false,
"labelField": "category",
"layout": "pipeline_cancer_survival_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Digestive",
"Respiratory",
"Reproductive",
"Other"
],
"orderField": "category",
"panelHeaderHeight": 52,
"parentField": "year",
"seriesBy": "year",
"sourceField": "category",
"start": 0,
"startField": "year",
"targetField": "year",
"value": "survival",
"xField": "year",
"xPadding": 61,
"yField": "survival",
"yPadding": 8
}
},
{
"id": "pipeline_cancer_label_layout_transform",
"type": "layout",
"input": "pipeline_cancer_label_anchors_source",
"output": "source_cancer_label_points",
"options": {
"end": 100,
"endField": "survival",
"errorMethod": "standardError",
"field": "category",
"fit": "contain",
"geometryField": "category",
"groupBy": [
"category"
],
"idField": "category",
"includeMax": false,
"labelField": "category",
"layout": "pipeline_cancer_survival_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Digestive",
"Respiratory",
"Reproductive",
"Other"
],
"orderField": "category",
"panelHeaderHeight": 52,
"parentField": "year",
"seriesBy": "year",
"sourceField": "category",
"start": 0,
"startField": "year",
"targetField": "year",
"value": "survival",
"xField": "year",
"xPadding": 61,
"yField": "survival",
"yPadding": 8
}
},
{
"id": "pipeline_year_guide_layout_transform",
"type": "layout",
"input": "pipeline_year_guide_anchors_source",
"output": "source_year_guide_points",
"options": {
"end": 100,
"endField": "guideValue",
"errorMethod": "standardError",
"field": "category",
"fit": "contain",
"geometryField": "category",
"groupBy": [
"category"
],
"idField": "category",
"includeMax": false,
"labelField": "category",
"layout": "pipeline_cancer_survival_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Digestive",
"Respiratory",
"Reproductive",
"Other"
],
"orderField": "category",
"panelHeaderHeight": 52,
"parentField": "year",
"seriesBy": "year",
"sourceField": "category",
"start": 0,
"startField": "year",
"targetField": "year",
"value": "guideValue",
"xField": "year",
"xPadding": 61,
"yField": "guideValue",
"yPadding": 8
}
}
],
"axes": [],
"grids": [],
"legends": [],
"fields": [
"__rowLabel",
"cancerid",
"id",
"category",
"cancer",
"year",
"yearindex",
"survival",
"valuelabel",
"valuedx",
"valuedy",
"valueanchor",
"tooltip",
"tooltipeyebrow",
"tooltiptitle",
"tooltipbody",
"tooltipaccentcolor",
"articleUrl",
"extractedOn",
"sourceDataset",
"tableGraphicUrl",
"cancerId",
"labelAnchor",
"labelDx",
"labelDy",
"labelLine",
"lineDy",
"guideValue",
"yearLabel",
"height",
"width",
"x",
"y",
"averageLabel",
"averageY",
"centerX",
"labelX",
"labelY",
"panelX0",
"panelX1",
"panelY0",
"panelY1",
"plotY0",
"plotY1"
],
"scales": [],
"layers": [
{
"id": "create_chart_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_view_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_plot_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_cancer_survival_facet_grid_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_cancer_survival_panel_digestive_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_cancer_survival_panel_respiratory_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_cancer_survival_panel_reproductive_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_cancer_survival_panel_other_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_chart_background_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_facet_title_rules_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_facet_titles_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_year_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_year_tick_rules_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_survival_lines_layer",
"mark": "path",
"role": "data",
"path": {
"directD": false,
"areaBand": false,
"closedToY": false,
"curve": "linear",
"groupBy": [
"cancerId"
],
"sortBy": "yearIndex"
}
},
{
"id": "pipeline_value_labels_layer",
"mark": "text",
"role": "data"
},
{
"id": "pipeline_cancer_labels_layer",
"mark": "text",
"role": "data"
},
{
"id": "pipeline_inspection_targets_layer",
"mark": "point",
"role": "interaction"
}
]
}Resolved SceneGraph
{
"scene": "gallery.tufteCancerSurvival.scene",
"scales": [],
"layers": [
{
"id": "create_chart_surface",
"role": "context",
"zIndex": -10,
"glyphs": 1
},
{
"id": "pipeline_chart_background_layer",
"role": "context",
"zIndex": -10,
"glyphs": 1
},
{
"id": "pipeline_view_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_plot_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_cancer_survival_facet_grid_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_cancer_survival_panel_digestive_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_cancer_survival_panel_respiratory_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_cancer_survival_panel_reproductive_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_cancer_survival_panel_other_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_facet_title_rules_layer",
"role": "guide",
"zIndex": 0,
"glyphs": 4
},
{
"id": "pipeline_facet_titles_layer",
"role": "guide",
"zIndex": 2,
"glyphs": 4
},
{
"id": "pipeline_year_labels_layer",
"role": "guide",
"zIndex": 3,
"glyphs": 16
},
{
"id": "pipeline_year_tick_rules_layer",
"role": "guide",
"zIndex": 3,
"glyphs": 16
},
{
"id": "pipeline_survival_lines_layer",
"role": "data",
"zIndex": 10,
"glyphs": 1
},
{
"id": "pipeline_value_labels_layer",
"role": "data",
"zIndex": 20,
"glyphs": 96
},
{
"id": "pipeline_cancer_labels_layer",
"role": "data",
"zIndex": 30,
"glyphs": 31
},
{
"id": "pipeline_inspection_targets_layer",
"role": "interaction",
"zIndex": 40,
"glyphs": 96
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
create_chart_surface
pipeline_chart_background_layer
pipeline_view_layout_surface
pipeline_plot_layout_surface
pipeline_cancer_survival_facet_grid_layout_surface
pipeline_cancer_survival_panel_digestive_layout_surface
pipeline_cancer_survival_panel_respiratory_layout_surface
pipeline_cancer_survival_panel_reproductive_layout_surface
pipeline_cancer_survival_panel_other_layout_surface
pipeline_facet_title_rules_layer
pipeline_facet_titles_layer
pipeline_year_labels_layer
pipeline_year_tick_rules_layer
pipeline_survival_lines_layer
pipeline_value_labels_layer
pipeline_cancer_labels_layer
pipeline_inspection_targets_layer
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.