Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
FD EV Price/Range (faceted)
Faceted compiler version of the FlowingData/NYT EV price-vs-range comparison.
Data Sources
16
Fields
55
Scales
0
Layers
15
Glyphs
236
rect 6 / line 14 / text 20 / path 2 / point 194
Build Path
This example is rebuilt from gallery data source ev-models-comparison-years by recipe flowingDataEvPriceRangeFaceted: 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.flowingDataEvPriceRangeFaceted",
"data": [
{
"id": "source_gallery_flowingdataevpricerangefaceted",
"rows": 194
},
{
"id": "pipeline_source_metadata_source",
"rows": 1
},
{
"id": "pipeline_all_ev_model_rows_from_embedded_nyt_data_source",
"rows": 311
},
{
"id": "pipeline_ev_rows_under_80_000_source",
"rows": 287
},
{
"id": "pipeline_trend_label_anchors_source",
"rows": 2
},
{
"id": "pipeline_facet_x_axis_anchors_source",
"rows": 6
},
{
"id": "pipeline_facet_y_axis_anchors_source",
"rows": 8
},
{
"id": "source_ev_models_with_age_flag",
"rows": 194
},
{
"id": "source_ev_models_faceted",
"rows": 194
},
{
"id": "source_facet_panels",
"rows": 2
},
{
"id": "source_model_points",
"rows": 194
},
{
"id": "source_trend_lines",
"rows": 4
},
{
"id": "source_trend_points",
"rows": 4
},
{
"id": "source_trend_label_points",
"rows": 2
},
{
"id": "source_x_axis_points",
"rows": 6
},
{
"id": "source_y_axis_points",
"rows": 8
}
],
"transforms": [
{
"id": "pipeline_model_age_flag_transform",
"type": "derive",
"input": "source_gallery_flowingdataevpricerangefaceted",
"output": "source_ev_models_with_age_flag",
"options": {
"derive": [
{
"as": "isOldModel",
"input": "year",
"op": "oneOf",
"values": [
2016,
2017,
2018,
2019
]
}
],
"errorMethod": "standardError",
"field": "year",
"fit": "contain",
"geometryField": "year",
"groupBy": [
"year"
],
"idField": "year",
"includeMax": false,
"labelField": "year",
"layoutKind": "",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [],
"orderField": "year",
"sourceField": "year",
"value": "year"
}
},
{
"id": "pipeline_model_era_labels_transform",
"type": "derive",
"input": "source_ev_models_with_age_flag",
"output": "source_ev_models_faceted",
"options": {
"derive": [
{
"as": "modelEra",
"falseValue": "New",
"input": "isOldModel",
"op": "if",
"trueValue": "Old"
},
{
"as": "facetTitle",
"falseValue": "... but not nearly so much today.",
"input": "isOldModel",
"op": "if",
"trueValue": "Price and range were closely linked a decade ago ..."
},
{
"as": "facetSubtitle",
"falseValue": "2024 to 2026 models",
"input": "isOldModel",
"op": "if",
"trueValue": "2016 to 2019 models"
}
],
"errorMethod": "standardError",
"field": "isOldModel",
"fit": "contain",
"geometryField": "isOldModel",
"groupBy": [
"isOldModel"
],
"idField": "isOldModel",
"includeMax": false,
"labelField": "isOldModel",
"layoutKind": "",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [],
"orderField": "isOldModel",
"sourceField": "isOldModel",
"value": "isOldModel"
}
},
{
"id": "pipeline_ev_facet_panel_layout_transform",
"type": "layout",
"input": "source_ev_models_faceted",
"output": "source_facet_panels",
"options": {
"errorMethod": "standardError",
"field": "modelEra",
"fit": "contain",
"geometryField": "modelEra",
"groupBy": [
"modelEra"
],
"idField": "modelEra",
"idPrefix": "ev-price-range-panel",
"includeMax": false,
"labelField": "modelEra",
"layout": "pipeline_ev_price_range_facet_grid_layout",
"layoutKind": "facetPanels",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Old",
"New"
],
"orderField": "modelEra",
"panelHeaderHeight": 80,
"sourceField": "modelEra",
"value": "modelEra",
"xEnd": 80,
"xField": "adjustedpricek",
"xStart": 28,
"yEnd": 420,
"yField": "range",
"yStart": 0
}
},
{
"id": "pipeline_ev_point_layout_transform",
"type": "layout",
"input": "source_ev_models_faceted",
"output": "source_model_points",
"options": {
"endField": "range",
"errorMethod": "standardError",
"field": "modelEra",
"fit": "contain",
"geometryField": "modelEra",
"groupBy": [
"modelEra"
],
"idField": "modelEra",
"idPrefix": "ev-price-range-point",
"includeMax": false,
"labelField": "modelEra",
"layout": "pipeline_ev_price_range_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Old",
"New"
],
"orderField": "modelEra",
"panelHeaderHeight": 80,
"parentField": "adjustedpricek",
"seriesBy": "adjustedpricek",
"sourceField": "modelEra",
"startField": "adjustedpricek",
"targetField": "adjustedpricek",
"value": "range",
"xEnd": 80,
"xField": "adjustedpricek",
"xStart": 28,
"yEnd": 420,
"yField": "range",
"yStart": 0
}
},
{
"id": "pipeline_ev_price_range_regression_transform",
"type": "regression",
"input": "source_ev_models_faceted",
"output": "source_trend_lines",
"options": {
"errorMethod": "standardError",
"field": "adjustedpricek",
"fit": "contain",
"geometryField": "adjustedpricek",
"groupBy": [
"modelEra"
],
"idField": "adjustedpricek",
"idPrefix": "ev-price-range-trend",
"includeMax": false,
"labelField": "adjustedpricek",
"layoutKind": "",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [],
"orderField": "adjustedpricek",
"parentField": "range",
"seriesBy": "range",
"sourceField": "adjustedpricek",
"start": 28,
"startField": "range",
"targetField": "range",
"value": "range",
"xField": "adjustedpricek",
"yField": "range"
}
},
{
"id": "pipeline_ev_trend_layout_transform",
"type": "layout",
"input": "source_trend_lines",
"output": "source_trend_points",
"options": {
"endField": "y",
"errorMethod": "standardError",
"field": "modelEra",
"fit": "contain",
"geometryField": "modelEra",
"groupBy": [
"modelEra"
],
"idField": "modelEra",
"idPrefix": "ev-price-range-trend-point",
"includeMax": false,
"labelField": "modelEra",
"layout": "pipeline_ev_price_range_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Old",
"New"
],
"orderField": "modelEra",
"panelHeaderHeight": 80,
"parentField": "x",
"seriesBy": "x",
"sourceField": "modelEra",
"startField": "x",
"targetField": "x",
"value": "y",
"xEnd": 80,
"xField": "x",
"xStart": 28,
"yEnd": 420,
"yField": "y",
"yStart": 0
}
},
{
"id": "pipeline_trend_label_layout_transform",
"type": "layout",
"input": "pipeline_trend_label_anchors_source",
"output": "source_trend_label_points",
"options": {
"endField": "range",
"errorMethod": "standardError",
"field": "modelEra",
"fit": "contain",
"geometryField": "modelEra",
"groupBy": [
"modelEra"
],
"idField": "modelEra",
"idPrefix": "ev-price-range-trend-label",
"includeMax": false,
"labelField": "modelEra",
"layout": "pipeline_ev_price_range_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Old",
"New"
],
"orderField": "modelEra",
"panelHeaderHeight": 80,
"parentField": "priceK",
"seriesBy": "priceK",
"sourceField": "modelEra",
"startField": "priceK",
"targetField": "priceK",
"value": "range",
"xEnd": 80,
"xField": "priceK",
"xStart": 28,
"yEnd": 420,
"yField": "range",
"yStart": 0
}
},
{
"id": "pipeline_x_axis_layout_transform",
"type": "layout",
"input": "pipeline_facet_x_axis_anchors_source",
"output": "source_x_axis_points",
"options": {
"endField": "range",
"errorMethod": "standardError",
"field": "modelEra",
"fit": "contain",
"geometryField": "modelEra",
"groupBy": [
"modelEra"
],
"idField": "modelEra",
"idPrefix": "ev-price-range-x-tick",
"includeMax": false,
"labelField": "modelEra",
"layout": "pipeline_ev_price_range_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Old",
"New"
],
"orderField": "modelEra",
"panelHeaderHeight": 80,
"parentField": "priceK",
"seriesBy": "priceK",
"sourceField": "modelEra",
"startField": "priceK",
"targetField": "priceK",
"value": "range",
"xEnd": 80,
"xField": "priceK",
"xStart": 28,
"yEnd": 420,
"yField": "range",
"yStart": 0
}
},
{
"id": "pipeline_y_axis_layout_transform",
"type": "layout",
"input": "pipeline_facet_y_axis_anchors_source",
"output": "source_y_axis_points",
"options": {
"endField": "range",
"errorMethod": "standardError",
"field": "modelEra",
"fit": "contain",
"geometryField": "modelEra",
"groupBy": [
"modelEra"
],
"idField": "modelEra",
"idPrefix": "ev-price-range-y-tick",
"includeMax": false,
"labelField": "modelEra",
"layout": "pipeline_ev_price_range_facet_grid_layout",
"layoutKind": "facetPoints",
"layoutMode": "proportionalAngle",
"mode": "normal",
"order": [
"Old",
"New"
],
"orderField": "modelEra",
"panelHeaderHeight": 80,
"parentField": "priceK",
"seriesBy": "priceK",
"sourceField": "modelEra",
"startField": "priceK",
"targetField": "priceK",
"value": "range",
"xEnd": 80,
"xField": "priceK",
"xStart": 28,
"yEnd": 420,
"yField": "range",
"yStart": 0
}
}
],
"axes": [],
"grids": [],
"legends": [],
"fields": [
"__rowLabel",
"id",
"make",
"model",
"modellabel",
"year",
"adjustedprice",
"adjustedpricek",
"baseprice",
"range",
"milesper1000dollars",
"period",
"tooltip",
"tooltipeyebrow",
"tooltiptitle",
"tooltipbody",
"tooltipaccentcolor",
"articleUrl",
"embedUrl",
"extractedOn",
"nytArticleUrl",
"sourceDataset",
"adjustedPrice",
"adjustedPriceK",
"basePrice",
"milesPer1000Dollars",
"modelLabel",
"tooltipAccentColor",
"tooltipBody",
"tooltipEyebrow",
"tooltipTitle",
"label",
"modelEra",
"priceK",
"isOldModel",
"facetSubtitle",
"facetTitle",
"averageLabel",
"averageY",
"centerX",
"height",
"labelX",
"labelY",
"panelX0",
"panelX1",
"panelY0",
"panelY1",
"plotY0",
"plotY1",
"width",
"x",
"y",
"intercept",
"rSquared",
"slope"
],
"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_ev_price_range_facet_grid_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_ev_price_range_panel_old_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_ev_price_range_panel_new_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_range_grid_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_range_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_price_tick_marks_layer",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_price_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_facet_titles_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_facet_subtitles_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_trend_lines_layer",
"mark": "path",
"role": "guide",
"path": {
"directD": false,
"areaBand": false,
"closedToY": false,
"curve": "linear",
"groupBy": [
"modelEra"
],
"sortBy": "x"
}
},
{
"id": "pipeline_trend_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_model_points_layer",
"mark": "point",
"role": "data"
}
]
}Resolved SceneGraph
{
"scene": "gallery.flowingDataEvPriceRangeFaceted.scene",
"scales": [],
"layers": [
{
"id": "create_chart_surface",
"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_ev_price_range_facet_grid_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_ev_price_range_panel_old_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_ev_price_range_panel_new_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_range_grid_layer",
"role": "guide",
"zIndex": 0,
"glyphs": 8
},
{
"id": "pipeline_range_labels_layer",
"role": "guide",
"zIndex": 8,
"glyphs": 8
},
{
"id": "pipeline_price_tick_marks_layer",
"role": "guide",
"zIndex": 8,
"glyphs": 6
},
{
"id": "pipeline_price_labels_layer",
"role": "guide",
"zIndex": 9,
"glyphs": 6
},
{
"id": "pipeline_trend_lines_layer",
"role": "guide",
"zIndex": 10,
"glyphs": 2
},
{
"id": "pipeline_model_points_layer",
"role": "data",
"zIndex": 20,
"glyphs": 194
},
{
"id": "pipeline_trend_labels_layer",
"role": "guide",
"zIndex": 25,
"glyphs": 2
},
{
"id": "pipeline_facet_titles_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 2
},
{
"id": "pipeline_facet_subtitles_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 2
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
create_chart_surface
pipeline_view_layout_surface
pipeline_plot_layout_surface
pipeline_ev_price_range_facet_grid_layout_surface
pipeline_ev_price_range_panel_old_layout_surface
pipeline_ev_price_range_panel_new_layout_surface
pipeline_range_grid_layer
pipeline_range_labels_layer
pipeline_price_tick_marks_layer
pipeline_price_labels_layer
pipeline_trend_lines_layer
pipeline_model_points_layer
pipeline_trend_labels_layer
pipeline_facet_titles_layer
pipeline_facet_subtitles_layer
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.