Skip to content
Published on

データ可視化ライブラリ 2026 — D3 v8 / ECharts / Plotly / Chart.js v5 / Recharts / Visx / Nivo / Tremor / Observable Plot 徹底比較

Authors

「データ可視化の目的は絵ではなく洞察である。ツールはその洞察への最短の橋である」 — Edward Tufte, 1983 (意訳)

データ可視化(Data Visualization)ツールは 2026 年現在、単なる「グラフ描画ライブラリ」の枠を遥かに超えています。同じ棒グラフ 1 つを描くにしても、インタラクティブダッシュボードなら ECharts や Tremor、React コンポーネントなら Recharts や Visx、データジャーナリズムなら Datawrapper や Flourish、アナリスト向け BI なら Tableau や Looker、社内 OSS BI なら Metabase や Superset、というように選択が完全に分岐します。

本稿では 2026 年 5 月時点で最も使われているデータ可視化ツールを、JS ライブラリ / React フレンドリー / 宣言的文法 / ネットワーク・グラフ / BI・ニュースルームの 5 カテゴリに分けて整理します。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 年のデータ可視化マップ — 5 つのカテゴリ

可視化ツールは「誰が使うか・何を作るか」で 5 つの箱に分かれます。

カテゴリ代表的なツール主なユーザーアウトプット
JS 可視化ライブラリD3.js, ECharts, Plotly, Chart.js, Highchartsフロントエンド開発者Web チャート、インタラクティブ可視化
React フレンドリーRecharts, Visx, Nivo, TremorReact 開発者ダッシュボード、管理画面 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(当時スタンフォード大学博士課程、後の NYT Graphics)が作った可視化ライブラリで、事実上現代の Web データ可視化の起源です。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 型のファーストクラス化(@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 マップモジュール です。ライン・バー・パイ・散布図といった基本チャートに加え、ツリーマップ、ヒートマップ、平行座標、サンバースト、グラフ、カレンダーヒートマップ、ボックスプロット、ローソク足、ゲージ、地図、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 一塊でチャート全体を表現でき、バックエンドで動的にオプションを生成しフロントに渡すパターンと相性が良いです。

韓国ではトス、Kakao の一部チーム、LINE Plus の可視化に ECharts が使われています。日本では Mercari と Rakuten の一部社内ダッシュボードで ECharts が活用されています。

4. Plotly + Dash — Python 陣営

Plotly はカナダ・モントリオールの Plotly Inc. が 2012 年に作った可視化ツールで、JavaScript ライブラリ(plotly.js)と Python・R・Julia バインディングの両方を提供します。データサイエンティストが Jupyter ノートブックで作ったチャートを、そのまま Web インタラクティブとして公開できます。

# 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 は 2 つ目の製品である Dash によって、Python で書いたインタラクティブダッシュボードをそのまま Web アプリとしてデプロイ可能にしています。Flask + Plotly + React が一塊にまとまっており、Python しか書けないアナリストが自分のデータをインタラクティブサイトにする最短ルートです。

2024 年、Plotly は Dash 3.0 をリリースし、2025 年には Dash Enterprise 5.x が登場、Snowflake / Databricks 連携とコンピュートクラスタ拡張が強化されました。2026 年現在、Plotly は OSS チャート(Python・R・JS)と商用 Dash Enterprise の両方を運営しています。

Plotly の弱点は バンドルサイズ(JS ビルドが約 3–4 MB)と レンダリングコスト です。1 ページに数十のチャートを並べるダッシュボードでは、ECharts や Recharts に比べて性能が劣る傾向にあります。一方で統計可視化(violin、box plot、scatter matrix)の種類は群を抜いて豊富です。

韓国・日本では Plotly は主にデータサイエンティスト・ML エンジニアが使います。トスのデータ分析室、LINE のデータサイエンスチーム、Coupang ML チームが Jupyter 環境で Plotly を活用しています。

5. Chart.js v5 — シンプルさが正義

Chart.js は 2013 年に Nick Downie が作った最もシンプルなチャートライブラリで、2025 年に v5 がリリースされました。2026 年 5 月時点では v5.1 シリーズが安定版です。

Chart.js の強みは 圧倒的なシンプルさ小さなバンドルサイズ(約 80 KB 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 年時点で 1 開発者あたり 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(発音は「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 種)と インタラクションのディテール です。ツリーマップ、カレンダーヒートマップ、サンバースト、ボロノイ、時系列ライン、ボックスプロット、ワードクラウドまで全て 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 — 宣言的

VegaVega-Lite はワシントン大学 Interactive Data Lab(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(Python の Altair)、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 ではなく JavaScript の関数呼び出しで表現します。D3 を直接書く時と比べてコード量が約 10 分の 1 になります。

Mike Bostock 本人は 2023 年の講演で「D3 はライブラリ、Plot はチャートシステム」と区別しました。D3 の自由度を保ちつつ、「基本チャートは 1 行で描き、必要な時だけ D3 のビルディングブロックに降りる」という流れが可能です。実際、The New York Times Graphics チームは 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 PoWebGL レンダリング、大規模グラフ(1 万~10 万ノード)
Cytoscape.jsトロント大学 Cytoscape Consortiumバイオインフォマティクス出自、豊富なグラフアルゴリズム
G6AntV (アリババ)ビジネスグラフ(組織図、トポロジ)、TypeScript フレンドリー
X6AntV (アリババ)ダイアグラム(ワークフロー、ER 図)に特化
React Flowxyflow (ドイツ)React コンポーネント、ノードエディタ(ワークフロービルダー)

AntV はアリババが運営する OSS 可視化エコシステムで、G2(統計チャート)、G6(グラフ)、X6(ダイアグラム)、L7(地図)といったライブラリ群を運営しています。中国大手 IT 企業の社内ダッシュボードの多くが 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

OSS BI ツールは 2026 年現在、4 つの主要プレイヤーに整理されます。

ツールライセンス強み
Apache SupersetApache 2.0豊富なチャート(ECharts ベース)、SQL フレンドリー
MetabaseAGPL v3 + 商用UI の親しみやすさ、非エンジニアでも簡単
LightdashMITdbt の metrics をそのまま BI 次元として利用
Evidence.devMITMarkdown で BI レポートを作成

Apache Superset は Airbnb が社内用に作り、2017 年に ASF に寄贈した OSS BI で、2026 年 5 月時点の安定版は v5.1 シリーズです。ECharts ベースの豊富なチャートと、SQL Lab による SQL フレンドリーさが強みです。トス、Kakao、LINE、Mercari、ZOZO などが社内 BI として Superset を運営しています。

Metabase は 2014 年に米国サンノゼで始まった OSS BI で、「非エンジニアも SQL なしでチャートを作れる」UX が最大の強みです。AGPL OSS、Metabase Cloud(SaaS)、Metabase Enterprise(商用)の 3 形態で運営されます。

Lightdash は 2021 年に英国で始まった OSS BI で、dbt の metrics 定義をそのまま BI の次元として使用 します。dbt をデータモデリング標準として採用したチームが、そのまま BI に直結する最短ルートです。

Evidence.dev は 2022 年にカナダで始まった OSS BI で、Markdown ファイルに SQL クエリとチャートコードを一緒に書くと、そのまま静的サイトとしてビルドされる という新しいパラダイムを提示しています。Hex や Mode のようなノートブックツールと、Datawrapper のような静的グラフィックツールの中間地点に位置します。

15. Grafana / Kibana — 可観測性

GrafanaKibana は 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 版)と二分される状況にあります。

この 2 つは「ビジネス KPI ダッシュボード」より「システムメトリックダッシュボード」に最適化されているため、一般的な BI ツールとは利用タイミングが異なります。ただし、Grafana の Loki・Tempo データソースを BI 用途に活用するケースも徐々に増えています。

16. Looker / Tableau / Power BI — エンタープライズ BI

エンタープライズ BI の世界は事実上、3 巨人の寡占です。

ツール運営会社強み
TableauSalesforce (2019 買収)ビジュアル分析、データディスカバリ
Power BIMicrosoftOffice 統合、Excel・Azure フレンドリー
LookerGoogle (2020 買収)LookML セマンティックレイヤー、BigQuery フレンドリー

Tableau は 2003 年にスタンフォードからスピンオフしたビジュアル分析会社で、2019 年に Salesforce が 157 億ドルで買収しました。「ドラッグ & ドロップでデータを探索する」ビジュアル分析の標準です。2026 年現在、Tableau Cloud、Tableau Server、Tableau Public の 3 製品で運営されます。

Power BI は Microsoft が 2015 年にリリースした BI ツールで、Excel と Azure エコシステムとの統合のおかげでエンタープライズに急速に普及しました。2025 年に Microsoft Fabric の一部として再ポジショニングされました。

Looker は 2012 年に米国で始まり、2020 年に Google が 26 億ドルで買収しました。LookML という独自のセマンティックレイヤー言語でデータモデルを定義する点が差別化要因で、BigQuery と最も自然に結合します。

3 ツールとも価格が高く(年 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. 韓国 / 日本 — トス、Kakao、日経、freee

韓国

  • トス(Toss) — 社内ダッシュボードの相当部分が Apache Superset で、一部のプロダクション可視化(チャート、ユーザー行動分析)には React ベースの独自コンポーネントを運用しています。外部共有チャート(ブログ・技術発表)では Recharts と Visx がよく登場します。
  • Kakao — Kakao 広告、Kakao Talk ビジネスダッシュボードの一部で ECharts ベースの可視化が運用されています。また Kakao データチームは社内 BI として Superset・Metabase を併用しています。
  • Naver・LINE — LINE Business Manager、LINE 広告ダッシュボードでは独自コンポーネントと ECharts・Recharts を混在使用。データチームは Tableau と Looker を併用。
  • Coupang — 社内分析は 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 ベース BIEvidence.dev
可観測性ダッシュボードGrafana(メトリック)、Kibana(ログ)
エンタープライズ BITableau(探索)、Power BI(MS スタック)、Looker(BQ + LookML)
ニュースルーム・ブログのチャートDatawrapper(静的)、Flourish(ストーリーテリング)

学習順序の提案: (1) Chart.js でチャート描画の基礎 → (2) Recharts で React フレンドリーなチャート → (3) Vega-Lite / Altair で宣言的文法 → (4) D3 で完全な自由度 → (5) Observable Plot または Visx でその間のバランス。BI ツールは Metabase から始めて、必要に応じて Superset や商用ツールに広げるのが最も安全です。

20. 参考 / References