タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ニューヨーク・タイムズやOpenStreetMapなど、さまざまなウェブサイトで利用されているデータ可視化ライブラリが「D3.js」です。そんなD3.jsの開発10周年を記念して、開発者のマイク・ボストック氏が「D3.jsを10年間開発する中で学んだこと」を公開しています。 10 Years of Open-Source Visualization / Mike Bostock / Observable https://observablehq.com/@mbostock/10-years-of-open-source-visualization ◆「使用例」がツールの普及に役立つ ボストック氏によると、新たに開発されたツールは、開発者以外の人々にとっては異質なモノであるとのこと。そのため、ツールを普及させるには「ドキュメント」「チュートリアル」「使用例」などを準備する必要があります。 ボ
筆者は Scrapbox を愛用しており、Scrapbox プロジェクトのページ間のグラフ構造を可視化するためのツールを作ったりしています。 GitHub - mamezou-tech/sbgraph: Fetch Scrapbox project data and visualize activities. このツールは Graphviz の dot 形式ファイルを出力するので手軽にグラフ構造の可視化が可能です[1]。 D3.js を使うと Graphviz よりインタラクティブな可視化アプリを作れます。グラフ構造の可視化には、force simulation を使うと効果的です。 Force-Directed Graph かなり前に Vue 2 と D3.js を使って可視化のための SPA (Single Page Application) を試作して放置していました。 放置している
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
Using React with D3.js
React.js is a JavaScript library that helps with building complex user interfaces. This website is written using React! I would recommend being familiar with React for this article. It might be worth running through the official tutorial or running through a book (I've heard good things about this one) to make sure you don't stumble on anything in here!
D3.jsを使ってデータをビジュアライズしよう
D3.jsはSVGを使って高度なビジュアル化を行うライブラリです。 グラフに限らず、様々なチャートやビジュアルの表現ができますが、複雑な仕組みを覚えなければなりません。他のグラフライブラリなどではCSVデータを適用するだけというものもありますが、D3.jsはそこまで簡単ではありません。 今回はD3.jsで折れ線グラフ（Line Chart）を描画してみる | Will Style Inc.｜神戸にあるウェブ制作会社を参考に、なるべく段階を区切ってD3.jsの使い方を解説します。 インストール インストールはMonaca IDEのJS/CSSライブラリの管理でD3を検索するか、index.htmlに次の記述を行います。 <script src="https://d3js.org/d3.v5.min.js"></script> HTML側での準備 HTMLは body タグ内に次の記述を行いま
【2022年1月28日 電子版を無料にしました】 【紙版の頒布は終了しました】 『ばぶでもわかるおぶざばぶる D3.jsとObservableではじめるデータビジュアライゼーション超入門』 JavaScriptのライブラリD3.jsを使ったデータビジュアライゼーション超入門本です。 WebサービスObservableを使うため、ソフトウェアをインストールすることなく、すぐに始めることができます。 JavaScriptを使ってビジュアルを作りたい方やプログラミング学習中の方におすすめします。 サンプルコードは、本文で紹介しているサポートページで公開しています。 こちらもご覧ください。 技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました｜すぎもとたつお｜note https://note.com/sugi2000/n/n0dd991a3a0c4 特設ウェブサイト https://obser
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
billboard.js 3.0 release: D3.js v6 support & new candlestick type!
For the detailed release info, please checkout the release note: https://github.com/naver/billboard.js/releases/tag/3.0.0 TL;DRthe major version changes is mainly to support for D3.js v6new candlestick(OHLC) type support.export() API enhancementsnew subchart APIsD3.js v6 SupportD3.js major release v6 came out August of 2020, with some breaking changes. We were working for the adoption and heard fe
データ可視化の成り立ち・歴史・現在地 〜折れ線グラフの誕生からD3.js、Observableまで〜 - Qiita
はじめに 以前のQiita記事では、データ可視化の方法論を学ぶStanford大の授業を取り上げました。本記事では、データ可視化の歴史に注目します。 まず書籍『データ視覚化の人類史―グラフの発明から時間と空間の可視化まで』を紹介、特に1990年代から2000年代のイベントを概観した後、2010年代ではD3.js、Vegaプロジェクト、Observableを取り上げます。最新情報を知る場として、2021年12月末に行われ、録画が公開されているData Visualization Japanのミートアップについても紹介します。 データ可視化の成り立ちと歴史 折れ線グラフや棒グラフはいつどのように生まれたのか。データ可視化とは何か。それはどのように始まり、どう活用されてきたのか。そんな問いかけに答えてくれる書籍が、つい最近出版、翻訳されました。 『データ視覚化の人類史―グラフの発明から時間と空間
作ってるアプリにタイムラインチャートを組み込もうと思っても、案外グラフ系のオープンソースライブラリだと表現できないこととかありますよね。今回はD3.jsを使ってタイムラインチャートを実装する方法を説明していきます。 D3.jsを使ってチャートを描画することに加えてドラッグ&ドロップやズームを使って画面操作によってデータを変更できるようなものを作っていきます。 (QiitaにアップロードできるGIFのサイズだとわかりにくいですね。。。) タイムラインチャートの実装 描画の実装 描画するところまでを説明します。 データセットの準備 今回は、1日のスケジュールを、時間軸を持ったタイムライチャートで表現します。 1日分のスケジュールを一つのチャートにする体で、各スケジュールごとに開始時間・終了時間を持つデータ構造とします。 var category = ['睡眠', '朝ご飯', '洗濯', 'テ
凸包とは？ 出典: フリー百科事典『ウィキペディア（Wikipedia）』 ナビゲーションに移動検索に移動 赤で表される集合の凸包(Wiki)は、青で表された凸集合である。 数学における凸包（とつほう、英: convex hull）または凸包絡（とつほうらく、英: convex envelope）は、与えられた集合を含む最小の凸集合である。例えば X がユークリッド平面内の有界な点集合のとき、その凸包は直観的には X をゴム膜で包んだときにゴム膜が作る図形として視認することができる。 凸包に関するアルゴリズムはたくさんあると思いますが、どれもシンプルとはいえないので、ここではD3.jsを利用した凸包描画方法を紹介いたします。サンプルコードではSVGになっていますが、D3.jsはCanvasの描画もサポートしているため、ちょっと書き方を変えればCanvasでも描画可能です。 HTMLとCSS
こんにちは、CTOの奥田です。 あっという間に年の瀬となり、もう2020年が終わろうとしていますね。 この記事を書いているのは2020年の年末なのですが、今年の年末年始は例年とは少し違ったものになりそうですね。 私も帰省はせず、自宅で過ごすこととなりそうです。 さて、今回は久しぶりにD3.jsの記事です。 構築したグラフが複雑になってくるとズーム機能が欲しくなってくると思います。 D3.jsにはBrushという機能があり、意外と簡単にズームさせることが出来ます。 今回はBrush機能を使ったズーム機能の実装方法についてご説明できればと思います。 Table of contentsチャートを描画するブラシを追加するズームするズームをリセットする「戻る」と「進む」を実装するさいごにチャートを描画するまずはチャートを描画します。 チャートを描画するまでの書き方は前回までのブログを参照ください。
D3.jsが役に立つケース Pythonにおいてインタラクティブデータ可視化のほとんどのユースケースはbokehyやPlotly などのライブラリにより実現可能です。 しかしいくつかのユースケースではライブラリの提供する自由度の制限により本当に表現したいことが実現困難ということもあります。 たとえば以下のような複数グラフ間でのインタラクティブな表現はD3が簡単です。 D3.jsの利用はJupyter Notebookではやや煩雑な手順を踏む必要がありました。 （notebookではpy_d3ライブラリを使うことを推奨します） しかしJupyterLabでは気軽に利用可能となっています。 ですので、"Bokehで実装するのは難しいから"という理由でデータ可視化を諦める必要はありません。 ※ただしコーディングを始める前に、”その可視化は本当に必要か？”と疑うことは重要です。 D3ってなに？ D
d3.js (v6) でブラウザに地図を描く方法
d3.js とは d3.js はデータビジュアライゼーションJavaScriptライブラリであり、棒,円,折れ線グラフなんてものは序の口で様々なデータ可視化ができる高機能ライブラリ。その実力は 紹介されているギャラリー(サンプル) を見れば一目瞭然。前からこれを使って、GeoDataで地理情報を可視化して遊んでいたのですが、バージョンが上がるごとに若干作法が変わるので定期的にウオッチが必要。今回は現在(2021.5)の最新であるv6をキャッチアップするとともに、最近、コロナ禍で色々な地域データの可視化も盛んなので改めてその方法をまとめておく 参考D3.js – Data-Driven Documents 地図データの準備 d3.js で地図を描く場合、そのデータをGeoJson形式で準備する必要がある。さらに、一般的にはデータサイズが大きくなりがちのGeoJsonを軽量化したtopojso
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界中で利用される「D3.js」の開発者が10年間で学んだこととは？
Vue 3 と D3.js で作る可視化アプリ | 豆蔵デベロッパーサイト
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
ばぶでもわかるおぶざばぶる:D3.jsとObservableではじめるデータビジュアライゼーション：すぎもと組
)
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
D3.jsでタイムラインチャートを作る - Qiita
手軽にD3.jsでSVG凸包を描画する - Qiita
D3.jsでブラシを使ってグラフをズームさせる | Will Style Inc.｜神戸にあるウェブ制作会社
JupyterLab で D3.js × Python - どこから見てもメンダコ
kinebiotoriyose.xblog.jp
x.com
x.com
x.com
ema625.hatenadiary.com
xtech.nikkei.com