Split View: 웹 데이터 시각화 라이브러리 2026 — D3·Plot·Visx·Recharts·ECharts·Vega-Lite를 한 번에 비교한다 (심층 가이드)

Web Data Visualization Libraries 2026 — D3, Plot, Visx, Recharts, ECharts, Vega-Lite Compared (Deep Dive)

Prologue — Why are there so many chart libraries?

Anyone shipping their first web chart eventually asks: "Which one should I use?" The answer is always the same: "What do you want to draw?"

It sounds dismissive, but it is the real answer. The 2026 chart ecosystem doesn't collapse to a single dimension. There are at least four axes.

• Abstraction level — do you want to touch every pixel, or hand over a JSON blob and be done?
• Framework affinity — React, Vue/Svelte, or plain vanilla?
• Data scale — 1,000 points, 1,000,000, or 100,000,000?
• Interaction depth — static infographic, live dashboard, or analytical UI?

Where you stand on those four axes turns the same "bar chart" into 80 lines of D3, 3 lines of Plot, or 12 lines of Recharts. Fewer lines is not better. It is less freedom.

As of May 2026, the landscape in one breath:

• D3.js v7 — still the base of every abstraction. About 8M weekly npm downloads. You write it directly less often, but every tool you use stands on it.
• Observable Plot 0.7 — the grammar-of-graphics layer from D3's maintainers. The spirit of ggplot2 ported to JavaScript.
• Visx 3.x — Airbnb's React + D3 primitives. Activity has cooled, but it's alive, and still the best fit for component-first React teams.
• Recharts 2.15 — the React-friendly default. The fastest path for small dashboards.
• Apache ECharts 6 — the v6 major dropped late 2025. Dual Canvas/SVG renderer, a huge chart catalog, the de facto standard in Chinese and Japanese enterprise.
• Vega-Lite 5.20 — one JSON blob is the chart. Pairs beautifully with auto-generated analytical reports.
• Plotly.js 2.35 — interactive scientific and financial charts. 3D and maps too.
• Chart.js 4.5 — Canvas-based, the lightest way to start.
• AntV G2 / G6 5 — Alibaba's chart (G2) and graph/network (G6) family.
• Nivo 0.99 — React + D3 with the prettiest defaults. Sits well on commercial sites.
• Deck.gl 9 / regl 2 — WebGL/WebGPU-powered visualization for millions of points.

This article walks that landscape as an abstraction ladder — from the lowest (D3) to the highest (Vega-Lite, Superset/Metabase). Then we write the same chart in four libraries and leave a decision table for what to pick when.

1. The abstraction ladder — D3 to Plot to wrappers

The first thing to look at when choosing a chart library is abstraction level. At which layer are you solving the same problem (turn data into pixels)?

[ highest ]
  Superset / Metabase           (SQL -> chart, the user clicks; done)
  Vega-Lite (JSON spec)          (declarative grammar)
  Recharts / Nivo / Chart.js    (component defaults)
  Observable Plot                (grammar + JS API)
  Visx / AntV G2                 (D3-on-top component / language abstractions)
  D3.js                          (scales, axes, shapes, selections)
  Canvas 2D / SVG                (browser primitives)
  WebGL / WebGPU                 (GPU)
[ lowest ]

The higher you climb, the faster you start, but the narrower the freedom. The lower you go, the more pixels you grab — and the more lines you write.

Three practical rules:

1. If the chart you need looks like something in a library's gallery, start one or two rungs up. Recharts / Nivo / ECharts / Plot covers 80% of dashboards.
2. If it's not in any gallery, drop one rung. "Two axes, an arrow floating on top, click opens a side panel" — that's Plot or Visx territory.
3. If that still won't fly, drop to D3. Sankey / Force / Geo and similar non-standard shapes, or extreme performance ("500k points zooming at 60fps").

For pieces meant for an audience (blog diagrams, research reports), do 80% with Plot, 20% with D3. For dashboards inside a product, do 80% with Recharts / ECharts, 20% with Visx / D3.

2. D3.js — the mother of every abstraction

D3 is not a chart library. Precisely, it is a data-to-DOM mapping library, and charts are just one application of it.

Three core abstractions make D3 click.

Scale

Maps a data domain (e.g. 0–1,000,000) to a pixel range (e.g. 0–600). Variants:

• scaleLinear, scaleLog, scaleSqrt, scaleTime — continuous
• scaleBand, scalePoint, scaleOrdinal — discrete
• scaleSequential, scaleQuantize — color

import * as d3 from 'd3'

const x = d3.scaleBand()
  .domain(data.map(d => d.month))
  .range([60, 740])
  .padding(0.2)

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.revenue)])
  .range([460, 20])

Selection and join

Bind DOM elements to data. d3.select, selectAll, .data(), .join().

const svg = d3.select('#chart').append('svg')
  .attr('width', 800).attr('height', 480)

svg.selectAll('rect.bar')
  .data(data)
  .join('rect')
    .attr('class', 'bar')
    .attr('x', d => x(d.month))
    .attr('y', d => y(d.revenue))
    .attr('width', x.bandwidth())
    .attr('height', d => 460 - y(d.revenue))
    .attr('fill', '#4f46e5')

This is the "heart" of D3 code. When data changes, a single .join() handles enter / update / exit.

Shape generator

Produces line / area / arc path strings. d3.line, d3.area, d3.arc, d3.pie. Import per module (tree-shaking).

When you still reach for D3 directly in 2026

Honestly, less and less. The rungs above have gotten too good. Still, D3 directly when:

• Non-standard shapes — Sankey, Chord, Sunburst, Voronoi, Force-directed, Hexbin.
• Interaction is the essence of the chart — zoom, drag, rubber-band, brush make up more than half of the chart.
• You need to control performance — drawing to Canvas directly, virtual scroll, requestAnimationFrame choreography.
• You're building a chart library — Visx, Plot, and Recharts all use D3 modules internally.

One D3 trap. Since v6/7 the modules are split. Importing only d3-scale, d3-shape, d3-array keeps the bundle in the ~50KB range. import * as d3 from 'd3' is convenient but pulls close to 250KB.

3. Observable Plot — the grammar layer on top of D3

The high-level API built by D3's maintainers. One-line summary: "ggplot2 in JavaScript."

If you don't know ggplot2, the idea of a "grammar of graphics" is to decompose a chart into layers, marks, scales, encodings and compose them. Bars, points, lines are all the same abstraction called a "mark".

The same bar chart that took 25 lines of D3 becomes:

import * as Plot from '@observablehq/plot'

const chart = Plot.plot({
  marginLeft: 60,
  y: { grid: true, label: 'Revenue (USD)' },
  x: { label: 'Month' },
  marks: [
    Plot.barY(data, { x: 'month', y: 'revenue', fill: '#4f46e5' }),
    Plot.ruleY([0])
  ]
})

document.getElementById('chart').append(chart)

Five lines. And those five lines sit directly on D3, so when you need to, you can drop a rung. Grid, scales, axes, and legends come with reasonable defaults, and Plot.plot handles interactions, areas, heatmaps, boxplots, and maps in one place.

Where Plot stands in 2026

• Version 0.7 (late 2025). Pre-1.0, but production-stable.
• Paired with Observable Framework (static-site data pages), it has become close to the standard for data journalism and internal dashboards.
• Works inside React / Vue / Svelte (it returns a DOM node — just appendChild).
• Interactions are handled by interaction marks like Plot.crosshair, Plot.tooltip, Plot.pointer.

Where Plot doesn't fit

• Custom visualizations that need pixel-level control.
• Single charts with heavy interactions (drag + multi-select + side-panel sync).
• More than a million points — there's a Canvas render mode (Plot.dot with the render: Plot.renderCanvas option), but the core is SVG.

One line: for blog diagrams, research reports, and data journalism, Plot is almost always enough.

4. Visx — Airbnb's React + D3 primitives

Visx re-wraps D3 modules as React components. Not a chart library, a toolkit for building charts.

• @visx/scale — D3 scales with a React-friendly interface.
• @visx/shape — Bar, Line, Area, Pie path components.
• @visx/axis, @visx/grid, @visx/legend.
• @visx/tooltip — a tooltip hook with positioning baked in.
• @visx/responsive — ParentSize for tracking container width.

The strengths are clear.

• Pure React — everything lives inside the virtual DOM. No useEffect escape hatch.
• Tree-shaking — import only what you need.
• TypeScript — types are accurate.

import { scaleBand, scaleLinear } from '@visx/scale'
import { Bar } from '@visx/shape'
import { Group } from '@visx/group'
import { AxisBottom, AxisLeft } from '@visx/axis'

function RevenueChart({ data, width = 800, height = 480 }) {
  const xScale = scaleBand({
    domain: data.map(d => d.month),
    range: [60, width - 20],
    padding: 0.2,
  })
  const yScale = scaleLinear({
    domain: [0, Math.max(...data.map(d => d.revenue))],
    range: [height - 30, 20],
  })
  return (
    <svg width={width} height={height}>
      <Group>
        {data.map(d => (
          <Bar
            key={d.month}
            x={xScale(d.month)}
            y={yScale(d.revenue)}
            width={xScale.bandwidth()}
            height={(height - 30) - yScale(d.revenue)}
            fill="#4f46e5"
          />
        ))}
      </Group>
      <AxisLeft scale={yScale} left={60} />
      <AxisBottom scale={xScale} top={height - 30} />
    </svg>
  )
}

Where Visx stands in 2026

Honestly, the activity has slowed. Majors come less often, issue throughput has dropped. Still:

• Maintenance is alive (patch releases shipped in late 2025).
• For React devs who need D3 primitives, it remains the first pick.
• Airbnb uses it internally, so it won't disappear.

One line: the exact spot where "Recharts / Nivo feel too rigid, but I'm not going down to raw D3" lands.

5. Recharts — king of React-friendly defaults

Recharts is the poster child of "start fast, go far enough". As of May 2026 it's at v2.15. There's a v3 beta around but 2.15 is the production standard.

The same bar chart:

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'

function RevenueChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={480}>
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="revenue" fill="#4f46e5" />
      </BarChart>
    </ResponsiveContainer>
  )
}

Twelve lines. Responsive, tooltip, axes, grid — all on by default. 80% of SaaS dashboards stop here.

Where Recharts really shines

• Composes cleanly as React components — state flows in and out of React.
• Composition — mixing Bar + Line + Area in one chart feels natural.
• Responsive — one ResponsiveContainer line.
• TypeScript types are sensible.

Recharts weaknesses

• SVG-based — past 5,000 nodes it gets sluggish; past 10,000 it's heavy.
• Advanced interactions cap out — deep zoom / brush / multi-select push you toward Plot or Visx.
• Visually plain — design tone needs a designer's pass.

One line: for internal dashboards, BI widgets, and blog charts, start with Recharts. If it stops working, drop a rung.

6. Apache ECharts 6 — the enterprise beast

The ECharts 6 that landed in November 2025 is closer to a visualization platform than a chart library. An official Apache Foundation project.

Quick characteristics:

• Dual Canvas + SVG renderer — same option object draws both. Canvas for big data, SVG for print / vector.
• Huge chart catalog — Bar/Line/Scatter is the baseline; Sankey, Tree, Treemap, Sunburst, Funnel, Gauge, Radar, Parallel, BoxPlot, Heatmap, Calendar, Graph, Map (GeoJSON), 3D (echarts-gl) — all in.
• Declarative options — one JSON blob is the chart (spirit similar to Vega-Lite).
• Responsive — one resize call.
• WebGL backend — echarts-gl for million-point scatter / 3D maps.

Same bar chart:

import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])

const chart = echarts.init(document.getElementById('chart'))
chart.setOption({
  xAxis: { type: 'category', data: data.map(d => d.month) },
  yAxis: { type: 'value' },
  tooltip: { trigger: 'axis' },
  series: [{ type: 'bar', data: data.map(d => d.revenue), itemStyle: { color: '#4f46e5' } }],
})

Why ECharts is strong

• Chart variety — for Bar/Line only, Recharts is nicer. ECharts is almost the only single library where Sunburst, Sankey, Radar, Map, and Calendar Heatmap all live together.
• Big-data handling — Canvas baseline plus progressive rendering means 500k-point scatter is natural.
• Theme system — swap the entire tone via a JSON theme.
• i18n — multilingual was a premise from day one.

ECharts weaknesses

• Bundle size — full build is over 1MB. Modular imports are mandatory.
• React affinity — you manage init / dispose by hand. Wrappers like echarts-for-react exist.
• Huge API surface — option objects are deep. A single option line can swing the output dramatically.

One line: for "a BI with a wild chart variety" or "a heavy-interaction dashboard with lots of data", reach for ECharts.

7. Vega-Lite — JSON blob becomes a chart

A declarative grammar out of the University of Washington. One JSON object defines a chart.

import { default as vegaEmbed } from 'vega-embed'

vegaEmbed('#chart', {
  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
  data: { values: data },
  mark: { type: 'bar', color: '#4f46e5' },
  encoding: {
    x: { field: 'month', type: 'ordinal' },
    y: { field: 'revenue', type: 'quantitative' },
  },
})

That's it. And that JSON spec is versionable, easy for humans to read and write, and trivial to auto-generate.

Where it shines

• Auto-generated analytical reports — let an LLM look at the data and emit a JSON spec; that spec is the chart. Vega-Lite turns out to be unexpectedly well-fitted to the LLM era.
• Data journalism — keeps the chart "spec" separate from code.
• Jupyter / Altair pairing — Python's Altair emits the same spec. Charts drawn in a notebook port straight to the web.

Weaknesses

• Interaction depth — basic selection syntax exists, but integrations like "clicking a chart updates external React state" need real work.
• Bundle — Vega + Vega-Lite + vega-embed isn't featherweight.

One line: if you want to treat the chart's data / spec systemically, pick Vega-Lite.

8. The rest — Plotly, Chart.js, AntV, Nivo

One line each.

• Plotly.js 2.35 — the classic for science / finance interactive charts. Strong 3D, geo, financial (OHLC, candlestick). Heavy bundle (700KB+ even without MathJax). plotly.js-basic-dist for partial imports is the answer.
• Chart.js 4.5 — Canvas-based, light and friendly, chart variety is narrow. Fine first library for small projects.
• AntV G2 5 / G6 5 — Alibaba's chart (G2) and graph/network (G6). Graph viz with G6 is easier than D3-Force. Strong in China and Japan.
• Nivo 0.99 — React + D3 with the prettiest defaults. Pairs with commercial sites and landing pages. Downsides: bundle is large, customization depth is narrower than Recharts / Visx.

9. The same bar chart in four libraries — at a glance

Monthly revenue ([{month: 'Jan', revenue: 12400}, ...]) as bars. Same data, four approaches.

D3 (low level)

import * as d3 from 'd3'

const width = 800, height = 480, margin = { top: 20, right: 20, bottom: 30, left: 60 }
const svg = d3.select('#chart').append('svg').attr('width', width).attr('height', height)

const x = d3.scaleBand().domain(data.map(d => d.month))
  .range([margin.left, width - margin.right]).padding(0.2)
const y = d3.scaleLinear().domain([0, d3.max(data, d => d.revenue)]).nice()
  .range([height - margin.bottom, margin.top])

svg.append('g').attr('transform', `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x))
svg.append('g').attr('transform', `translate(${margin.left},0)`).call(d3.axisLeft(y))

svg.selectAll('rect.bar').data(data).join('rect')
  .attr('class', 'bar')
  .attr('x', d => x(d.month))
  .attr('y', d => y(d.revenue))
  .attr('width', x.bandwidth())
  .attr('height', d => y(0) - y(d.revenue))
  .attr('fill', '#4f46e5')

Freedom 100. Lines 25. Interactions added separately.

Observable Plot (grammar)

import * as Plot from '@observablehq/plot'

const chart = Plot.plot({
  marginLeft: 60,
  y: { grid: true, label: 'Revenue (USD)' },
  marks: [
    Plot.barY(data, { x: 'month', y: 'revenue', fill: '#4f46e5', tip: true }),
    Plot.ruleY([0]),
  ],
})
document.getElementById('chart').append(chart)

Freedom 70. Lines 8. Tooltip in one option.

Recharts (React components)

import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts'

function RevenueChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={480}>
      <BarChart data={data} margin={{ top: 20, right: 20, bottom: 30, left: 60 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="revenue" fill="#4f46e5" />
      </BarChart>
    </ResponsiveContainer>
  )
}

Freedom 60. Lines 12. React composition friendly.

ECharts (declarative options)

import * as echarts from 'echarts'

const chart = echarts.init(document.getElementById('chart'))
chart.setOption({
  grid: { left: 60, right: 20, top: 20, bottom: 30 },
  xAxis: { type: 'category', data: data.map(d => d.month) },
  yAxis: { type: 'value', name: 'Revenue (USD)' },
  tooltip: { trigger: 'axis' },
  series: [{ type: 'bar', data: data.map(d => d.revenue), itemStyle: { color: '#4f46e5' } }],
})
window.addEventListener('resize', () => chart.resize())

Freedom 80. Lines 11. One option blob.

Line counts look similar — what really differs?

Looking only at line counts hides the real distance. The real differences:

• D3 — when data changes, when the mouse hovers, when you zoom, you write every behaviour by hand.
• Plot — chart-shaped unit. Interactions via options. Integrating with external state is weak.
• Recharts — everything flows through React state. state.month flips and the chart redraws immediately.
• ECharts — chart.setOption() swaps the whole thing. Inside React you synchronize via useEffect yourself.

If the chart is one piece of the app, lean Recharts / Visx. If data turning into a picture is the essence, lean Plot / ECharts / D3.

10. Big data — Canvas, WebGL, Deck.gl, regl

This is a different game. Up to ~10k points SVG holds. Past 100k, go Canvas. Past 1M, go WebGL.

Why SVG slows down

Each SVG point is a DOM node. 100,000 points = 100,000 nodes. Browser layout / paint cost scales linearly with node count. Past 5k–10k nodes interactions go sticky, past 100k the page itself is heavy.

Canvas 2D — first step

Canvas paints pixels inside one node (the canvas element). One DOM node for a million points. The catch: you write hit-testing (which point is under the mouse) by hand.

Canvas modes per library:

• D3 — draw directly via canvas.getContext('2d'). D3 scales and shapes still apply.
• Plot — Canvas marks like Plot.dot(..., { render: Plot.renderCanvas }).
• Chart.js / ECharts — Canvas by default.
• Recharts / Visx — SVG by default. Canvas mode is absent or limited.

WebGL — second step

GPU draws points. A million points is light.

• regl 2.x — a thin functional wrapper around WebGL. Pairs cleanly with D3 / Plot — "scales in JS, drawing on GPU".
• Deck.gl 9 — Uber's GPU visualization framework. 100M points on a map (Mapbox GL / MapLibre / Google Maps), 3D buildings, heatmaps, trails. The most natural home for data viz plus maps.
• PixiJS / Three.js + instancing — not general viz, but used for million-point scatter occasionally.

WebGPU — next step

January 2026 brought WebGPU to baseline across major browsers. Viz libraries follow slowly.

• Deck.gl ships an experimental WebGPU renderer in 9.x.
• regl-gpu sees use in some projects.
• Full-blown adoption likely late 2026 to 2027.

Million-point scatter — what do you use?

Decision flow:

1. On a map? Deck.gl — no second thought.
2. No map, just scatter? regl + D3 scales — 100–300 lines covers it.
3. Want quick start with a familiar chart pattern? ECharts 6 + progressive rendering — one option line.
4. Already on Three.js? InstancedMesh.

11. Decision framework — what to use when

One table.

12. Anti-patterns — common mistakes in the wild

Five things you see repeatedly.

1. Live 5,000-point scatter with Recharts (SVG) — switch to Canvas / ECharts; it springs back to life immediately.
2. Importing the full Plotly build to draw one chart — flee to plotly.js-basic-dist or ECharts.
3. Writing 80 lines of D3 for a bar chart — Plot / Recharts ends it in 5–12 lines.
4. Missing dispose() for ECharts inside React — memory leak. The useEffect cleanup function is mandatory.
5. Mixing multiple chart libraries on one page — bundle explosion plus design-tone mismatch. Pick one and go all the way.

13. The BI consumer side — Superset, Metabase, Lightdash

One more branch. The path of not writing charts yourself.

• Apache Superset — 60+ chart types, ECharts-based, free self-hostable. Downside: heavy to operate.
• Metabase — the most user-friendly self-service BI. Non-technical users build charts without queries. Open-core plus cloud.
• Lightdash — BI on top of dbt. Metric definitions stay in dbt, the visualization layer sits on top. Data-engineering-friendly.
• Grafana — specialized for time-series / observability. It's also a viz library in itself (public panels).

The era where data teams write charts in code is gradually ending. The charts developers ship are shrinking; the charts BI tools ship are growing. That's the macro picture of 2026.

Epilogue — Which rung do you stand on?

Web data visualization is a ladder. The higher you climb, the faster but the narrower. The lower you go, the slower but the freer. One line to remember from the 2026 landscape.

• Top 80% — Recharts (React), ECharts (universal), Plot (blog / report) cover almost everything.
• Middle 15% — deep interactions push you to Visx; non-standard shapes to D3.
• Bottom 5% — million-point or map-overlay viz goes Deck.gl / regl / WebGL / WebGPU.

That ratio roughly tracks library popularity. And in the middle, D3 is invisibly underneath everything. Each time you pick a library, peek once at how that library uses D3 modules — that's how you build the taste for picking the next one.

12-item checklist

1. Does the chart compose naturally as a React component?
2. When data crosses 5,000 points, did you move from SVG to Canvas / WebGL?
3. For giant libraries like ECharts / Plotly, are you using modular imports?
4. Are two or more chart libraries on the same page?
5. Is responsiveness handled (ResizeObserver or the library's default)?
6. Is the color palette colorblind-friendly (viridis / cividis etc.)?
7. Is a non-zero y-axis baseline made explicit to the user?
8. Are tooltips / focus reachable via keyboard?
9. Can the underlying data be downloaded as CSV / JSON?
10. Is there a print / PDF-safe SVG mode?
11. Did the bundle analyzer confirm tree-shaking for the chart library?
12. Was i18n (labels, dates, number format) built in from the start?

Next post preview

Candidate next titles: "D3 + WebGL million-point scatter at 60fps", "Letting an LLM draw your charts with Vega-Lite", "Observable Framework as a static data-page workflow".

"A chart is the data's final word. Which rung of the ladder you shout it from sets the tone of the whole article."

— Web data visualization libraries 2026, end.

References

• D3.js — https://d3js.org/
• Observable Plot — https://observablehq.com/plot/
• Observable Framework — https://observablehq.com/framework/
• Visx (Airbnb) — https://airbnb.io/visx/
• Recharts — https://recharts.org/
• Apache ECharts — https://echarts.apache.org/
• Vega-Lite — https://vega.github.io/vega-lite/
• Plotly.js — https://plotly.com/javascript/
• Chart.js — https://www.chartjs.org/
• AntV G2 — https://g2.antv.antgroup.com/
• AntV G6 — https://g6.antv.antgroup.com/
• Nivo — https://nivo.rocks/
• Deck.gl — https://deck.gl/
• regl — https://github.com/regl-project/regl
• Apache Superset — https://superset.apache.org/
• Metabase — https://www.metabase.com/
• Lightdash — https://www.lightdash.com/
• Grafana — https://grafana.com/
• A Layered Grammar of Graphics (Hadley Wickham) — https://vita.had.co.nz/papers/layered-grammar.html