Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
EV Price and Range Comparison
Page-embedded EV model rows are split into older and recent model-year panels, then compiled into points and regression trend paths.
Data Sources
16
Fields
34
Scales
4
Layers
16
Glyphs
230
line 14 / path 2 / text 20 / point 194
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.ev-price-range",
"data": [
{
"id": "source-metadata",
"rows": 1
},
{
"id": "ev-models",
"rows": 311
},
{
"id": "ev-models-under-80k",
"rows": 287
},
{
"id": "old-price-range",
"rows": 46
},
{
"id": "recent-price-range",
"rows": 148
},
{
"id": "panels",
"rows": 2
},
{
"id": "old-trend-labels",
"rows": 1
},
{
"id": "recent-trend-labels",
"rows": 1
},
{
"id": "old-price-range-trend",
"rows": 2
},
{
"id": "recent-price-range-trend",
"rows": 2
},
{
"id": "__guide.old-range-grid",
"rows": 4
},
{
"id": "__guide.recent-range-grid",
"rows": 4
},
{
"id": "__guide.old-price-x",
"rows": 3
},
{
"id": "__guide.old-range-y",
"rows": 4
},
{
"id": "__guide.recent-price-x",
"rows": 3
},
{
"id": "__guide.recent-range-y",
"rows": 4
}
],
"transforms": [
{
"id": "old-price-range-regression",
"type": "regression",
"input": "old-price-range",
"output": "old-price-range-trend",
"options": {
"xField": "adjustedPriceK",
"yField": "range",
"start": 28,
"end": 66,
"idPrefix": "old-trend"
}
},
{
"id": "recent-price-range-regression",
"type": "regression",
"input": "recent-price-range",
"output": "recent-price-range-trend",
"options": {
"xField": "adjustedPriceK",
"yField": "range",
"start": 28,
"end": 80,
"idPrefix": "recent-trend"
}
}
],
"axes": [
{
"id": "old-price-x",
"scale": "xOld",
"orientation": "bottom",
"tickFormat": {
"prefix": "$",
"suffix": "k",
"maximumFractionDigits": 0
}
},
{
"id": "old-range-y",
"scale": "yOld",
"orientation": "left",
"tickFormat": {
"suffix": " mi.",
"maximumFractionDigits": 0
}
},
{
"id": "recent-price-x",
"scale": "xRecent",
"orientation": "bottom",
"tickFormat": {
"prefix": "$",
"suffix": "k",
"maximumFractionDigits": 0
}
},
{
"id": "recent-range-y",
"scale": "yRecent",
"orientation": "left",
"tickFormat": {
"suffix": " mi.",
"maximumFractionDigits": 0
}
}
],
"grids": [
{
"id": "old-range-grid",
"scale": "yOld",
"orientation": "y"
},
{
"id": "recent-range-grid",
"scale": "yRecent",
"orientation": "y"
}
],
"fields": [
"make",
"model",
"modelLabel",
"year",
"adjustedPrice",
"adjustedPriceK",
"basePrice",
"range",
"milesPer1000Dollars",
"period",
"tooltip",
"tooltipEyebrow",
"tooltipTitle",
"tooltipBody",
"tooltipAccentColor",
"x",
"y",
"slope",
"intercept",
"rSquared",
"title",
"subtitle",
"titleX",
"titleY",
"subtitleY",
"priceK",
"label",
"articleUrl",
"nytArticleUrl",
"embedUrl",
"sourceDataset",
"extractedOn",
"panel",
"value"
],
"scales": [
{
"id": "xOld",
"type": "linear",
"domain": {
"source": "values",
"values": [
28,
80
]
}
},
{
"id": "yOld",
"type": "linear",
"domain": {
"source": "values",
"values": [
0,
420
]
}
},
{
"id": "xRecent",
"type": "linear",
"domain": {
"source": "values",
"values": [
28,
80
]
}
},
{
"id": "yRecent",
"type": "linear",
"domain": {
"source": "values",
"values": [
0,
420
]
}
}
],
"layers": [
{
"id": "old-range-grid",
"mark": "line",
"role": "guide"
},
{
"id": "recent-range-grid",
"mark": "line",
"role": "guide"
},
{
"id": "old-price-x-tick-marks",
"mark": "line",
"role": "guide"
},
{
"id": "old-price-x-labels",
"mark": "text",
"role": "guide"
},
{
"id": "old-range-y-labels",
"mark": "text",
"role": "guide"
},
{
"id": "recent-price-x-tick-marks",
"mark": "line",
"role": "guide"
},
{
"id": "recent-price-x-labels",
"mark": "text",
"role": "guide"
},
{
"id": "recent-range-y-labels",
"mark": "text",
"role": "guide"
},
{
"id": "panel-titles",
"mark": "text",
"role": "guide"
},
{
"id": "panel-subtitles",
"mark": "text",
"role": "guide"
},
{
"id": "old-trend",
"mark": "path",
"role": "guide",
"path": {
"directD": false,
"areaBand": false,
"closedToY": false,
"curve": "linear",
"sortBy": "x"
}
},
{
"id": "recent-trend",
"mark": "path",
"role": "guide",
"path": {
"directD": false,
"areaBand": false,
"closedToY": false,
"curve": "linear",
"sortBy": "x"
}
},
{
"id": "old-trend-label",
"mark": "text",
"role": "guide"
},
{
"id": "recent-trend-label",
"mark": "text",
"role": "guide"
},
{
"id": "old-model-points",
"mark": "point",
"role": "data"
},
{
"id": "recent-model-points",
"mark": "point",
"role": "data"
}
]
}Resolved SceneGraph
{
"scene": "flowingdata.ev-price-range.scene",
"scales": [
{
"id": "xOld",
"type": "linear",
"domain": [
28,
80
],
"range": [
70,
400
],
"ticks": [
28,
41,
54,
67,
80
]
},
{
"id": "yOld",
"type": "linear",
"domain": [
0,
420
],
"range": [
396,
96
],
"ticks": [
0,
105,
210,
315,
420
]
},
{
"id": "xRecent",
"type": "linear",
"domain": [
28,
80
],
"range": [
500,
830
],
"ticks": [
28,
41,
54,
67,
80
]
},
{
"id": "yRecent",
"type": "linear",
"domain": [
0,
420
],
"range": [
396,
96
],
"ticks": [
0,
105,
210,
315,
420
]
}
],
"layers": [
{
"id": "old-range-grid",
"role": "guide",
"zIndex": 0,
"glyphs": 4
},
{
"id": "recent-range-grid",
"role": "guide",
"zIndex": 0,
"glyphs": 4
},
{
"id": "old-price-x-tick-marks",
"role": "guide",
"zIndex": 5,
"glyphs": 3
},
{
"id": "recent-price-x-tick-marks",
"role": "guide",
"zIndex": 5,
"glyphs": 3
},
{
"id": "old-trend",
"role": "guide",
"zIndex": 10,
"glyphs": 1
},
{
"id": "recent-trend",
"role": "guide",
"zIndex": 10,
"glyphs": 1
},
{
"id": "old-price-x-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 3
},
{
"id": "old-range-y-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 4
},
{
"id": "recent-price-x-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 3
},
{
"id": "recent-range-y-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 4
},
{
"id": "old-model-points",
"role": "data",
"zIndex": 20,
"glyphs": 46
},
{
"id": "recent-model-points",
"role": "data",
"zIndex": 20,
"glyphs": 148
},
{
"id": "old-trend-label",
"role": "guide",
"zIndex": 25,
"glyphs": 1
},
{
"id": "recent-trend-label",
"role": "guide",
"zIndex": 25,
"glyphs": 1
},
{
"id": "panel-titles",
"role": "guide",
"zIndex": 30,
"glyphs": 2
},
{
"id": "panel-subtitles",
"role": "guide",
"zIndex": 30,
"glyphs": 2
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
old-range-grid
recent-range-grid
old-price-x-tick-marks
recent-price-x-tick-marks
old-trend
recent-trend
old-price-x-labels
old-range-y-labels
recent-price-x-labels
recent-range-y-labels
old-model-points
recent-model-points
old-trend-label
recent-trend-label
panel-titles
panel-subtitles
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.