マジかよ！Apache EChartsが最強のグラフ描画ライブラリって噂、マジだった
引用元：https://news.ycombinator.com/item?id=43624220
Briefer作るとき、色んな可視化ライブラリ試したけど、Apache EChartsがマジで最強だったわ。
他のライブラリって、見た目が微妙だったり、使いにくかったり、柔軟性が足りなかったりするんだよね。
EChartsはその3つを全部解決してる。デフォルトで綺麗だし、バックエンドでグラフの定義を計算して、必要な定義だけフロントに送れるし、柔軟性もヤバくて、普通のBIツールでできることは全部できる。マジ神。
EChartsの良いところ、まだあるよ！
・プロジェクトで唯一安心してアップデートできる依存関係。アップデートで壊れる心配がない。3.xから5.xへのアップグレードも余裕！npm updateするだけで全部動くとかありえない。
・SSRにもSPAにも対応。vanilla-jsだから、ReactとかVueとか、RailsとかASP.netとか、どんな環境でも動く。サーバーサイドでJSON作ってEChartsに渡せるし、Vueのリアクティブオブジェクトも使える。
・細かい調整が必要な時（例えば、円グラフのホバー時のラベルに太字でパーセンテージを表示するとか）でも、ソースコードを掘る必要がない。大体ググれば解決する。
ECharts、昔見たことあるかもだけど、Chart.jsで十分だったからなー。変なカスタムもできるし。ビジネス分析はMetabaseをセルフホストしてる。Metabaseの可視化オプションがもっとあれば良いんだけど、設定が楽なんだよね。カスタムチャート作るほどじゃないし。
グラデーションの折れ線グラフを作る必要があって、y軸の各ステップが色を表してて、隣の色とブレンドされるみたいなやつ。色々試したけど、EChartsが一番しっくりきた。Reactとの連携が最初分かりにくかったけど、普通のjsライブラリと同じように使えた。EChartsマジですごい。
いや、それは同意できないな。
EChartsは良いけど、Plotlyも超良いし、observablehq.com/plotもマジですごくなりそう。
Plotlyはドキュメントに書かれてない機能が多い。コンサルティングで開発者を助けてるからじゃないかな。
選ぶときに考えたのは、chart.jsはCanvasだけっぽいけど、EChartsはSVGで出力できるってことかな。何百万点もプロットするならCanvasの方が速いかもだけど、シンプルなチャートならSVGの方がCSSだけでレスポンシブにできるから、JSで再レンダリングしなくても済むんだよね
なるほどね、apacheの方も試してみるよ。教えてくれてありがと
vega/vega liteとは比べた？どうだったか気になるな
どっちも使ったことあるけど、Vegaは使い道があると思う反面、Web開発者には優しくないかな。フロントエンドのエンジニアはロジック、構成、スタイリングを分けたいんだよね。JSONドキュメントに全部まとめちゃうと、開発体験が悪くなるし、独自のやり方が多くなるし。とは言え、データベースにあるJSONに全部入ってるってのは最高だよね。でも、そこまで頑張る人が少ないから、ちょっと自己満足な技術選定になっちゃうかも
vega liteのヘビーユーザーとしては、それは確かにそう思う。データ可視化の専門家が、研究とか分析で正確なチャートが必要な時に輝くと思う。簡単なメトリクスダッシュボードみたいなのには、開発者には難しいかもね
わかる
go-echartsもおすすめだよ[1]。Golangの型でチャートを宣言できて、GolangのJSON marshallerがJSONに変換してくれるんだ。いろんなプロジェクトで使ってて、問題とかPRがあれば、メンテナーがすぐに対応してくれる。[1] https://github.com/go-echarts/go-echarts
[2] https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai…
マジか、教えてくれてありがとう。GoとDuckDBをよく使うんだよね。今までJSとかhtml/templateでごまかしてたけど、これで楽しくなりそう
マジですごい
EChartsは最高だと思う。意外とリストとか検索に出てこないんだよね。chart.jsとかgoogle chartsとかamChartsとかHighchartsとかApexChartsとか全部試したけど。うちのツール/ライブラリでも使ってるよ。https://docs.chartsql.com/
それって中国のプロジェクトだからじゃないかなー。Ant Design Componentsも同じで、マジですごいのに、もっと知られてもいいはずなのにね。
中国製ってのが理由の一つだと思うな。初期の頃のサンプルが中国語だけだったりして、それで尻込みした人もいるかも。確かに複雑だけど（良い意味でね）、単純なチャートを作りたい人には向かないから、有名じゃないのもわかる気がする。でも、EChartsなら企業のニーズにも応えられるんだよね。
やっぱりそうかもね。何年か前に「あのクールなチャートライブラリ」を探してたんだけど、Googleで全然出てこなかったもん。
Apache EChartsのデベロッパーとかユーザーって中国人が多いみたい。
へー、教えてくれてありがとー。機能豊富そうだね！ 参考までにリンク貼っとくね。 もう一個情報。antvのリーダーってechartsの開発者なんだって。 マジで？なんで？ 陰謀論を語らせてもらうぜ。 D3jsはどうなの？D3jsはローレベルだけど、AIがあれば簡単じゃん。 Plotってやつならスタンドアロンだよ[0]。でも、深さと範囲で言ったらD3に敵うもんないと思うけどねー。 最近書いた論文でPlot使ったんだけど、Plotだけが求めてたチャート作れたんだよねー。対数スケールを使ったグループ化された棒グラフとか。例えばこれ→https://github.com/josephg/egwalker-paper/blob/master/diagra…。echartsは試してないけど、良いなら試してみる価値あるかも。 matplotlibでも同じようなの作れるんじゃない？慣れてるかどうかにめっちゃ左右されるけど。 マジ残念だよねー。D3.jsの人気を使ってObservableを宣伝したかった以外に理由が思いつかない。 ObservableがD3を手に入れたのいつ？最後にD3見たの5年くらい前だけど、オープンソースのライブラリだと思ってたんだけどなー。 ここ数年の話だけど、正確な時期は分かんない。たぶん重要なこと見落としてるかもだけど、Mike BostockがObservable共同設立したのが4～5年前？だから、事実上ずっと同じクルーだったんだけど、D3のドキュメントをObservableのnotebookと密接に結び付けるって決めたんだよね。 ＞When did Observable get their hands on D3？” マジで意味不明な意見だなー。D3のコードをコピペしたいだけなら、ドキュメントがObservableでホストされてるせいで問題あるかもね。でもD3のAPIとかデザインパターンはObservableと全く関係ないじゃん。PyTorchのドキュメントがmkdocsで作られてるからPyTorch使わない、みたいなもんじゃん？しかも、Observableが制限になってるとしても（そうじゃないけど）、全部オープンソースなんだから叩くのおかしくね？金払わないとドキュメント見れないわけじゃないし、Observable PlotとかObservable frameworkとか、色々vizのエコシステムに貢献してるじゃん。echartsは良いツールだよ。宣言的な構文はちょっと変だけど、コンポーネントライブラリに簡単に組み込めるし。AWS Quicksightとか、今でも多くのBIツールで使われてるらしいし。 Observableが今のD3のエコシステムにめっちゃ影響与えてるって言うのは別に変なことじゃないと思うけど。D3のAPIが変わったって言うより、たくさんの学習リソースとかサンプルとかドキュメントがObservableのreactive notebook形式に作り直されてて、Observable使わない人にとっては間接的で分かりにくいんだよね。D3のことめっちゃ詳しい人には関係ないかもだけど、初心者にとってはちょっと嫌かも。別にいいんだけどね！コピペだけの問題じゃなくて、他の実行環境を学ぶ必要なくD3を使いたいってことなんだよね。時間とか集中力が限られてるなら当然じゃん？ Pre-observable時代は、d3でリアルタイム更新する複雑なやつ作ったんだよね。d3って考え抜かれてるけど複雑で大変だったけど、ドキュメントとかサンプルのおかげで理解できたし、結果は最高だったよ。でも数年後、簡単なやつ作ろうとしたらd3のバージョン上がってて、サンプルとか全部Observableになっててマジ無理。概念も忘れてるし、Observableからどうやってd3を取り出すかわからんくて諦めたわ。悲しい。 俺も同じで、結局Apache Echartに落ち着いた（他の人もそうみたいだけど）。 俺も経験豊富なエンジニアだけど、D3を初めて触ってみた感想はマジそれ。notebooksは余計なハードルって感じ。大したことないけど、ちょっとイライラする。 イタリック体どんだけ使ってもいいけど、それは大胆な主張じゃないと思うし、反例も意味不明。D3は最高のドキュメントがあるライブラリの一つ。書籍もYouTubeビデオもたくさんあるし、メンテナーも頑張ってる。 長文レスありがとう。でも誤解されてる気がするから、いくつか釈明させて。ObservableはD3を学ぶ上での主要な媒体になってる。公式サンプルとかドキュメントとかObservableの環境に組み込まれてて、独自のモデルとか構文とか実行方法がある。それは些細なことじゃなくて、JavaScriptでD3を使いたい人にとってはマジで障害。 全然関係ないけど、「理解を外注する」って表現初めて聞いた。めっちゃいい。 ＞Observable NotebookをAIに変換しろ。 ＞でも、D3ドキュメントは、無料のインタラクティブなObservable Notebooks形式である方が、ドキュメントが全くないよりはマシ。 例を挙げてくれる？俺は10年近くD3使ってるけど、ドキュメントはREADMEから静的なページに変わっただけでしょ（https://d3js.org/d3-selection/selecting）。何がそんなに悪いの？俺には同じに見えるんだけど（https://github.com/d3/d3-selection/tree/86）。bl.ocks.orgのこと言ってるなら、それはD3のドキュメントとは別。 APIドキュメントがなくなったわけじゃなくて、初心者の学習体験が悪化したってこと。Observable優先になったせいで、新しいユーザーはD3を理解するのがマジで難しくなった。Observableとかいう新しいランタイムとかメンタルモデルに慣れないといけないから。例は増えてるけど、Observableとかのリアクティブなnotebookモデルを前提にしてる。 好きなだけイタリック体を使えるってことね。マジでウケるんだけど。 ああ、出た！オープンソースだから批判しちゃダメっていうやつ！ ＞ObservableはVueアプリにD3のパイチャート入れたいときに、D3のAPI呼び出しをreactive cell valuesから解きほぐさないといけないのはマジ勘弁” Observableを攻撃するのは変じゃない？全部オープンソースで公開してるのに。 SQLからのアドホックなビジネスレポーティングにチャートが必要だったんだけど、EChartsは使いやすさ、使えるチャートの種類、インタラクティブ性、見た目の良さ、全部がちょうど良かったんだよね。 VisXのコントロール性がマジで好き。 Plotlyが好き。 Plotlyも検討したけど、Javaバックエンド用にJsソリューションが欲しかったから、GraalVMでSQLチャートレイヤーを実行できるようにしたかったんだ。 色々試した結果、うちのチームは去年Apache EChartsに落ち着いたんだけど、後悔してないよ。ドキュメントは最高だし、パフォーマンスも良いし、設定も色々できるのに使いやすいし、必要なチャートタイプ（棒、積み上げ棒、地図、ズーム/スクロール可能な時系列、散布図）全部サポートしてるし。 ag-grid chartと比べてどうなの？ 有料プランのあるライブラリは評価してないよ。 Vegaはどう？ line raceめっちゃクールじゃん。 見た目は neatだけど、誰かが言ってた Hans Rosling の例と違って、アニメーションは追加の情報がないよね。最後のフレームだけ見せる方が、もっと早く理解できるし、アクセスしやすいと思う。chartjunkの一種だね。 プレゼンターが自分が詳しいトピックで質問するみたいなもんでしょ？このアニメーションも同じ。情報を隠して読者の興味を引きつけてるんだよ。誰が一位になるか予想しちゃったし。もし最初からチャートを見せられてたら気づかなかったかも。YouTubeでこれがどれだけ効果的か分かるよ。このアニメーションだけで多くのフォロワーを集めてるチャンネルがあるんだから。 完全に無関係ではないけど、昔 The D in Vegas にあった、今はLinqにある機械式の競馬ゲームも、人間の心理に似たような効果があるよね。ほとんどのスポーツイベントでのギャンブルもそう。アップダウンが多いものとか。カジノゲームを開発してた15年くらい前から考え始めたんだ。ゲームとか未来のイベントでも同じことが言える。結果が分からない時、時間っていうのは感情的なピークと谷の連続として経験されるんだ。デザインのフックとして最高だし、情報をエンコードする強力な方法だと思う。特に時間参照データがあって、他の軸とかサイズを使い果たした場合とかね。この「レース」を使うことに対する主な主張は、x軸を他のことに使って、グラフ全体を時間経過で変化させることができるってこと。 こういうチャンネルは、情報をより良く表示する方法だから存在するんじゃないよ。クリックベイトのためだよ。 便乗するみたいで悪いけど、人間の観察者っていう穏やかな仮定をすれば、ここにはもっと多くの情報があるって言えると思う。 アニメーションは追加情報がないってことね。いや、情報を削ってるんだよ。進化に合わせて、ある期間に集中できるようにね。グラフが変化していくのを見るのは、静的なグラフを見るのとは違うから、chart junkとは言えないんじゃない？ 親コメントの考えだと、テーブルが常にベストな選択になるってこと？ だって、アクセシビリティとか、伝えたいデータの把握が、完全にオーディエンスに依存しないって前提じゃん。もし自分が静的なチャートが好きでも、アニメーションチャートの方が、より多くの人に印象的に伝わるかもしれないし。 めっちゃ同意。彼は“chart junk”って言葉を使いたくてウズウズしてたんだなー（笑）。 もっと早く要点が伝わるかもね。でも、面白みは減るかも。これは二度と見ないグラフの例だし、情報なんてどうでもいい。ただのオモチャみたいなもんだし、“おっ、このvizualisation packageはクールじゃん”って思わせるための、ちょっとした楽しい例って感じ。 Hans Roslingに敬意を表して。 なんか変だぞ。データは“life-expectancy-table.json”なのに、タイトルはIncomeになってる。どっちが間違いなんだ？ ファイル名とは違って、ソースデータには国と年ごとの所得、寿命、人口が入ってるよ。 ＞＞ちなみに、ノルウェーよくやった！ ウェブクライアント向けのチャートライブラリを探してるなら、charts.cssもおすすめだよ。マジで神。コンセプトが他のライブラリよりシンプルで、同じことができちゃう。サーバーサイドレンダリングとかhtmxとか、昔ながらの方法で使うのがめっちゃ簡単になる。 同じように、JSで強化された なんかSvelteっぽいなーって思ったんだよね。案の定、Rich Harris本人がNYTにいた頃に作ったやつだった。 Chart cssは他のラインチャート描画ライブラリと変わんないよ。EChartsとは全然別物。 ＞同じことができるって言ってるけど、 EChartsの方が機能が多いのは同意だけど、セマンティックなテーブルデータをチャートに変換するのはいいね！ 一番の問題は、SVGみたいにDOMでポイントを表してること。データポイントが大量にあると、このライブラリはパンクする。 これはキープだな。もっとコメントを表示（1）
https://github.com/antvis
良さそうだけど、ドキュメントのウェブサイトがマジでクソ。でも最近ちょっとマシになったみたい。
e.g
https://g6.antv.antgroup.com/
全体的に見て、Apacheにしとけば間違いないと思う。
下の方までスクロールすると、コメント欄全体が検索結果とAIのサジェストを修正するキャンペーンみたいに見えてくるんだよね。ありきたりな業者によるレビューみたいなコメントが多すぎる。「素晴らしい製品！」とか「X、Y、Zを試したけど、これで問題解決！」とか。
[0]: https://github.com/observablehq/plot
ObservableとD3って同じ人が作ったんだよ。
＞Observable Notebooksの形式でD3ドキュメントがある方が、ドキュメントがないよりマシ。
AIでObservable Notebookを普通のJavaScriptファイルに変換できるってマジ？
＞AIで変換しろ
っていうのは解決策になってない。誰もがブラックボックスに頼りたいわけじゃない。もっとコメントを表示（2）
D3.jsのドキュメントは昔は良かったのに、今はAIに頼らないと理解できないの？
そこが核心。今のD3ドキュメントは、昔のnotebookベースじゃないD3ドキュメントよりマジで質が悪い。
Observableはデータノートブック作りたいときには最高。でもVueアプリにD3のパイチャート入れたいときに、D3のAPI呼び出しをreactive cell valuesから解きほぐさないといけないのはマジ勘弁。見た目は普通のJavaScriptなのにそうじゃなくて、コピペしたらコンパイルエラーとかランタイムエラーになるし。
D3のリソースがD3のドキュメントとD3のデモとObservableのデモをごっちゃにしてるのが問題なんだよね。全部別々なら誰も文句言わないのに。
そうそう、書いた通り。“d3のコードをコピペしたいだけなら、Observableでホストされてるドキュメントに苦労するかも”ってね。
ちゃんとAPI（selectionsとかbindingsとかupdate patterns）を学べば、どんなチャートだってレイアウトとかジェネレーターを使いこなすだけよ。
d3 pieのドキュメントはここにあるよ：https://d3js．org/d3-shape/pie
Observableなんていらないし。でも、Observableからコードをコピペしたいなら、この例が超シンプルだよ：https://observablehq．com/@d3/donut-chart/2
reactive cellなんてないし、cellの中のコードをコピペするだけ。
マジで？ノートブックエディタもオープンソースになったの？GitHubで見つからないんだけど。長らくプロプライエタリだったノートブックエディタが、Observableに対する不満の大きな原因なんだよね。
https://echarts.apache.org/examples/en/editor.html?c=line-ra…
スイッチを切り替えてレースをトリガーして。ちなみに、ノルウェーよくやった！
https://en.wikipedia.org/wiki/Chartjunkもっとコメントを表示（3）
そういうチャートは、タイトルで言うと「誰が勝つか当てられない」みたいなもん。
“X over 50 years videos” にハマって、満足感を得るために最後まで見ちゃうけど、結果を全然覚えてないんだよね。
動画形式のエンゲージメントベイトだよ。リアルタイムで更新されない限り、このWebページ上のチャートは chart junk だよ。
アニメーション版では、人間の観察者はリアルタイムの観察者の精神状態を占めることを許されている（強制されている）。「Xが飛び出した - 長く続くかな - おー、Yが急上昇してる」っていう経験をするんだ。
この生々しい経験は重要で、すべての情報が最初に提示された場合、事後的に再現することは不可能だよ。
(編集: 観察者にもっと印象を残すという意味で「より多くの情報」)
2. Chartjunk の wiki は Adolf Loos の「装飾は犯罪である」という考えを引用してる。でも、現代のミニマリズムは終わって、装飾の喜びを再発見する過程にあると思う。これは美的選択であり、同意しないかもしれないけどね。
https://en.wikipedia.org/wiki/Ornament_and_Crime
もし仕事で使うダッシュボードがこんな感じだったら、一週間でキレるわ。でもこれは仕事用じゃないし、EChartsを覚えてもらうためのデモだから、目的は達成されてる。
＞https://www.youtube.com/watch?v=hVimVzgtD6w
”（2003）”
＞https://echarts.apache.org/examples/data/asset/data/life-exp…
原油価格とどれくらい相関があるんだろう？
https://pancake-charts.surge.sh/
(NYT graphics teamが開発してcovid chartsに使われたやつ)も昔から好き。
きれいなチャートだけど、もうメンテされてないみたいで残念。
＞EChartsとかamChartsのデモ見た？基本同じだけど有料版みたいなもんじゃん。
＞https://www.amcharts.com/demos
chartscssに文句はないけど、子供のおもちゃと宇宙船くらい違う。仕事でApache Supersetみたいな分析アプリ作ってるけど、chart.cssじゃ無理だわ。
ECharts使ってて満足だけど、データテーブルの各行にスパークライン入れたい時があって、EChartsインスタンス大量に作るのは大変だから、このライブラリは良さそう。
アナウンス: “ECharts, a JS charts package”
予想: 1年以内にメンテされなくなる。
アナウンス: “Apache ECharts, a JS charts package”
予想: 来年もメンテされる。
