Interactive chart authoring

Encode Wiki can render responsive line, scatter-point, and grouped bar charts directly from versioned CSV or JSON data. The component adds hover, touch, and keyboard highlighting; lets readers show or hide individual series; and preserves the complete data as an accessible HTML table.

Vertical line chart

The default orientation plots the independent xField horizontally and each series value vertically.

Illustrative quality comparisonSynthetic data demonstrating two selectable series. These values are not benchmark results.

Example encoder AExample encoder B

Illustrative quality comparisondata

Bitrate (kb/s)	Example encoder A	Example encoder B
500	72.1	73.4
1000	78.3	79.8
1500	82.7	83.5
2000	85.4	86.1
3000	88.8	89.2

Synthetic demonstration data included with the site.

Horizontal line chart

Horizontal orientation transposes the visual axes while preserving the same data, tooltips, series controls, and accessible table. It is useful when the independent-axis labels or the shape of the comparison read better from top to bottom.

Illustrative horizontal quality comparisonThe same synthetic values with bitrate running vertically and quality running horizontally.

Example encoder AExample encoder B

Illustrative horizontal quality comparisondata

Bitrate (kb/s)	Example encoder A	Example encoder B
500	72.1	73.4
1000	78.3	79.8
1500	82.7	83.5
2000	85.4	86.1
3000	88.8	89.2

Synthetic demonstration data included with the site.

Vertical bar chart

Set type="bar" to compare numeric series across named categories. Vertical bars place the xField categories along the horizontal axis and grow each series value from a shared zero baseline.

Illustrative preset comparisonSynthetic categorical data demonstrating grouped vertical bars. These values are not benchmark results.

Example encoder AExample encoder B

Illustrative preset comparisondata

Preset	Example encoder A	Example encoder B
Fast	69.4	71.1
Balanced	76.8	78.2
Quality	82.5	83.4
Very slow	85.1	85.8

Synthetic demonstration data included with the site.

Horizontal bar chart

Horizontal bars put category labels on the vertical axis. This is often easier to scan when labels are long, while retaining the same hover, touch, keyboard, legend, and table behavior.

Illustrative horizontal preset comparisonThe same synthetic categorical data rendered as grouped horizontal bars.

Example encoder AExample encoder B

Illustrative horizontal preset comparisondata

Preset	Example encoder A	Example encoder B
Fast	69.4	71.1
Balanced	76.8	78.2
Quality	82.5	83.4
Very slow	85.1	85.8

Synthetic demonstration data included with the site.

CSV data

Store data in public/data/ so it is both build-time input and a downloadable source. The first row defines field names. Series fields must contain finite numbers; xField may contain category labels when type="bar".

bitrate,encoder_a,encoder_b
500,72.1,73.4
1000,78.3,79.8

Then import and embed the component in an MDX page:

import InteractiveChart from '../../../components/InteractiveChart.astro';

<InteractiveChart
  title="Quality comparison"
  summary="Describe the experiment and what the reader should notice."
  src="/data/my-comparison.csv"
  xField="bitrate"
  xLabel="Bitrate (kb/s)"
  yLabel="Quality score"
  type="line"
  orientation="vertical"
  series={[
    { field: 'encoder_a', label: 'Encoder A' },
    { field: 'encoder_b', label: 'Encoder B', color: '#89b4fa' },
  ]}
  sourceNote="Link or describe the data source and methodology."
/>

JSON data

JSON sources may be an array of row objects or an object containing a rows array. The same component properties select fields for the axes and series.

{
  "rows": [
    { "bitrate": 500, "encoder_a": 72.1, "encoder_b": 73.4 },
    { "bitrate": 1000, "encoder_a": 78.3, "encoder_b": 79.8 }
  ]
}

For small charts, pass a data array directly instead of src. Use one input method only. Keep benchmark methodology and provenance near the chart, and avoid relying on color alone to identify a series.

type="line" is the default and requires numeric values for xField. type="bar" accepts non-empty category labels or finite numbers for xField; every series field remains numeric. Set orientation="horizontal" to transpose either chart type. Omit it, or use orientation="vertical", for the conventional layout. Every variant exposes focusable marks and the complete data table.