タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ニューヨーク・タイムズや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) を試作して放置していました。 放置している
Google Apps Scriptを使ってスプレッドシートをD3.jsで可視化する | DevelopersIO
データアナリティクス事業本部、池田です。 設計作業の中で、各処理の関連性（先行・後続、依存関係など）を有向グラフとして可視化することがありました。 始めは PlantUMLのオブジェクト図 で作図をしていたのですが、 表示する要素やそれらをつなぐ線の数が多くなると見づらくなってしまいました。 そこで、 D3.js を使用して情報の可視化 を試みました。 加えて、情報の更新を容易にするため、Google スプレッドシートを併用することにしました。 （細かいGoogle Apps Scriptの操作説明は省略しておりますので、 弊社の他のブログ などを参考にして下さい。 また、本文では以降それぞれ、GAS・スプレッドシート・d3と表記致します。） 作成結果 ブラウザ上で、3ファイル作るだけ で可視化できました。 こんなの（PlantUML）が ↓ こうなる（d3） スクリーンショットにしてしま
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!
by Amelia Wattenberger on June 4th, 2019 Learn how to visualize data with Fullstack D3 and Data Visualization You did it! You grabbed a data set and visualized it, right here in the browser. Congratulations, that is no easy feat!
はじめに 私はもともとネットワークとかインフラ系の話をやっている人で、ソフトウェア開発はやっていなかったのですが、この 1 年くらいで D3.js とか Vue.js とかを触るようになりました。この記事では、私の体験をもとに、フロントエンド技術が主業務ではない人 (私のようなIT基盤系エンジニアなど) 向けに、D3.js をつかったデータ可視化をする際の考え方をお伝えしたいと思います。プログラミングのノウハウというよりは、プログラミングをする前に知っておくべきこと・考えておくべきこと、みたいな形になるので、個人差があるとは思いますが、まあ参考程度に。 D3.js を始める前に [2019/9月時点情報] D3.js は v3 と v4/v5 の間に大きな変更が入っています。 d3/CHANGES.md をみてもらえるとわかると思うのですが、v4 (2016/6) の変更箇所の多さよ……。
by Amelia Wattenberger on June 4th, 2019 Learn how to visualize data with Fullstack D3 and Data Visualization You did it! You grabbed a data set and visualized it, right here in the browser. Congratulations, that is no easy feat!
An Introduction to D3.js
So, you want to create amazing data visualizations on the web and you keep hearing about D3.js. But what is D3.js, and how can you learn it? Let’s start with the question: What is D3? While it might seem like D3.js is an all-encompassing framework, it’s really just a collection of small modules. Here are all of the modules: each is visualized as a circle - larger circles are modules with larger fi
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 タグ内に次の記述を行いま
セキュリティ本部 セキュリティ情報統括室に所属 システム開発者。2000年問題で「2038年問題は定年で対応しなくていい！」とフラグを...。 CHAGE開発者のヒラマツです。 CHAGEの紹介（IIJ内製調査システム CHAGE のご紹介）と並行して、CHAGEの中が気になる人に、CHAGEで使われている技術をちょっと濃い目に解説するという企画です。 今回は、以下のサイトのD3.jsというJavaScriptライブラリの紹介です。 https://d3js.org/ D3.js – Data-Driven Documents D3.jsは、比較的軽い動作で、動的に(JavaScriptで)、いろいろなWebドキュメントを作れる便利なライブラリです。D3.jsを使うと、ドキュメントを動的に生成するWebサイトが、コスパよく作れます。多様な表現がコンパクトに書けて、それでいて、柔軟にカスタマ
【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
概要 deck.glを使ってWebGLで描画した地図の上に、D3.jsを使ってsvgをオーバーレイしボロノイ図を描画します。 ソースコード 解説 deck.glでは、緯度経度と画面上の座標の投影変換をViewportクラスが担っています。 Viewportクラスは通常外部から利用できるような形でインタンス化されていませんが、サブクラスであるWebMercatorViewportを利用することで、投影変換を行うためのprojectメソッドを外部から利用することができます。 WebMercatorViewport Class projectメソッドを使って母点の画面上の座標を取得し、それらを基にd3-voronoiモジュールを用いてボロノイ図を描画するための座標を算出しています。 あとは、webGL上にオーバーレイしたSVG要素にPathエレメントを設置してボロノイを描画しています。 impo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界中で利用される「D3.js」の開発者が10年間で学んだこととは？
Vue 3 と D3.js で作る可視化アプリ | 豆蔵デベロッパーサイト
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
Interactive Charts with D3.js
これから D3.js を始める人のためのメモ - Qiita
Interactive Charts with D3.js
CHAGEの裏側: D3.jsの紹介 | IIJ Engineers Blog
ばぶでもわかるおぶざばぶる:D3.jsとObservableではじめるデータビジュアライゼーション：すぎもと組
)
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
D3.jsでタイムラインチャートを作る - Qiita
手軽にD3.jsでSVG凸包を描画する - Qiita
D3.jsでブラシを使ってグラフをズームさせる | Will Style Inc.｜神戸にあるウェブ制作会社
JupyterLab で D3.js × Python - どこから見てもメンダコ
deck.glとD3.jsを組み合わせて、地図上にボロノイ図を描画する
anond.hatelabo.jp
www.elecom.co.jp
www.itmedia.co.jp
akemi1218.hatenablog.com
mainichi.jp
ameblo.jp/ecochiko