데이터 시각화 라이브러리 2026 — D3 v8 / ECharts / Plotly / Chart.js v5 / Recharts / Visx / Nivo / Tremor / Observable Plot 심층 비교

"데이터 시각화의 목적은 그림이 아니라 통찰이다. 도구는 그 통찰을 가장 짧은 거리로 만드는 다리이다." — Edward Tufte, 1983 (재인용)

데이터 시각화(Data Visualization) 도구는 2026년 현재 단순한 "차트 그리기 라이브러리"의 영역을 한참 벗어나 있습니다. 같은 막대 그래프 하나를 그리더라도, 인터랙티브 대시보드라면 ECharts나 Tremor, React 컴포넌트라면 Recharts나 Visx, 데이터 저널리즘이라면 Datawrapper나 Flourish, 분석가의 BI 도구라면 Tableau나 Looker, 사내 OSS BI라면 Metabase나 Superset 같은 식으로 도구 선택이 완전히 갈립니다.

이 글에서는 2026년 5월 기준 가장 많이 쓰이는 데이터 시각화 도구들을 다섯 카테고리 — JS 라이브러리 / React 친화 / 선언적·문법 기반 / 네트워크·그래프 / BI·뉴스룸 — 로 묶어 정리합니다. D3.js v8, Apache ECharts, Plotly, Chart.js v5, Highcharts, Recharts, Visx, Nivo, Tremor, Vega-Lite, Observable Plot, Sigma.js, Cytoscape.js, AntV(G6/X6), Apache Superset, Metabase, Lightdash, Evidence.dev, Grafana, Kibana, Looker, Tableau, Power BI, Datawrapper, Flourish 그리고 한국·일본 사례까지 모두 다룹니다.

1. 2026년 데이터 시각화 지도 — 다섯 카테고리

데이터 시각화 도구는 "누가 쓰는가, 무엇을 만드는가"에 따라 다섯 박스로 나뉩니다.

카테고리	대표 도구	주 사용자	산출물
JS 시각화 라이브러리	D3.js, ECharts, Plotly, Chart.js, Highcharts	프론트엔드 개발자	웹 차트, 인터랙티브 시각화
React 친화	Recharts, Visx, Nivo, Tremor	React 개발자	대시보드, 어드민 UI
선언적·문법 기반	Vega-Lite, Vega, Observable Plot	분석가, 노트북 사용자	JSON/스펙으로 표현된 차트
네트워크·그래프	Sigma.js, Cytoscape.js, G6, X6	그래프·관계 데이터 다루는 팀	네트워크 그래프, 다이어그램
BI·뉴스룸	Superset, Metabase, Tableau, Looker, Power BI, Datawrapper, Flourish	분석가, PM, 저널리스트	대시보드, 보고서, 인터랙티브 기사

"라이브러리"와 "BI 툴"의 경계는 점점 흐려지고 있습니다. Tremor는 Recharts 위에서 동작하는 React 컴포넌트 라이브러리이지만 실질적으로 작은 BI 같은 UX를 제공하고, Evidence.dev는 Markdown으로 작성한 SQL과 차트 코드가 그대로 정적 사이트가 됩니다. 한편 D3 위에서 만들어진 Observable Plot은 Vega-Lite 같은 선언적 문법을 채택해 "코드를 더 적게 쓰는 D3"를 표방합니다.

도구 선택의 첫 번째 분기점은 항상 "개발자가 코드로 만드는가, 분석가가 GUI로 만드는가" 입니다. 그 다음으로 "렌더 환경이 SVG·Canvas·WebGL 중 무엇인가", "라이선스가 OSS인가 상용인가", 마지막으로 "우리 데이터 스택(dbt, Snowflake, ClickHouse, Postgres 등)과 어떻게 붙는가" 가 결정됩니다.

2. D3.js v8 (Mike Bostock) — 차트의 원조

D3 (Data-Driven Documents) 는 2011년 Mike Bostock(당시 스탠퍼드 박사과정, 이후 New York Times Graphics)이 만든 시각화 라이브러리로, 사실상 현대 웹 데이터 시각화의 시조입니다. 2024년 v7.9를 거쳐 2025년 후반 v8 시리즈가 출시되었고, 2026년 5월 기준 v8.1.x가 안정 버전입니다.

D3의 철학은 "차트 라이브러리가 아니라 DOM 조작 라이브러리" 입니다. D3는 막대 그래프 함수를 제공하지 않고, "데이터를 DOM 요소에 바인딩하고 속성을 데이터 함수로 매핑"하는 더 낮은 수준의 도구를 제공합니다. 그래서 자유도는 압도적이지만, 학습 곡선도 압도적으로 가파릅니다.

// D3 v8: 간단한 막대 그래프
import * as d3 from 'd3'

const data = [30, 50, 80, 40, 60]
const svg = d3.select('#chart').append('svg').attr('width', 400).attr('height', 200)

const x = d3.scaleBand().domain(d3.range(data.length)).range([0, 400]).padding(0.1)
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([200, 0])

svg.selectAll('rect')
  .data(data)
  .join('rect')
  .attr('x', (_, i) => x(i))
  .attr('y', d => y(d))
  .attr('width', x.bandwidth())
  .attr('height', d => 200 - y(d))
  .attr('fill', 'steelblue')

v8의 핵심 변화는 ESM 기본화(CJS 빌드 제거), TypeScript 타입 1차 시민화(@types/d3 통합), 그리고 일부 모듈의 분리(d3-color, d3-format, d3-scale 등을 단독 패키지로도 설치 가능)입니다.

D3는 여전히 "신문 인터랙티브 그래픽", "맞춤형 한 번뿐인 차트", "기존 라이브러리가 못 그리는 비표준 시각화" 같은 영역에서 1위입니다. The New York Times, FT, Bloomberg, 한국의 SBS·KBS 데이터팀, 일본의 NHK 데이터팀이 모두 D3 기반으로 인터랙티브 기사를 만듭니다. 다만 "대시보드에 막대그래프 100개를 빠르게 그려야 한다"는 식의 평범한 비즈니스 시각화에는 ECharts, Recharts, Tremor 같은 더 고수준 도구가 훨씬 효율적입니다.

3. Apache ECharts (Baidu) — 풍부한 차트

Apache ECharts 는 2013년 Baidu가 사내용으로 만든 시각화 라이브러리이며, 2018년 Apache Software Foundation 인큐베이팅을 거쳐 2021년 정식 Apache 톱레벨 프로젝트로 졸업했습니다. 2026년 5월 기준 v5.6 시리즈가 안정 버전입니다.

ECharts의 특징은 차트 종류의 양과 Canvas/SVG 듀얼 렌더링, 그리고 공식 GeoJSON 지도 모듈입니다. 라인·바·파이·산점도 같은 기본 차트뿐 아니라 트리맵, 히트맵, 파라렐(Parallel) 좌표, 산버스트(Sunburst), 그래프, 캘린더 히트맵, 박스플롯, 캔들스틱, 게이지, 지도, 3D(WebGL) 차트까지 단일 라이브러리에서 모두 제공합니다.

ECharts는 중국 시장에서 압도적입니다. Alibaba, Tencent, Baidu, ByteDance, JD.com 같은 회사들이 사내·외 대시보드 대부분에 ECharts를 씁니다. 중국 외에서도 글로벌 OSS BI 중 일부(Apache Superset, Apache DolphinScheduler)가 ECharts를 기본 차트 엔진으로 채택했습니다.

// ECharts: 간단한 차트
import * as echarts from 'echarts'

const chart = echarts.init(document.getElementById('chart'))
chart.setOption({
  title: { text: '월별 매출' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['1월', '2월', '3월', '4월', '5월'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [120, 200, 150, 80, 70], itemStyle: { color: '#5470c6' } }],
})

ECharts는 "선언적 옵션 객체로 차트를 정의"하는 패러다임의 대표주자입니다. JSON 한 덩어리로 차트 전체를 표현할 수 있어, 백엔드에서 동적으로 옵션을 생성해 프론트엔드로 내려보내는 패턴이 잘 맞습니다.

한국에서는 토스, 카카오 일부 팀, 라인플러스 데이터 시각화 일부 영역에서 ECharts가 쓰입니다. 일본에서는 메루카리(Mercari)와 라쿠텐(Rakuten) 일부 사내 대시보드에서 ECharts를 활용합니다.

4. Plotly + Dash — Python 진영

Plotly 는 2012년 캐나다 몬트리올의 Plotly Inc.가 만든 시각화 도구로, JavaScript 라이브러리(plotly.js)와 Python·R·Julia 바인딩을 모두 제공합니다. 그래서 데이터 사이언티스트가 Jupyter 노트북에서 만든 차트를 그대로 웹에서 인터랙티브하게 보여줄 수 있습니다.

# Plotly Python
import plotly.express as px

df = px.data.gapminder().query("year == 2007")
fig = px.scatter(df, x="gdpPercap", y="lifeExp",
                 size="pop", color="continent",
                 hover_name="country", log_x=True, size_max=60)
fig.show()

Plotly는 두 번째 제품인 Dash 를 통해 Python으로 작성한 인터랙티브 대시보드를 그대로 웹앱으로 배포할 수 있습니다. Flask + Plotly + React가 한 덩어리로 묶여 있어, Python만 아는 분석가가 자기 데이터를 인터랙티브 사이트로 만들 수 있는 가장 짧은 길입니다.

2024년 Plotly는 Dash 3.0 을 출시했고, 2025년에는 자체 호스팅(SaaS)인 Dash Enterprise 5.x 가 출시되어 컴퓨팅 클러스터·Snowflake/Databricks 연동을 강화했습니다. 2026년 현재 Plotly는 OSS 차트(Python·R·JS)와 상용 Dash Enterprise 양쪽을 모두 운영하고 있습니다.

Plotly의 약점은 번들 크기(JS 빌드가 약 3~4MB)와 렌더링 비용입니다. 한 페이지에 차트 수십 개를 띄우는 대시보드에서는 ECharts나 Recharts 대비 성능이 떨어지는 편입니다. 대신 분포(Distribution) 시각화나 통계 그래프(violin, box plot, scatter matrix) 종류는 압도적으로 풍부합니다.

한국·일본에서 Plotly는 주로 데이터 사이언티스트와 머신러닝 엔지니어가 사용합니다. 토스 데이터분석실, 라인 데이터 사이언스팀, 쿠팡 ML팀이 Jupyter 환경에서 Plotly를 자주 씁니다.

5. Chart.js v5 — 간단함이 최고

Chart.js 는 2013년 Nick Downie가 만든 가장 단순한 형태의 차트 라이브러리로, 2025년에 v5 가 출시되었습니다. 2026년 5월 기준 v5.1 시리즈가 안정 버전입니다.

Chart.js의 장점은 압도적인 단순함과 작은 번들 크기(~80KB gzip)입니다. 8가지 기본 차트(line, bar, radar, doughnut, pie, polarArea, bubble, scatter)를 단 몇 줄의 코드로 그릴 수 있고, 별도의 학습 없이도 누구나 1시간 안에 실용적인 차트를 만들 수 있습니다.

// Chart.js v5
import { Chart, LineController, LineElement, PointElement, LinearScale, CategoryScale } from 'chart.js'

Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale)

new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    labels: ['1월', '2월', '3월', '4월'],
    datasets: [{ label: '매출', data: [120, 200, 150, 80] }],
  },
})

v5의 핵심 변화는 ESM 트리셰이킹 강화(필요한 컴포넌트만 등록)와 TypeScript 기본 지원, 그리고 새로운 플러그인 시스템입니다. 2025년부터 Chart.js는 "Web Components 호환"을 공식 로드맵으로 추가했습니다.

Chart.js는 사내 어드민, 작은 SaaS 대시보드, 학생·취미 프로젝트, 마케팅 페이지 차트에서 가장 많이 쓰입니다. "복잡한 시각화는 필요 없고, 그냥 깔끔한 막대그래프 5개만 빨리 그리고 싶다"는 경우에 최선의 선택입니다.

6. Highcharts — 상용 미적

Highcharts 는 2009년 노르웨이의 Highsoft가 만든 상용 차트 라이브러리로, 디자인 품질과 인터랙션 디테일에서 OSS 라이브러리를 앞서는 것으로 평가받습니다. 비영리·개인·교육·평가 목적은 무료이지만, 상업적 사용은 라이선스(2026년 기준 단일 개발자 535달러부터)가 필요합니다.

Highcharts의 모듈은 Highcharts(기본), Highstock(금융 차트), Highmaps(지도), Gantt(간트 차트)로 나뉘고, 각각 별도 라이선스가 있습니다. JPMorgan, Goldman Sachs, Bloomberg, 일본의 SBI 증권 같은 금융사 차트는 Highstock 기반인 경우가 많습니다.

2025년 Highcharts는 Dashboards 라는 새로운 제품을 추가해, 자체 라이브러리만으로 BI 대시보드까지 만들 수 있게 했습니다. 2026년에는 Highcharts Cloud(SaaS 호스팅)도 베타로 운영 중입니다.

Highcharts를 고르는 이유는 거의 항상 디자인 품질과 공식 지원입니다. SLA가 있는 상용 라이브러리라는 점, 그리고 OSS에 없는 미세한 인터랙션(부드러운 줌·팬, 정교한 툴팁, 일관된 테마)이 매력입니다. 반대로 OSS 라이선스로 충분하다면 ECharts나 D3가 거의 모든 경우 대안이 됩니다.

7. Recharts (React) — React 표준

Recharts 는 2016년 Recharts Group(중국·미국 혼합 팀)이 만든 React 친화 차트 라이브러리로, 2026년 5월 기준 v3.x 시리즈가 안정 버전입니다. "React 컴포넌트로 차트를 조립"하는 방식의 사실상 표준입니다.

// Recharts v3
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'

const data = [
  { month: '1월', sales: 120, target: 100 },
  { month: '2월', sales: 200, target: 150 },
  { month: '3월', sales: 150, target: 200 },
]

<LineChart width={600} height={300} data={data}>
  <CartesianGrid stroke="#eee" />
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="sales" stroke="#8884d8" />
  <Line type="monotone" dataKey="target" stroke="#82ca9d" />
</LineChart>

Recharts의 매력은 JSX 친화성, D3 기반의 안정성, 그리고 풍부한 컴포넌트 셋(Bar/Line/Area/Pie/Radar/Scatter/Composed) 입니다. React 개발자라면 별도 라이브러리 학습 없이 컴포넌트를 props로 조립하는 React 패턴 그대로 차트를 만들 수 있습니다.

약점은 성능(SVG 기반이라 데이터 점이 수천 개를 넘으면 느려짐), 고도화의 한계(맞춤형 시각화가 필요해지면 곧 D3를 직접 써야 함), 그리고 모바일 인터랙션 미세 디테일 부족입니다. 그래서 Recharts는 "어드민 대시보드의 디폴트 차트", "Tremor 같은 더 큰 UI 라이브러리의 기반" 같은 위치에 자리 잡았습니다.

한국에서는 Vercel·Next.js 기반 스택의 거의 모든 사내 대시보드가 Recharts를 씁니다. 일본에서는 freee, SmartHR, Mercari 일부 어드민이 Recharts 기반입니다.

8. Visx (Airbnb) — React + D3

Visx (visx, 발음 "vis ex")는 2018년 Airbnb가 오픈소스로 공개한 React 시각화 라이브러리로, "D3의 수학과 React의 컴포넌트를 결합한 저수준 도구"를 표방합니다. 2026년 5월 기준 v3.x 시리즈가 안정 버전입니다.

Visx는 Recharts처럼 "BarChart" 같은 큰 컴포넌트를 주지 않고, 대신 @visx/scale, @visx/shape, @visx/axis, @visx/group, @visx/text 같은 작은 빌딩블록을 제공합니다. D3의 함수형 도구(scaleLinear, line, area 같은)에 React 친화 래퍼를 씌운 형태입니다.

// Visx
import { scaleLinear } from '@visx/scale'
import { Bar } from '@visx/shape'
import { Group } from '@visx/group'

const data = [30, 50, 80, 40, 60]
const xScale = scaleLinear({ domain: [0, data.length], range: [0, 400] })
const yScale = scaleLinear({ domain: [0, 100], range: [200, 0] })

<svg width={400} height={200}>
  <Group>
    {data.map((d, i) => (
      <Bar
        key={i}
        x={xScale(i)}
        y={yScale(d)}
        width={70}
        height={200 - yScale(d)}
        fill="#3182bd"
      />
    ))}
  </Group>
</svg>

Visx는 "Recharts로는 표현이 안 되지만 D3를 처음부터 다시 쓰기는 부담스러운" 영역의 도구입니다. Airbnb·Stripe·Lyft 일부 팀이 사내 데이터 시각화에서 Visx를 활용하고 있고, 특히 인터랙티브 분석 도구를 만드는 회사들이 선호합니다.

학습 곡선은 Recharts보다 가파르지만 D3보다는 완만합니다. 그래서 "D3까지는 가기 싫고, Recharts로는 표현이 모자라는" 중간 지점의 React 개발자에게 가장 잘 맞습니다.

9. Nivo — React + 테마

Nivo 는 2017년 프랑스의 Raphaël Benitte가 만든 React 시각화 라이브러리로, D3와 React를 결합한 점은 Recharts·Visx와 같지만 테마(Theme) 시스템과 SVG/Canvas/HTML 다중 렌더링, 그리고 서버사이드 렌더링(SSR) 에 강점이 있습니다. 2026년 5월 기준 v0.88 시리즈가 안정 버전입니다.

Nivo의 차별점은 카운트가 많은 차트 종류(약 30개)와 인터랙션 디테일입니다. 트리맵, 칼렌더 히트맵, 산버스트, 보로노이(Voronoi), 시계열 라인, 박스플롯, 워드클라우드까지 모두 React 컴포넌트로 제공됩니다.

// Nivo Line
import { ResponsiveLine } from '@nivo/line'

const data = [
  {
    id: 'sales',
    data: [
      { x: 'Jan', y: 120 },
      { x: 'Feb', y: 200 },
      { x: 'Mar', y: 150 },
    ],
  },
]

<ResponsiveLine
  data={data}
  margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
  axisBottom={{ legend: 'Month', legendOffset: 36 }}
  axisLeft={{ legend: 'Sales', legendOffset: -40 }}
  pointSize={10}
  useMesh={true}
/>

Nivo는 "Recharts보다 더 풍부한 시각화가 필요한데, Visx보다는 빠르게 만들고 싶다"는 영역의 정답입니다. 약점은 번들 크기(차트 종류가 많아 트리셰이킹을 안 하면 무거움)와 일관된 시각 언어를 강요한다는 점입니다.

10. Tremor — 대시보드

Tremor 는 2022년 베를린의 Tremor Labs(현재는 Vercel 인수)가 만든 React 컴포넌트 라이브러리로, "30분 만에 대시보드를 만든다"를 목표로 합니다. 2024년 Vercel이 인수한 뒤 v4(2025) 시리즈가 출시되었고, 2026년 5월 기준 v4.2가 안정 버전입니다.

Tremor는 차트 라이브러리라기보다 대시보드 빌딩블록입니다. KPI 카드, 통계 박스, 메트릭 카드, 진행 바, 차트(Recharts 기반), 테이블, 탭, 캘린더 같은 컴포넌트를 React + Tailwind CSS 친화적으로 제공합니다.

// Tremor
import { Card, Metric, Text, AreaChart } from '@tremor/react'

const data = [
  { date: 'Jan', sales: 2890 },
  { date: 'Feb', sales: 3100 },
  { date: 'Mar', sales: 2980 },
]

<Card>
  <Text>월간 매출</Text>
  <Metric>$ 12,699</Metric>
  <AreaChart
    data={data}
    index="date"
    categories={['sales']}
    colors={['blue']}
  />
</Card>

Tremor의 장점은 빠른 출시 속도와 Tailwind와의 자연스러운 통합, 그리고 무료 OSS 라이선스(Apache 2.0)입니다. 약점은 차트 종류의 제한(Recharts가 그릴 수 있는 것만 가능)과 디자인 커스터마이징의 한계입니다.

Vercel 인수 이후 Tremor는 "Vercel Analytics 대시보드의 기본 컴포넌트"로 자리 잡았고, 2025~2026년에는 Stripe, Linear, Cal.com 같은 모던 SaaS의 사내 대시보드 일부가 Tremor 기반으로 운영되고 있습니다.

11. Vega-Lite + Vega — 선언적

Vega 와 Vega-Lite 는 워싱턴대학교 인터랙티브 데이터 랩(UW IDL, Jeff Heer 교수 그룹)이 만든 선언적 시각화 문법입니다. Vega는 저수준 문법, Vega-Lite는 그 위의 고수준 문법으로, "차트를 JSON 객체로 표현"하는 패러다임의 대표주자입니다.

{
  "data": { "values": [{"month": "Jan", "sales": 120}, {"month": "Feb", "sales": 200}] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "month", "type": "ordinal" },
    "y": { "field": "sales", "type": "quantitative" }
  }
}

위 JSON 한 덩어리가 그대로 인터랙티브 막대 그래프로 렌더링됩니다. Vega-Lite의 매력은 선언적 명료성과 상호운용성입니다. Jupyter Notebook(Altair Python), Observable, Microsoft Power BI(부분 지원) 등 다양한 환경에서 같은 JSON 스펙을 그대로 실행할 수 있습니다.

2026년 현재 Vega-Lite는 데이터 사이언티스트의 표준 도구 중 하나이며, 특히 Altair(Python 바인딩)를 통해 Pandas DataFrame과 자연스럽게 연결됩니다. JupyterLab, Marimo, Hex, Deepnote 같은 모든 모던 데이터 노트북이 Altair/Vega-Lite를 기본 차트 엔진 중 하나로 채택했습니다.

약점은 학습 곡선(처음 보면 JSON 스펙이 낯섬)과 인터랙션 한계(D3만큼 자유롭지 않음)입니다.

12. Observable Plot (Mike Bostock) — D3 후속

Observable Plot 은 2021년 Mike Bostock(D3 창시자)이 Observable에서 만든 새로운 시각화 라이브러리로, "D3보다 짧은 코드로 같은 차트를 그리자"를 목표로 합니다. 2026년 5월 기준 v0.7 시리즈가 안정 버전입니다.

// Observable Plot
import * as Plot from '@observablehq/plot'

const data = [
  { month: 'Jan', sales: 120 },
  { month: 'Feb', sales: 200 },
  { month: 'Mar', sales: 150 },
]

const chart = Plot.plot({
  marks: [
    Plot.barY(data, { x: 'month', y: 'sales', fill: 'steelblue' }),
    Plot.ruleY([0]),
  ],
})
document.getElementById('chart').append(chart)

Plot은 Vega-Lite처럼 "선언적"이지만 JSON이 아닌 자바스크립트 함수 호출로 표현합니다. D3를 직접 쓸 때보다 코드량이 약 10분의 1로 줄어듭니다.

Mike Bostock 자신은 2023년 발표에서 "D3는 라이브러리, Plot은 차트 시스템"이라고 구분했습니다. D3의 자유도는 유지하면서, "기본 차트는 한 줄로 그리고, 필요할 때만 D3 빌딩블록으로 내려가는" 흐름이 가능합니다. 실제로 The New York Times 그래픽 팀은 2024년 이후 새 인터랙티브에서 D3와 Plot을 동시에 씁니다.

Observable Plot은 Vega-Lite와 비슷한 위치에 있지만, JSON이 아닌 JS 함수형 API라 React·Vue 같은 컴포넌트 프레임워크에서 자연스럽게 컴포지션할 수 있다는 점이 강점입니다.

13. Sigma.js / Cytoscape.js / G6 / X6 (AntV) — 네트워크·그래프

표준적인 막대그래프·라인차트와 별개로, 그래프(노드와 엣지) 를 시각화하는 도구는 완전히 다른 카테고리입니다. 네트워크 분석, 소셜 그래프, 시스템 의존성, 워크플로 다이어그램이 모두 이 카테고리에 속합니다.

라이브러리	만든 곳	특징
Sigma.js	프랑스 médialab Sciences Po	WebGL 렌더링, 대규모 그래프(1만~10만 노드)
Cytoscape.js	토론토 대학 Cytoscape Consortium	바이오인포매틱스 출신, 풍부한 그래프 알고리즘
G6	AntV (알리바바)	비즈니스 그래프(조직도, 토폴로지), TypeScript 친화
X6	AntV (알리바바)	다이어그램(워크플로, ER 다이어그램)에 특화
React Flow	xyflow (독일)	React 컴포넌트, 노드 에디터(워크플로 빌더)

AntV 는 Alibaba가 운영하는 오픈소스 시각화 생태계로, G2(통계 차트), G6(그래프), X6(다이어그램), L7(지도) 같은 라이브러리를 함께 운영합니다. 중국 빅테크 사내 대시보드의 상당수가 AntV 기반입니다.

// G6 (AntV)
import G6 from '@antv/g6'

const graph = new G6.Graph({
  container: 'container',
  width: 800,
  height: 600,
  modes: { default: ['drag-canvas', 'zoom-canvas', 'drag-node'] },
})
graph.data({
  nodes: [{ id: 'A', label: 'Node A' }, { id: 'B', label: 'Node B' }],
  edges: [{ source: 'A', target: 'B' }],
})
graph.render()

React Flow(xyflow)는 2020년 독일에서 시작된 라이브러리로, "노드 기반 에디터"에 특화되어 있습니다. Stripe Flow, Cal.com Workflow Builder, n8n 같은 워크플로 도구의 대부분이 React Flow 기반입니다.

14. Apache Superset / Metabase / Lightdash / Evidence.dev — OSS BI

오픈소스 BI 도구는 2026년 현재 네 개 정도의 주요 플레이어로 정리됩니다.

도구	라이선스	강점
Apache Superset	Apache 2.0	풍부한 차트(ECharts 기반), SQL 친화
Metabase	AGPL v3 + 상용	UI 친숙성, 비기술자도 쉬움
Lightdash	MIT	dbt 의 metrics를 그대로 BI로
Evidence.dev	MIT	Markdown으로 BI 리포트 작성

Apache Superset 은 Airbnb가 사내용으로 만들었다가 2017년 ASF에 기증한 OSS BI로, 2026년 5월 기준 v5.1 시리즈가 안정 버전입니다. ECharts 기반 차트가 풍부하고, SQL Lab을 통한 SQL 친화성이 강합니다. 토스, 카카오, 라인, 메루카리, ZOZO 같은 회사들이 내부 BI로 Superset을 운영하고 있습니다.

Metabase 는 2014년 미국 산호세에서 시작된 OSS BI로, "비기술자도 SQL 없이 차트를 만들 수 있다"는 UX가 최대 강점입니다. AGPL OSS와 Metabase Cloud(SaaS), Metabase Enterprise(상용) 세 형태로 운영됩니다.

Lightdash 는 2021년 영국에서 시작된 OSS BI로, dbt 의 metrics 정의를 그대로 BI 차원으로 사용합니다. dbt를 데이터 모델링 표준으로 채택한 팀이 BI 도구로 직결시키는 가장 짧은 길입니다.

Evidence.dev 는 2022년 캐나다에서 시작된 OSS BI로, Markdown 파일에 SQL 쿼리와 차트 코드를 함께 쓰면 정적 사이트로 빌드되는 새로운 패러다임을 제시합니다. Hex나 Mode 같은 노트북 도구와 Datawrapper 같은 정적 그래픽 도구의 중간 지점에 있습니다.

15. Grafana / Kibana — 관찰성

Grafana 와 Kibana 는 BI보다는 관찰성(Observability) 도구이지만, 시각화 도구의 한 분야로 같이 다뤄집니다.

Grafana 는 2014년 스웨덴의 Torkel Ödegaard가 만들었고, 현재는 Grafana Labs가 운영합니다. 2026년 5월 기준 v11.x 시리즈가 안정 버전입니다. Prometheus·Loki·Tempo·Mimir 같은 자체 데이터소스 외에, PostgreSQL·MySQL·CloudWatch·BigQuery·Snowflake 같은 거의 모든 데이터소스를 시각화할 수 있어 "범용 시계열 BI"로도 쓰입니다.

Kibana 는 2013년 Elastic이 만든 도구로, Elasticsearch 검색 결과를 시각화하는 데 특화되어 있습니다. 로그 검색·분석에서 사실상 표준입니다. 2026년 현재 OpenSearch Dashboards(AWS가 포크한 OSS 버전)와 양분되어 있는 상태입니다.

이 둘은 "비즈니스 KPI 대시보드"보다는 "시스템 메트릭 대시보드"에 최적화되어 있어, 일반적인 BI 도구와는 사용 시점이 다릅니다. 다만 Grafana의 Loki·Tempo 데이터 소스를 BI 용도로 활용하는 사례도 점차 늘고 있습니다.

16. Looker / Tableau / Power BI — 엔터프라이즈 BI

엔터프라이즈 BI 세계는 사실상 세 거인의 과점입니다.

도구	운영사	강점
Tableau	Salesforce (2019 인수)	비주얼 분석, 데이터 디스커버리
Power BI	Microsoft	Office 통합, Excel·Azure 친화
Looker	Google (2020 인수)	LookML 시멘틱 레이어, BigQuery 친화

Tableau 는 2003년 스탠퍼드에서 스핀오프된 비주얼 분석 회사이며, 2019년 Salesforce가 157억 달러에 인수했습니다. "드래그 앤 드롭으로 데이터를 탐색"하는 비주얼 분석의 표준입니다. 2026년 현재 Tableau Cloud, Tableau Server, Tableau Public 세 가지 제품군으로 운영됩니다.

Power BI 는 Microsoft가 2015년에 출시한 BI 도구로, Excel과 Azure 생태계와의 통합 덕분에 엔터프라이즈에서 빠르게 확산되었습니다. 2025년 Microsoft Fabric의 일부로 재포지셔닝되었습니다.

Looker 는 2012년 미국에서 시작되었고, 2020년 Google이 26억 달러에 인수했습니다. LookML 이라는 자체 시멘틱 레이어 언어로 데이터 모델을 정의하는 점이 차별점이며, BigQuery와 가장 자연스럽게 결합됩니다.

세 도구 모두 가격이 비싸고(연 1인당 수십~수백만 원), 도입 결정은 보통 CFO/CDO 수준에서 이루어집니다. 그러나 일단 도입되면 분석가·임원이 직접 차트를 만들 수 있어 "데이터 민주화"의 핵심 도구가 됩니다.

17. Datawrapper / Flourish — 뉴스룸

Datawrapper 는 2012년 독일 베를린에서 시작된 차트 도구로, "30초 만에 깔끔한 차트를 만든다"를 모토로 합니다. 신문·잡지 데이터 저널리즘에서 표준 도구로 자리 잡았고, FAZ, Die Zeit, Le Monde, The Wall Street Journal, 한국의 조선일보·중앙일보 데이터팀 등이 활용합니다.

Datawrapper의 핵심은 편집기의 단순함과 결과물의 미적 품질입니다. CSV를 붙여넣으면 자동으로 적절한 차트 형식을 제안하고, 색약 친화 팔레트와 접근성을 기본으로 적용합니다.

Flourish 는 2017년 영국 런던에서 시작된 도구로, Datawrapper의 정적 차트보다 스토리텔링(Storytelling) 에 강합니다. "스크롤하면 차트가 변하는" 인터랙티브 기사를 코드 없이 만들 수 있어, 데이터 저널리스트의 핵심 도구가 되었습니다. 2022년 Canva가 인수했습니다.

두 도구 모두 GUI 기반이고, 결과물은 iframe으로 임베드할 수 있는 인터랙티브 차트입니다. "개발자가 코드로 만들지 않고, 분석가·저널리스트가 빠르게 만들고 싶다"는 영역에서 가장 강력합니다.

18. 한국 / 일본 — 토스, 카카오, 日経, freee

한국

토스(Toss) — 사내 대시보드의 상당수가 Apache Superset이고, 일부 프로덕션 시각화(차트, 사용자 행동 분석)에는 React 기반 자체 컴포넌트를 운영합니다. 외부 공유 차트(블로그·기술 발표)에서는 Recharts와 Visx가 자주 보입니다.
카카오(Kakao) — 카카오 광고, 카카오톡 비즈니스 대시보드 일부에서 ECharts 기반 시각화가 운영됩니다. 또한 카카오 데이터팀이 자체 사내 BI를 운영하면서 Superset·Metabase를 함께 사용합니다.
네이버·라인 — 라인 비즈니스 매니저, 라인 광고 대시보드에서 자체 컴포넌트와 ECharts·Recharts 혼합 사용. 데이터팀은 Tableau와 Looker를 함께 운영.
쿠팡 — 사내 분석은 Tableau가 표준, 일부 ML/DS 시각화는 Plotly + Jupyter.
언론 — 조선일보 디자인팀, 중앙일보 데이터팀, SBS·KBS 데이터팀이 D3 + Datawrapper 조합으로 인터랙티브 기사 제작.

일본

日経(Nikkei) — 日経 비주얼 데이터팀은 D3 + Observable Plot + Datawrapper 조합으로 인터랙티브 기사를 만듭니다. 특히 코로나 대시보드(2020~2023)는 D3 기반 자체 시각화로 유명했습니다.
freee — 회계 SaaS인 freee는 사내 BI로 Metabase를 운영하면서, 프로덕트 대시보드는 Recharts 기반 자체 컴포넌트로 빌드합니다.
メルカリ(Mercari) — Superset과 Looker를 함께 운영하며, 일부 프로덕트 분석 도구에는 Plotly가 쓰입니다.
SmartHR — 인사 SaaS인 SmartHR도 사내 BI로 Looker, 프로덕트 시각화에 Recharts를 사용합니다.
NHK 데이터팀 — D3와 Highcharts를 혼합해 선거·재난 인터랙티브 시각화를 만듭니다.

19. 누가 무엇을 골라야 하나

도구가 너무 많으니, 의사결정 흐름을 단순화합니다.

상황	추천 도구
React 어드민 대시보드	Recharts (기본) → Tremor (KPI 카드 많음) → Nivo (차트 종류 많음)
인터랙티브 데이터 저널리즘	D3.js + Observable Plot + Datawrapper
Python 노트북·ML 시각화	Plotly + Altair (Vega-Lite)
대규모 인터랙티브 대시보드	Apache ECharts (Canvas/WebGL 옵션)
단순 차트 5개	Chart.js v5
상용·금융 차트	Highcharts (Highstock)
네트워크·그래프	Cytoscape.js (분석 강함), Sigma.js (대규모), G6 (비즈니스)
워크플로 에디터	React Flow (xyflow)
사내 BI (OSS)	Metabase (사용자 친화) → Superset (개발자 친화) → Lightdash (dbt 친화)
Markdown 기반 BI	Evidence.dev
관찰성 대시보드	Grafana (메트릭), Kibana (로그)
엔터프라이즈 BI	Tableau (탐색), Power BI (MS 스택), Looker (BQ + LookML)
뉴스룸·블로그 차트	Datawrapper (정적), Flourish (스토리텔링)

학습 순서 제안: ① Chart.js로 차트 그리기 기본 → ② Recharts로 React 친화 차트 → ③ Vega-Lite/Altair로 선언적 문법 → ④ D3로 자유도 → ⑤ Observable Plot 또는 Visx로 둘 사이 균형. BI 도구는 Metabase부터 시작해 필요에 따라 Superset이나 상용 도구로 확장하는 것이 가장 안전합니다.

20. 참고 / References

D3.js — https://d3js.org/
D3.js v8 release notes — https://github.com/d3/d3/releases
Apache ECharts — https://echarts.apache.org/
Apache ECharts examples — https://echarts.apache.org/examples/
Plotly JavaScript — https://plotly.com/javascript/
Plotly Python — https://plotly.com/python/
Dash — https://dash.plotly.com/
Chart.js — https://www.chartjs.org/
Highcharts — https://www.highcharts.com/
Recharts — https://recharts.org/
Visx (Airbnb) — https://airbnb.io/visx/
Nivo — https://nivo.rocks/
Tremor — https://tremor.so/
Vega — https://vega.github.io/vega/
Vega-Lite — https://vega.github.io/vega-lite/
Altair (Vega-Lite Python) — https://altair-viz.github.io/
Observable Plot — https://observablehq.com/plot/
Sigma.js — https://www.sigmajs.org/
Cytoscape.js — https://js.cytoscape.org/
AntV — https://antv.vision/
G6 (AntV) — https://g6.antv.antgroup.com/
X6 (AntV) — https://x6.antv.antgroup.com/
React Flow (xyflow) — https://reactflow.dev/
Apache Superset — https://superset.apache.org/
Metabase — https://www.metabase.com/
Lightdash — https://www.lightdash.com/
Evidence.dev — https://evidence.dev/
Grafana — https://grafana.com/
Kibana — https://www.elastic.co/kibana
Looker — https://cloud.google.com/looker
Tableau — https://www.tableau.com/
Power BI — https://powerbi.microsoft.com/
Datawrapper — https://www.datawrapper.de/
Flourish — https://flourish.studio/
Mike Bostock, "Observable Plot is a JavaScript library for exploratory data visualization" — https://observablehq.com/@observablehq/plot
Standard Webhooks — https://www.standardwebhooks.com/ (참고 표준)
The New York Times Graphics team — https://www.nytimes.com/spotlight/graphics