[{"data":1,"prerenderedAt":9},["ShallowReactive",2],{"play":3},{"markdown":4,"flintMeta":5},"---\nkpiChart:\n data:\n values:\n - region: North\n units: 340\n - region: South\n units: 290\n - region: East\n units: 410\n - region: West\n units: 375\n semantic_types:\n region: Nominal\n units: Quantity\n chart_spec:\n chartType: Bar Chart\n encodings:\n x:\n field: region\n 'y':\n field: units\n baseSize:\n width: 480\n height: 300\n---\n\n# Flint Plugin\n\nCharts are compiled at parse time — the Flint spec is assembled into a\nbackend-native spec (Vega-Lite, ECharts, …) before the page renders.\n\n## Bar chart — Vega-Lite backend\n\n::Flint\n```yaml [props]\nspec:\n config:\n view:\n continuousWidth: 560\n continuousHeight: 320\n stroke: null\n axisX:\n labelLimit: 0\n labelFontSize: 13\n titleFontSize: 13\n grid: false\n gridColor: transparent\n gridWidth: 0\n domain: true\n domainColor: '#121317'\n domainWidth: 1\n ticks: false\n tickColor: transparent\n tickWidth: 0\n tickSize: 0\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelColor: '#54585a'\n labelPadding: 7\n titleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n titleColor: '#54585a'\n titleFontWeight: 400\n labelAngle: 0\n axisY:\n labelFontSize: 13\n titleFontSize: 13\n labelSeparation: 8\n grid: true\n gridColor: '#d8dfe4'\n gridWidth: 1\n domain: false\n domainColor: transparent\n domainWidth: 0\n ticks: true\n tickColor: '#d8dfe4'\n tickWidth: 1\n tickSize: 5\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelColor: '#54585a'\n labelPadding: 7\n titleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n titleColor: '#54585a'\n titleFontWeight: 400\n labelLimit: 0\n tickCount: 7\n legend:\n labelFontSize: 10\n titleFontSize: 11\n facet:\n spacing: 32\n background: '#ffffff'\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n title:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 17\n fontWeight: 700\n color: '#121317'\n anchor: start\n orient: top\n offset: 8\n subtitleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n subtitleFontSize: 14.5\n subtitleColor: '#54585a'\n subtitlePadding: 8\n frame: bounds\n line:\n strokeWidth: 1.6\n trail:\n size: 1.6\n point: {}\n circle:\n size: 66\n square:\n size: 66\n header:\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelFontSize: 12\n labelColor: '#54585a'\n labelFontWeight: normal\n title: null\n width:\n step: 67\n background: '#ffffff'\n padding:\n left: 8\n right: 8\n top: 52\n bottom: 8\n layer:\n - mark:\n type: bar\n color: '#006ba2'\n encoding:\n x:\n field: month\n type: ordinal\n sort: null\n axis:\n title: null\n scale:\n paddingInner: 0.31999999999999995\n 'y':\n field: revenue\n type: quantitative\n scale:\n zero: true\n nice: 7\n axis:\n format: ',.12~g'\n title: null\n orient: right\n gridColor:\n condition:\n test: datum.index === 0\n value: transparent\n value: '#d8dfe4'\n - __themeSynthetic: true\n mark:\n type: text\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 12\n align: center\n baseline: top\n dy: 4\n color: '#ffffff'\n encoding:\n text:\n field: revenue\n type: quantitative\n format: .3~s\n x:\n field: month\n type: ordinal\n sort: null\n 'y':\n field: revenue\n type: quantitative\n transform:\n - filter: abs(datum[\"revenue\"]) >= 31320\n - __themeSynthetic: true\n transform:\n - filter: abs(datum[\"revenue\"]) \u003C 31320\n mark:\n type: text\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 12\n align: center\n baseline: bottom\n dy: -4\n color: '#121317'\n encoding:\n text:\n field: revenue\n type: quantitative\n format: .3~s\n x:\n field: month\n type: ordinal\n sort: null\n 'y':\n field: revenue\n type: quantitative\n usermeta:\n flintCanvasFurniture:\n - kind: mastheadTab\n x: 8\n 'y': 32\n width: 44\n height: 12\n color: '#e3120b'\n data:\n values:\n - month: Jan\n revenue: 120000\n - month: Feb\n revenue: 180000\n - month: Mar\n revenue: 150000\n - month: Apr\n revenue: 210000\n - month: May\n revenue: 190000\n - month: Jun\n revenue: 240000\n _theme:\n id: economist\n report:\n - stage: ground\n path: compileDefaults.baseSize\n message: 'house preset: `baseSize` set to {\"width\":460,\"height\":300}'\n - stage: ground\n path: layout.bandStepFit\n message: the house blends 55% toward the available span per category\n - stage: ground\n path: geometry.cell\n message: '`Bar Chart` builds no cell — the house''s cell geometry does not apply here'\n - stage: ground\n path: axes.x.label.angle\n message: the widest name needs ~22px and the band is 67px — at the house's label size they read straight\n - stage: ground\n path: legend.placement\n message: '`seriesEnd` not available for this chart — falling through'\n - stage: ground\n path: dataLabels.inkMode\n message: no ink mode declared but the label sits on the mark — it contrasts with what it is printed on\n - stage: ground\n path: annotation.numberFormat\n message: printed values use `.3~s` — three significant figures is what a reader takes off a mark, and it holds the longest label to 4 characters where the raw value runs to 6\n - stage: realize\n path: axes.y.grid\n message: the grid runs 5px past the plot to end under its own number — flush with the last mark it leads nowhere\n - stage: realize\n path: axes.y.grid\n message: the y grid drops its outermost line — the x axis already rules that edge, and a grid line over a spine repaints it in grid ink\n - stage: realize\n path: marks.point.size\n message: a dot is drawn at 66px² wherever one is drawn — the house's size, not the renderer's\n - stage: realize\n path: dataLabels.placement\n message: marks shorter than their own label print it outside instead\n - stage: realize\n path: furniture\n message: the masthead tab rides the canvas at graphic-left (8px), in a 12px band above the title — clear of the plot's axis gutter\n decisions:\n themeId: economist\n surface:\n canvas: '#ffffff'\n plot: '#ffffff'\n panel: '#ffffff'\n text:\n primary: '#121317'\n secondary: '#54585a'\n muted: '#8b9196'\n inverse: '#ffffff'\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n title:\n anchor: start\n position: top\n headline:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 17\n fontWeight: 700\n color: '#121317'\n deck:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 14.5\n color: '#54585a'\n offset: 8\n deckPadding: 8\n axes:\n 'y':\n role: measure\n orient: right\n domain:\n show: false\n color: transparent\n width: 0\n ticks:\n show: false\n color: transparent\n width: 0\n size: 0\n offset: 0\n grid:\n show: true\n color: '#d8dfe4'\n width: 1\n label:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 13\n color: '#54585a'\n limit: 0\n padding: 7\n flush: false\n title:\n show: false\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 13\n fontWeight: 400\n color: '#54585a'\n tickCount: 7\n indexing: false\n zeroRule:\n show: true\n color: '#121317'\n width: 1\n x:\n role: categorical\n orient: bottom\n domain:\n show: true\n color: '#121317'\n width: 1\n ticks:\n show: false\n color: transparent\n width: 0\n size: 0\n offset: 0\n grid:\n show: false\n color: transparent\n width: 0\n label:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 13\n color: '#54585a'\n limit: 0\n padding: 7\n flush: false\n angle: 0\n title:\n show: false\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 13\n fontWeight: 400\n color: '#54585a'\n indexing: true\n frame:\n show: false\n color: transparent\n width: 0\n baseline:\n show: true\n color: '#121317'\n width: 1\n series:\n mode: single\n single: '#006ba2'\n categorical:\n - '#006ba2'\n - '#3ebcd2'\n - '#ebb434'\n - '#379a8b'\n - '#9a3d5b'\n - '#a17ba5'\n overflow: '#b0aca1'\n status:\n positive: '#006ba2'\n negative: '#e3120b'\n neutral: '#b8c4cc'\n legend:\n show: false\n placement: top\n orient: top\n direction: horizontal\n title: false\n label:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 12\n color: '#54585a'\n maxSwatches: 3\n dataLabels:\n show: true\n possible: true\n placement: atMark\n inkMode: contrastWithMark\n text:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 12\n color: '#121317'\n format: .3~s\n insideMinValue: 31320\n outsideMaxValue: 208680\n marks:\n bandFraction: 0.68\n strokeWidth: 1.6\n point:\n show: false\n size: 66\n secondarySize: 25\n slice:\n gap: 1.5\n style: rule\n color: '#ffffff'\n connector:\n show: false\n color: '#a1a3a4'\n width: 1\n spanWidth: 1.6\n interval:\n fillOpacity: 0.22\n edge: true\n zOrder: summaryOverData\n sizeRange:\n - 10\n - 450\n redundantChannels: []\n redundantEncoding: never\n redundant:\n shape: false\n dash: false\n facets:\n header:\n show: true\n fieldTitle: false\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 12\n color: '#54585a'\n panelFrame: false\n axisRepetition: everyPanel\n layout:\n padding: 8\n density: compact\n plotWidth: 560\n xStep: 67\n canvasWidth: 560\n furniture:\n - kind: mastheadTab\n anchor: topLeft\n color: '#e3120b'\n width: 44\n height: 12\n bound:\n measureChannels:\n - 'y'\n categoricalChannel: x\n categoryField: month\n seriesCount: 1\n categoryCount: 6\n isFaceted: false\n isPartToWhole: false\n isSigned: false\n markChannel: length\n report:\n - stage: ground\n path: compileDefaults.baseSize\n message: 'house preset: `baseSize` set to {\"width\":460,\"height\":300}'\n - stage: ground\n path: layout.bandStepFit\n message: the house blends 55% toward the available span per category\n - stage: ground\n path: geometry.cell\n message: '`Bar Chart` builds no cell — the house''s cell geometry does not apply here'\n - stage: ground\n path: axes.x.label.angle\n message: the widest name needs ~22px and the band is 67px — at the house's label size they read straight\n - stage: ground\n path: legend.placement\n message: '`seriesEnd` not available for this chart — falling through'\n - stage: ground\n path: dataLabels.inkMode\n message: no ink mode declared but the label sits on the mark — it contrasts with what it is printed on\n - stage: ground\n path: annotation.numberFormat\n message: printed values use `.3~s` — three significant figures is what a reader takes off a mark, and it holds the longest label to 4 characters where the raw value runs to 6\n - stage: realize\n path: axes.y.grid\n message: the grid runs 5px past the plot to end under its own number — flush with the last mark it leads nowhere\n - stage: realize\n path: axes.y.grid\n message: the y grid drops its outermost line — the x axis already rules that edge, and a grid line over a spine repaints it in grid ink\n - stage: realize\n path: marks.point.size\n message: a dot is drawn at 66px² wherever one is drawn — the house's size, not the renderer's\n - stage: realize\n path: dataLabels.placement\n message: marks shorter than their own label print it outside instead\n - stage: realize\n path: furniture\n message: the masthead tab rides the canvas at graphic-left (8px), in a 12px band above the title — clear of the plot's axis gutter\n _width: 560\n _height: 320\n _options:\n - key: cornerRadius\n label: Corners\n type: continuous\n min: 0\n max: 15\n step: 1\n defaultValue: 0\n applicable: true\n value: 0\n - key: independentYAxis\n label: Independent Y\n type: binary\n applicable: false\n value: false\n - key: xAxisType\n label: X as\n type: discrete\n options:\n - value: temporal\n label: Temporal\n - value: nominal\n label: Discrete\n applicable: false\n - key: yAxisType\n label: Y as\n type: discrete\n options:\n - value: temporal\n label: Temporal\n - value: nominal\n label: Discrete\n applicable: false\n - key: showValueLabels\n label: Values\n type: binary\n defaultValue: false\n applicable: true\n value: true\n _transform:\n chartType:\n key: chartType\n label: Chart type\n length: 4\n index: 0\n ids:\n - default\n - type:Line Chart\n - type:Area Chart\n - type:Lollipop Chart\n labels:\n - Bar Chart\n - Line Chart\n - Area Chart\n - Lollipop Chart\n arrange:\n key: arrange\n label: Arrange\n length: 2\n index: 0\n ids:\n - default\n - flip:x-y\n labels:\n - Default\n - X ⇄ Y\n _pivot:\n key: pivot\n label: View\n length: 6\n index: 0\n ids:\n - default\n - flip:x-y\n - type:Line Chart\n - type:Area Chart\n - type:Lollipop Chart\n - flip:x-y|type:Lollipop Chart\n labels:\n - Default\n - X ⇄ Y\n - θ_→line\n - θ_→area\n - θ_→lollipop\n - X ⇄ Y · θ_→lollipop\nbackend: vegalite\ninput:\n data:\n values:\n - month: Jan\n revenue: 120000\n - month: Feb\n revenue: 180000\n - month: Mar\n revenue: 150000\n - month: Apr\n revenue: 210000\n - month: May\n revenue: 190000\n - month: Jun\n revenue: 240000\n semantic_types:\n month: Time\n revenue: Money\n chart_spec:\n chartType: Bar Chart\n encodings:\n x:\n field: month\n 'y':\n field: revenue\n baseSize:\n width: 560\n height: 320\n theme_spec: economist\nwidth: 400\nheight: 300\ntheme: economist\n```\n::\n\n## Scatter plot — Swiss theme\n\n::Flint\n```yaml [props]\nspec:\n mark:\n type: circle\n size: 52\n encoding:\n x:\n field: weight\n type: quantitative\n scale:\n zero: false\n padding: 5\n nice: false\n axis:\n format: ',.12~g'\n 'y':\n field: mpg\n type: quantitative\n scale:\n zero: false\n nice: false\n padding: 5\n domainMin: 14\n domainMax: 32\n axis:\n format: ',.12~g'\n gridColor:\n condition:\n test: datum.index === 0\n value: transparent\n value: '#e1ddd4'\n color:\n field: origin\n type: nominal\n sort: null\n scale:\n range:\n - '#e2231a'\n - '#1a1a1a'\n - '#0067a5'\n legend:\n title: null\n config:\n view:\n continuousWidth: 432\n continuousHeight: 355\n stroke: null\n axisX:\n labelLimit: 0\n labelFontSize: 11\n titleFontSize: 11\n labelSeparation: 7\n grid: false\n gridColor: transparent\n gridWidth: 0\n domain: true\n domainColor: '#1a1a1a'\n domainWidth: 1\n ticks: true\n tickColor: '#1a1a1a'\n tickWidth: 1\n tickSize: 2\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelColor: '#555555'\n labelPadding: 0\n titleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n titleColor: '#1a1a1a'\n titleFontWeight: 700\n tickCount: 10\n axisY:\n labelFontSize: 11\n titleFontSize: 11\n labelSeparation: 7\n grid: true\n gridColor: '#e1ddd4'\n gridWidth: 1\n domain: true\n domainColor: '#1a1a1a'\n domainWidth: 1\n ticks: true\n tickColor: '#1a1a1a'\n tickWidth: 1\n tickSize: 2\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelColor: '#555555'\n labelPadding: 0\n titleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n titleColor: '#1a1a1a'\n titleFontWeight: 700\n labelLimit: 0\n tickCount: 8\n legend:\n labelFontSize: 11\n titleFontSize: 11\n orient: top\n direction: horizontal\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelColor: '#555555'\n titleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n titleColor: '#8a8a8a'\n gradientLength: 200\n title: null\n facet:\n spacing: 36\n background: '#f4f1ea'\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n title:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 18\n fontWeight: 700\n color: '#1a1a1a'\n anchor: start\n orient: top\n offset: 16\n subtitleFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n subtitleFontSize: 13.5\n subtitleColor: '#555555'\n subtitlePadding: 7\n frame: bounds\n line:\n strokeWidth: 3\n strokeCap: butt\n strokeJoin: miter\n trail:\n size: 3\n rule:\n strokeCap: butt\n point:\n filled: true\n circle:\n size: 52\n filled: true\n square:\n size: 52\n filled: true\n header:\n labelFont: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n labelFontSize: 11\n labelColor: '#555555'\n labelFontWeight: normal\n title: null\n background: '#f4f1ea'\n padding: 17\n data:\n values:\n - weight: 3000\n mpg: 18\n origin: USA\n - weight: 2200\n mpg: 28\n origin: Japan\n - weight: 2500\n mpg: 24\n origin: Europe\n - weight: 3500\n mpg: 15\n origin: USA\n - weight: 1900\n mpg: 32\n origin: Japan\n - weight: 2800\n mpg: 20\n origin: Europe\n _theme:\n id: swiss\n report:\n - stage: ground\n path: compileDefaults.baseSize\n message: 'house preset: `baseSize` set to {\"width\":420,\"height\":320}'\n - stage: ground\n path: layout.bandStepFit\n message: the house blends 50% toward the available span per category\n - stage: ground\n path: annotation.numberFormat\n message: printed values use `,d` — three significant figures is what a reader takes off a mark, and it holds the longest label to 5 characters where the raw value runs to 4\n - stage: ground\n path: dataLabels.show\n message: '`whenTheyFit` resolved to false — no banded axis to key values to'\n - stage: realize\n path: axes.y.grid\n message: the y grid drops its outermost line — the x axis already rules that edge, and a grid line over a spine repaints it in grid ink\n - stage: realize\n path: marks.point.size\n message: a dot is drawn at 52px² wherever one is drawn — the house's size, not the renderer's\n - stage: realize\n path: marks.point.size\n message: the plot is opened by 5px at each end — a dot's own radius — so the outermost reading sits inside the axes instead of half outside them\n - stage: realize\n path: legend.gradientLength\n message: the ramp runs 200px — under half the 462px block, so the key stays a caption to the chart\n decisions:\n themeId: swiss\n surface:\n canvas: '#f4f1ea'\n plot: '#f4f1ea'\n panel: '#f4f1ea'\n text:\n primary: '#1a1a1a'\n secondary: '#555555'\n muted: '#8a8a8a'\n inverse: '#ffffff'\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n title:\n anchor: start\n position: top\n headline:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 18\n fontWeight: 700\n color: '#1a1a1a'\n deck:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 13.5\n color: '#555555'\n offset: 16\n deckPadding: 7\n axes:\n x:\n role: measure\n orient: bottom\n domain:\n show: true\n color: '#1a1a1a'\n width: 1\n ticks:\n show: true\n color: '#1a1a1a'\n width: 1\n size: 2\n offset: 0\n grid:\n show: false\n color: transparent\n width: 0\n label:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n color: '#555555'\n limit: 0\n padding: 0\n flush: true\n title:\n show: true\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n fontWeight: 700\n color: '#1a1a1a'\n tickCount: 10\n indexing: true\n 'y':\n role: measure\n orient: left\n domain:\n show: true\n color: '#1a1a1a'\n width: 1\n ticks:\n show: true\n color: '#1a1a1a'\n width: 1\n size: 2\n offset: 0\n grid:\n show: true\n color: '#e1ddd4'\n width: 1\n label:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n color: '#555555'\n limit: 0\n padding: 0\n flush: true\n title:\n show: true\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n fontWeight: 700\n color: '#1a1a1a'\n tickCount: 8\n indexing: false\n zeroRule:\n show: true\n color: '#1a1a1a'\n width: 1\n frame:\n show: false\n color: transparent\n width: 0\n baseline:\n show: true\n color: '#1a1a1a'\n width: 1\n series:\n mode: categorical\n single: '#e2231a'\n categorical:\n - '#e2231a'\n - '#1a1a1a'\n - '#0067a5'\n - '#f2b705'\n - '#2a7f4f'\n overflow: '#9a9a9a'\n status:\n positive: '#0067a5'\n negative: '#e2231a'\n neutral: '#9a9a9a'\n legend:\n show: true\n placement: top\n orient: top\n direction: horizontal\n title: false\n label:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n color: '#555555'\n dataLabels:\n show: false\n possible: false\n placement: outsideMark\n inkMode: fixed\n text:\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n color: '#1a1a1a'\n format: ',d'\n marks:\n bandFraction: 0.7\n strokeWidth: 3\n strokeCap: butt\n strokeJoin: miter\n point:\n show: false\n size: 52\n secondarySize: 25\n filled: true\n separator:\n show: true\n color: '#f4f1ea'\n width: 1.5\n slice:\n gap: 2\n style: rule\n color: '#f4f1ea'\n tile:\n gap: 1.5\n color: '#f4f1ea'\n connector:\n show: false\n color: '#9d9b98'\n width: 1\n spanWidth: 3\n zOrder: summaryOverData\n sizeRange:\n - 12\n - 400\n redundantChannels: []\n redundantEncoding: never\n redundant:\n shape: false\n dash: false\n facets:\n header:\n show: true\n fieldTitle: false\n font: '''Helvetica Neue'', Helvetica, Arial, sans-serif'\n fontSize: 11\n color: '#555555'\n panelFrame: false\n axisRepetition: everyPanel\n layout:\n padding: 17\n density: normal\n plotWidth: 432\n xStep: 32\n canvasWidth: 480\n furniture: []\n bound:\n measureChannels:\n - x\n - 'y'\n seriesChannel: color\n seriesField: origin\n seriesCount: 3\n categoryCount: 0\n isFaceted: false\n isPartToWhole: false\n isSigned: false\n markChannel: position\n report:\n - stage: ground\n path: compileDefaults.baseSize\n message: 'house preset: `baseSize` set to {\"width\":420,\"height\":320}'\n - stage: ground\n path: layout.bandStepFit\n message: the house blends 50% toward the available span per category\n - stage: ground\n path: annotation.numberFormat\n message: printed values use `,d` — three significant figures is what a reader takes off a mark, and it holds the longest label to 5 characters where the raw value runs to 4\n - stage: ground\n path: dataLabels.show\n message: '`whenTheyFit` resolved to false — no banded axis to key values to'\n - stage: realize\n path: axes.y.grid\n message: the y grid drops its outermost line — the x axis already rules that edge, and a grid line over a spine repaints it in grid ink\n - stage: realize\n path: marks.point.size\n message: a dot is drawn at 52px² wherever one is drawn — the house's size, not the renderer's\n - stage: realize\n path: marks.point.size\n message: the plot is opened by 5px at each end — a dot's own radius — so the outermost reading sits inside the axes instead of half outside them\n - stage: realize\n path: legend.gradientLength\n message: the ramp runs 200px — under half the 462px block, so the key stays a caption to the chart\n _width: 432\n _height: 355\n _options:\n - key: opacity\n label: Opacity\n type: continuous\n min: 0.1\n max: 1\n step: 0.1\n defaultValue: 1\n applicable: true\n value: 1\n - key: independentYAxis\n label: Independent Y\n type: binary\n applicable: false\n value: false\n - key: logScale_x\n label: Log X\n type: binary\n defaultValue: false\n applicable: false\n value: false\n - key: logScale_y\n label: Log Y\n type: binary\n defaultValue: false\n applicable: false\n value: false\n - key: includeZero_x\n label: Zero X\n type: binary\n applicable: true\n value: false\n - key: includeZero_y\n label: Zero Y\n type: binary\n applicable: true\n value: false\n _transform:\n chartType:\n key: chartType\n label: Chart type\n length: 3\n index: 0\n ids:\n - default\n - type:Strip Plot\n - type:Regression\n labels:\n - Scatter Plot\n - Strip Plot\n - Regression\n arrange:\n key: arrange\n label: Arrange\n length: 4\n index: 0\n ids:\n - default\n - flip:x-y\n - augment:column\n - flip:x-y|augment:column\n labels:\n - Default\n - X ⇄ Y\n - Color + Columns\n - X ⇄ Y · Color + Columns\n _pivot:\n key: pivot\n label: View\n length: 12\n index: 0\n ids:\n - default\n - flip:x-y\n - augment:column\n - augment:row\n - type:Strip Plot\n - type:Regression\n - flip:x-y|augment:column\n - flip:x-y|augment:row\n - flip:x-y|type:Strip Plot\n - flip:x-y|type:Regression\n - augment:column|type:Regression\n - augment:row|type:Regression\n labels:\n - Default\n - X ⇄ Y\n - Color + Columns\n - Color + Rows\n - θ_→jitter\n - θ_→trend\n - X ⇄ Y · Color + Columns\n - X ⇄ Y · Color + Rows\n - X ⇄ Y · θ_→jitter\n - X ⇄ Y · θ_→trend\n - Color + Columns · θ_→trend\n - Color + Rows · θ_→trend\nbackend: vegalite\ninput:\n data:\n values:\n - weight: 3000\n mpg: 18\n origin: USA\n - weight: 2200\n mpg: 28\n origin: Japan\n - weight: 2500\n mpg: 24\n origin: Europe\n - weight: 3500\n mpg: 15\n origin: USA\n - weight: 1900\n mpg: 32\n origin: Japan\n - weight: 2800\n mpg: 20\n origin: Europe\n semantic_types:\n weight: Quantity\n mpg: Quantity\n origin: Country\n chart_spec:\n chartType: Scatter Plot\n encodings:\n x:\n field: weight\n 'y':\n field: mpg\n color:\n field: origin\n baseSize:\n width: 480\n height: 320\n theme_spec: swiss\nwidth: 400\nheight: 300\ntheme: swiss\n```\n::\n\n## Line chart — ECharts backend\n\n::Flint\n```yaml [props]\nspec:\n tooltip:\n trigger: axis\n xAxis:\n type: category\n name: quarter\n nameLocation: middle\n nameGap: 50.4\n data:\n - Q1 2024\n - Q2 2024\n - Q3 2024\n - Q4 2024\n - Q1 2025\n axisTick:\n show: true\n alignWithLabel: true\n axisLabel:\n rotate: 90\n fontSize: 12\n nameTextStyle:\n fontSize: 12\n yAxis:\n type: value\n name: sales\n nameLocation: middle\n nameGap: 40\n axisTick:\n show: true\n axisLabel:\n rotate: 0\n fontSize: 12\n scale: false\n nameTextStyle:\n fontSize: 12\n series:\n - type: line\n data:\n - 420\n - 580\n - 510\n - 690\n - 620\n showSymbol: false\n symbol: none\n itemStyle:\n color: '#5470c6'\n grid:\n left: 86\n right: 38\n top: 36\n bottom: 81.4\n _width: 684\n _height: 417.4\n color:\n - '#5470c6'\n - '#91cc75'\n - '#fac858'\n - '#ee6666'\n - '#73c0de'\n - '#3ba272'\n - '#fc8452'\n - '#9a60b4'\n - '#ea7ccc'\n - '#d48265'\n _dataLength: 5\n _transform:\n chartType:\n key: chartType\n label: Chart type\n length: 3\n index: 0\n ids:\n - default\n - type:Area Chart\n - type:Bar Chart\n labels:\n - Line Chart\n - Area Chart\n - Bar Chart\n _pivot:\n key: pivot\n label: View\n length: 6\n index: 0\n ids:\n - default\n - type:Area Chart\n - type:Bar Chart\n - type:Bar Chart|flip:x-y\n - type:Bar Chart|type:Lollipop Chart\n - type:Bar Chart|flip:x-y|type:Lollipop Chart\n labels:\n - Default\n - θ_→area\n - θ_→bar\n - θ_→bar · X ⇄ Y\n - θ_→bar · θ_→lollipop\n - θ_→bar · X ⇄ Y · θ_→lollipop\nbackend: echarts\ninput:\n data:\n values:\n - quarter: Q1 2024\n sales: 420\n - quarter: Q2 2024\n sales: 580\n - quarter: Q3 2024\n sales: 510\n - quarter: Q4 2024\n sales: 690\n - quarter: Q1 2025\n sales: 620\n semantic_types:\n quarter: Time\n sales: Quantity\n chart_spec:\n chartType: Line Chart\n encodings:\n x:\n field: quarter\n 'y':\n field: sales\n baseSize:\n width: 560\n height: 300\nwidth: 400\nheight: 300\n```\n::\n\n## Bound spec from frontmatter (directive syntax)\n\n::Flint\n```yaml [props]\nspec:\n config:\n view:\n continuousWidth: 480\n continuousHeight: 300\n stroke: null\n axisX:\n labelLimit: 0\n labelFontSize: 11.5\n titleFontSize: 11.5\n labelAngle: 0\n labelAlign: center\n labelBaseline: top\n grid: true\n gridColor: '#9b9407'\n gridWidth: 0.5\n domain: true\n domainColor: '#111111'\n domainWidth: 4.5\n ticks: false\n tickColor: transparent\n tickWidth: 0\n tickSize: 0\n labelFont: '''Arial Black'', Arial, sans-serif'\n labelColor: '#5f0047'\n labelPadding: 2\n titleFont: '''Arial Black'', Arial, sans-serif'\n titleColor: '#1a1a1a'\n titleFontWeight: 700\n axisY:\n labelFontSize: 11.5\n titleFontSize: 11.5\n labelSeparation: 7\n grid: true\n gridColor: '#54500c'\n gridWidth: 1\n domain: true\n domainColor: '#111111'\n domainWidth: 4.5\n ticks: true\n tickColor: '#111111'\n tickWidth: 1\n tickSize: 5\n labelFont: '''Arial Black'', Arial, sans-serif'\n labelColor: '#5f0047'\n labelPadding: 0\n titleFont: '''Arial Black'', Arial, sans-serif'\n titleColor: '#1a1a1a'\n titleFontWeight: 700\n labelLimit: 0\n tickCount: 7\n legend:\n labelFontSize: 10\n titleFontSize: 11\n facet:\n spacing: 30\n background: '#fff200'\n font: '''Arial Black'', Arial, sans-serif'\n title:\n font: '''Arial Black'', ''Helvetica Neue'', Arial, sans-serif'\n fontSize: 23\n fontWeight: 700\n color: '#111111'\n anchor: start\n orient: top\n offset: 10\n subtitleFont: '''Arial Black'', Arial, sans-serif'\n subtitleFontSize: 14\n subtitleColor: '#5f0047'\n subtitlePadding: 8\n frame: bounds\n line:\n strokeWidth: 6\n strokeCap: square\n strokeJoin: miter\n point:\n filled: true\n size: 180\n stroke: '#111111'\n strokeWidth: 3\n trail:\n size: 6\n rule:\n strokeCap: square\n area:\n fillOpacity: 1\n strokeJoin: miter\n arc:\n stroke: '#111111'\n strokeWidth: 3\n strokeJoin: miter\n bar:\n strokeJoin: miter\n point:\n strokeJoin: miter\n filled: true\n stroke: '#111111'\n strokeWidth: 2.9516097302997224\n circle:\n size: 180\n filled: true\n stroke: '#111111'\n strokeWidth: 2.9516097302997224\n square:\n size: 180\n filled: true\n stroke: '#111111'\n strokeWidth: 2.9516097302997224\n header:\n labelFont: '''Arial Black'', Arial, sans-serif'\n labelFontSize: 11.5\n labelColor: '#5f0047'\n labelFontWeight: normal\n title: null\n width:\n step: 100\n background: '#fff200'\n padding:\n left: 17\n right: 17\n top: 40\n bottom: 17\n layer:\n - mark:\n type: bar\n stroke: '#111111'\n strokeWidth: 3\n color: '#ff1493'\n encoding:\n x:\n field: region\n type: nominal\n sort: null\n axis:\n title: null\n gridColor:\n condition:\n test: datum.index === 0\n value: transparent\n value: '#9b9407'\n scale:\n paddingInner: 0.16000000000000003\n 'y':\n field: units\n type: quantitative\n scale:\n zero: true\n nice: 7\n axis:\n format: ',.12~g'\n gridColor:\n condition:\n test: datum.index === 0\n value: transparent\n value: '#54500c'\n - __themeSynthetic: true\n mark:\n type: text\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n fontWeight: 700\n align: center\n baseline: top\n dy: 4\n color: '#fff200'\n encoding:\n text:\n field: units\n type: quantitative\n format: ',d'\n x:\n field: region\n type: nominal\n sort: null\n 'y':\n field: units\n type: quantitative\n transform:\n - filter: abs(datum[\"units\"]) >= 45.632999999999996\n - __themeSynthetic: true\n transform:\n - filter: abs(datum[\"units\"]) \u003C 45.632999999999996\n mark:\n type: text\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n fontWeight: 700\n align: center\n baseline: bottom\n dy: -4\n color: '#111111'\n encoding:\n text:\n field: units\n type: quantitative\n format: ',d'\n x:\n field: region\n type: nominal\n sort: null\n 'y':\n field: units\n type: quantitative\n data:\n values:\n - region: North\n units: 340\n - region: South\n units: 290\n - region: East\n units: 410\n - region: West\n units: 375\n _theme:\n id: pop\n report:\n - stage: ground\n path: compileDefaults.baseSize\n message: 'house preset: `baseSize` set to {\"width\":420,\"height\":320}'\n - stage: ground\n path: layout.bandStepFit\n message: the house blends 85% toward the available span per category\n - stage: ground\n path: axes.x.label.angle\n message: the widest name needs ~31px and the band is 100px — at the house's label size they read straight\n - stage: ground\n path: annotation.numberFormat\n message: printed values use `,d` — three significant figures is what a reader takes off a mark, and it holds the longest label to 3 characters where the raw value runs to 3\n - stage: realize\n path: axes.x.grid\n message: the x grid drops its outermost line — the y axis already rules that edge, and a grid line over a spine repaints it in grid ink\n - stage: realize\n path: marks.point.size\n message: a dot is drawn at 180px² wherever one is drawn — the house's size, not the renderer's\n - stage: realize\n path: dataLabels.placement\n message: marks shorter than their own label print it outside instead\n decisions:\n themeId: pop\n surface:\n canvas: '#fff200'\n plot: '#fff200'\n panel: '#fff200'\n text:\n primary: '#111111'\n secondary: '#5f0047'\n muted: '#8c0068'\n inverse: '#fff200'\n font: '''Arial Black'', Arial, sans-serif'\n title:\n anchor: start\n position: top\n headline:\n font: '''Arial Black'', ''Helvetica Neue'', Arial, sans-serif'\n fontSize: 23\n fontWeight: 700\n color: '#111111'\n deck:\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 14\n fontWeight: 700\n color: '#5f0047'\n offset: 10\n deckPadding: 8\n axes:\n 'y':\n role: measure\n orient: left\n domain:\n show: true\n color: '#111111'\n width: 4.5\n ticks:\n show: true\n color: '#111111'\n width: 1\n size: 5\n offset: 0\n grid:\n show: true\n color: '#54500c'\n width: 1\n label:\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n color: '#5f0047'\n limit: 0\n padding: 0\n flush: true\n title:\n show: true\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n fontWeight: 700\n color: '#1a1a1a'\n tickCount: 7\n indexing: false\n zeroRule:\n show: true\n color: '#111111'\n width: 1.5\n x:\n role: categorical\n orient: bottom\n domain:\n show: true\n color: '#111111'\n width: 4.5\n ticks:\n show: false\n color: transparent\n width: 0\n size: 0\n offset: 0\n grid:\n show: true\n color: '#9b9407'\n width: 0.5\n label:\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n color: '#5f0047'\n limit: 0\n padding: 2\n flush: true\n angle: 0\n title:\n show: false\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n fontWeight: 700\n color: '#1a1a1a'\n indexing: true\n frame:\n show: false\n color: transparent\n width: 0\n baseline:\n show: true\n color: '#111111'\n width: 1.5\n series:\n mode: single\n single: '#ff1493'\n categorical:\n - '#ff1493'\n - '#00d9ff'\n - '#ff5a1f'\n - '#7a3cff'\n - '#00c853'\n - '#111111'\n overflow: '#111111'\n status:\n positive: '#00c853'\n negative: '#ff1493'\n neutral: '#111111'\n legend:\n show: false\n placement: top\n orient: top\n direction: horizontal\n title: false\n label:\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n color: '#5f0047'\n dataLabels:\n show: true\n possible: true\n placement: atMark\n inkMode: contrastWithMark\n text:\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n fontWeight: 700\n color: '#111111'\n format: ',d'\n insideMinValue: 45.632999999999996\n outsideMaxValue: 364.367\n marks:\n bandFraction: 0.84\n strokeWidth: 6\n strokeCap: square\n strokeJoin: miter\n fillOpacity: 1\n outline:\n color: '#111111'\n width: 3\n point:\n show: true\n size: 180\n secondarySize: 25\n filled: true\n separator:\n show: true\n color: '#111111'\n width: 3\n slice:\n gap: 2\n style: rule\n color: '#111111'\n tile:\n gap: 1\n color: '#9b9407'\n connector:\n show: false\n color: '#a76d27'\n width: 1\n spanWidth: 6\n zOrder: summaryOverData\n sizeRange:\n - 12\n - 400\n redundantChannels: []\n redundantEncoding: never\n redundant:\n shape: false\n dash: false\n facets:\n header:\n show: true\n fieldTitle: false\n font: '''Arial Black'', Arial, sans-serif'\n fontSize: 11.5\n color: '#5f0047'\n panelFrame: false\n axisRepetition: everyPanel\n layout:\n padding: 17\n density: normal\n plotWidth: 480\n xStep: 100\n canvasWidth: 480\n furniture: []\n bound:\n measureChannels:\n - 'y'\n categoricalChannel: x\n categoryField: region\n seriesCount: 1\n categoryCount: 4\n isFaceted: false\n isPartToWhole: false\n isSigned: false\n markChannel: length\n report:\n - stage: ground\n path: compileDefaults.baseSize\n message: 'house preset: `baseSize` set to {\"width\":420,\"height\":320}'\n - stage: ground\n path: layout.bandStepFit\n message: the house blends 85% toward the available span per category\n - stage: ground\n path: axes.x.label.angle\n message: the widest name needs ~31px and the band is 100px — at the house's label size they read straight\n - stage: ground\n path: annotation.numberFormat\n message: printed values use `,d` — three significant figures is what a reader takes off a mark, and it holds the longest label to 3 characters where the raw value runs to 3\n - stage: realize\n path: axes.x.grid\n message: the x grid drops its outermost line — the y axis already rules that edge, and a grid line over a spine repaints it in grid ink\n - stage: realize\n path: marks.point.size\n message: a dot is drawn at 180px² wherever one is drawn — the house's size, not the renderer's\n - stage: realize\n path: dataLabels.placement\n message: marks shorter than their own label print it outside instead\n _width: 480\n _height: 300\n _options:\n - key: cornerRadius\n label: Corners\n type: continuous\n min: 0\n max: 15\n step: 1\n defaultValue: 0\n applicable: true\n value: 0\n - key: independentYAxis\n label: Independent Y\n type: binary\n applicable: false\n value: false\n - key: xAxisType\n label: X as\n type: discrete\n options:\n - value: temporal\n label: Temporal\n - value: nominal\n label: Discrete\n applicable: false\n - key: yAxisType\n label: Y as\n type: discrete\n options:\n - value: temporal\n label: Temporal\n - value: nominal\n label: Discrete\n applicable: false\n - key: showValueLabels\n label: Values\n type: binary\n defaultValue: false\n applicable: true\n value: true\n _transform:\n chartType:\n key: chartType\n label: Chart type\n length: 2\n index: 0\n ids:\n - default\n - type:Lollipop Chart\n labels:\n - Bar Chart\n - Lollipop Chart\n arrange:\n key: arrange\n label: Arrange\n length: 2\n index: 0\n ids:\n - default\n - flip:x-y\n labels:\n - Default\n - X ⇄ Y\n _pivot:\n key: pivot\n label: View\n length: 4\n index: 0\n ids:\n - default\n - flip:x-y\n - type:Lollipop Chart\n - flip:x-y|type:Lollipop Chart\n labels:\n - Default\n - X ⇄ Y\n - θ_→lollipop\n - X ⇄ Y · θ_→lollipop\nbackend: vegalite\ninput:\n data:\n values:\n - region: North\n units: 340\n - region: South\n units: 290\n - region: East\n units: 410\n - region: West\n units: 375\n semantic_types:\n region: Nominal\n units: Quantity\n chart_spec:\n chartType: Bar Chart\n encodings:\n x:\n field: region\n 'y':\n field: units\n baseSize:\n width: 480\n height: 300\n theme_spec: pop\nwidth: 400\nheight: 300\ntheme: pop\n```\n::",{"count":6,"backends":7},4,[8],"vegalite",1790092377634]