Reactで使えるヒートマップライブラリ3選

2023/07/28 6 users React グリッド ライブラリ ヒートマップ ツール

7月27日、Reactのための最高のヒートマップライブラリについて紹介します。 ヒートマップは、データを色分けされたグリッドで可視化するための強力なツールです。 この記事では、Reactでヒートマップを作成および操作するために使用できる3つの人気のあるライブラリ、react-heat-map、D3.js、およびSyncfusionを紹介しま... 続きを読む

Vue 3 と D3.js で作る可視化アプリ | 豆蔵デベロッパーサイト

2023/02/10 15 users 豆蔵デベロッパーサイト Vue 3

筆者は Scrapbox を愛用しており、Scrapbox プロジェクトのページ間のグラフ構造を可視化するためのツールを作ったりしています。 GitHub - mamezou-tech/sbgraph: Fetch Scrapbox project data and visualize activities. このツールは Graphviz の dot 形式ファイルを出力するので手軽にグラフ構造の可視化が可能です[... 続きを読む

世界中で利用される「D3.js」の開発者が10年間で学んだこととは？ - GIGAZINE

2021/03/21 21 users GIGAZINE OpenStreetMap ウェブサイト

ニューヨーク・タイムズやOpenStreetMapなど、さまざまなウェブサイトで利用されているデータ可視化ライブラリが「D3.js」です。そんなD3.jsの開発10周年を記念して、開発者のマイク・ボストック氏が「D3.jsを10年間開発する中で学んだこと」を公開しています。 10 Years of Open-Source Visualization / Mike Bostock /... 続きを読む

Google Apps Scriptを使ってスプレッドシートをD3.jsで可視化する ｜ DevelopersIO

2019/08/13 35 users plantUML DevelopersIO 作図 後続 池田

データアナリティクス事業本部、池田です。 設計作業の中で、各処理の関連性（先行・後続、依存関係など）を有向グラフとして可視化することがありました。 始めは PlantUMLのオブジェクト図 で作図をしていたのですが、 表示する要素やそれらをつなぐ線の数が多くなると見づらくなってしまいました。 そこで、 D3.js を... 続きを読む

今更ながら、仮想通貨NEMの流出を振り返ってみる（流出経路をd3.jsで可視化してみる） - 前略、後略、中身なし

2018/02/23 22 users 後略 エクスプローラ 前略 Nem 仮想通貨NEM

2018 - 02 - 14 今更ながら、仮想通貨NEMの流出を振り返ってみる（流出経路をd3.jsで可視化してみる） T/O ...ではあるのですが、簡単に。。。 動機 久々にd3.jsをいじってみたかった。 NEM の流出経路とか、可視化するネタとして面白いかと思った。 道具 NEM の送金経路 ブロックチェーン ・ エクスプローラ ： NEM Blockchain Explorer v3 ア... 続きを読む

簡単にガントチャートとかクラス図とか書けるやつ - Qiita

2017/07/26 634 users ガントチャート Mermaid UML Qiita 図形

mermaid は、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.js の機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、 ヘルプ はGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ できること 以下の図が描け... 続きを読む

d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita

2017/04/02 99 users ビヨーン Qiita 描画 ヤツ たくさん

スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実... 続きを読む

データの可視化に使えるD3.jsでユーザーのページ遷移を表現してみた | PLAID engineer blog

2017/03/08 83 users PLAID engineer blog ページ遷移 可視化

D3.jsを使ってユーザーがサイト内の各ページを遷移している様子をアクセスログから可視化してみました。こんにちは、プレイドの@wikrshです。 弊社の KARTE では属性データやサイト上での行動情報など様々なデータを元に来訪したユーザーの状況をリアルタイムに可視化しており、どのような情報の見せ方をすればよりユーザーへの理解を深められるのか、社内では日々議論・改良を重ねています。 今回は現在KA... 続きを読む

d3.jsで国土地理院のベクトルタイルを使う - Qiita

2017/01/06 12 users Qiita ニューヨークタイムズ block シリア 諸都市

ニューヨークタイムズがシリアの諸都市の被害状況を可視化した記事 を読み、ここに使われている地図はオープンストリートマップのデータをd3.jsで読み込んでいるのではないかと考え、まあ結果的には違ったのですが、 国土地理院のベクトルタイル で似たようなものを作れないかと思い、試してみました。 VectorTiles / Mike Bostock's Block 上記のコードを国土地理院のベクトルタイル... 続きを読む

2017年に注目しておきたい、JavaScriptのライブラリのまとめ | コリス

2016/11/28 380 users コリス jQuery React ライブラリ ビッグデータ

数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。 D3.js ビッグデータは成長産業で、... 続きを読む

【D3.js】サーマーウォーズのワールドクロックを作る | #GUNMAGISGEEK

2015/07/06 141 users 地軸 example 地球儀 SVG 地形

アノ時計っぽいものを作ってみました。 example 解説 基本的には下記記事をちょこちょこっと改良しただけです。 【D3.js】 SVGで地球儀を描く 地軸を傾けながらSVGで地球儀を表示する ポイントとしては地形を裏用(グレー)と表用(ピンク)に２重に描画しているところでしょうか。 clipAngleメソッドを使って描画される範囲を変えています。 ・裏用地形描画 var projection1... 続きを読む

Rで解析：インタラクティブなヒートマップ！D3.jsを利用した「d3heatmap」パッケージの紹介

2015/06/24 35 users インタラクティブ Heatmap ヒートマップ 解析 モタつき

ヒートマップをインタラクティブに操作する「d3heatmap」パッケージがリリースされました。本パッケージのメインコマンド”d3heatmap”は「heatmap」や「heatmap.2」パッケージと多くが共通しているので、これらパッケージの使用経験があるとすぐに使いこなせると思います。 ためしに本パッケージより「400*50の20,000データ」を出力したところ、多少のモタつきはありますがぐりぐ... 続きを読む

Rで解析：JavaScript D3.jsで地形データを動的操作！「exCon」パッケージの紹介

2015/06/23 34 users オフィシャルページ ウェブブラウザ インタラクティブ グラフ

最近、JavaScriptライブラリのD3.jsを利用したRのパッケージが多い気がします。紹介するパッケージは地形データをブラウザでインタラクティブに表示する「exCon」パッケージです。 パッケージで利用されている「D3.js」はMike Bostock氏が2011年から作成している、ウェブブラウザで動的にグラフやテーブルなどを表示するライブラリと認識しています。オフィシャルページでは様々な表示... 続きを読む

Raspberry Piで取得したセンサーデータをリアルタイムに可視化する（グラフ編） | Milkcocoa Engineers' Blog

2015/06/17 61 users Milkcocoa Engineers リアルタイム 描画

前々回、前回に引き続き、Raspberry Piでセンサーデータを取得して、Milkcocoaを使ってリアルタイムにブラウザ上にグラフ化する方法を紹介していきます。 弊社オフィスの玄関の明るさをリアルタイムで表示しているデモはこちらです 今回は以下の流れで、保存されたセンサーデータのリアルタイムなグラフの描画について説明していきます。 D3.jsで折れ線グラフを表示する際に必要な知識 Milkco... 続きを読む

Excel上でD3.jsを使ったグラフを表示する「E2D3」を使ってオリジナルなグラフを表示してみた。 | GUNMA GIS GEEK

2014/10/29 88 users GUNMA GIS GEEK グラフ Excel上 エー エム

Excel上でD3.jsを使ったグラフを表示する「E2D3」を使ってオリジナルなグラフを表示してみた。 ファーストインプレッション！ E2D3 ver. 0.2 (Excel to D3) | MA【エム・エー】 by Mashup Awards Excelでいつも作っているグラフをもっと恰好良くしたくないですか？でも，デザインソフトを自分で習得するには時間がかかりますし，グラフ作成をデザイナーに... 続きを読む

鉄道路線データをグラフとしてCytoscapeで可視化する 4: 東京メトロのデータを例に - Qiita

2014/09/08 65 users Qiita iPython notebook グラフ 可視化

鉄道路線データをグラフとしてCytoscapeで可視化する 4: 東京メトロのデータを例にCytoscape3.1.1(9)データ可視化(25)d3.js(51)JavaScript(3440)keionoが2014/09/08に投稿(2014/09/08に編集)編集履歴(3)編集リクエストを作成する はじめに このシリーズは、Cytoscapeを使ってやIPython Notebook、Pand... 続きを読む

D3.jsにあてはまらないこと | POSTD

2014/07/09 94 users hackernews POSTD API チャート 誤解

POSTD は、HackerNewsなど日本国外で話題になっている開発者向けのブログ記事やニュースなどを翻訳し、日本の開発者にむけて配信するメディアです。最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解... 続きを読む

おねがいシンデレラ PVの解析 - AOI-CAT's diary

2014/06/02 18 users AOI-CAT's diary 解析 トライアドプリムス

2014-06-03 おねがいシンデレラ PVの解析 D3.js アイドルマスター おねがいシンデレラをD3.jsで 相関図 同じ画面に登場したり、一緒に並んでいるのをカットごと数えました。 ニュージェネはいつもいっしょにいるなぁ トライアドプリムスもけっこう一緒にいる あんきらはもちろん、きらりんと小さい子*1の組み合わせ多い ままゆ＋智絵里＆かな子が意外な組み合わせ 茜ちゃん、パッションのだい... 続きを読む

アイマス年表 D3.js - AOI-CAT's diary

2014/05/31 41 users AOI-CAT's diary AOI-CAT 年表 データ

2014-05-31 アイマス年表 D3.js アイドルマスター D3.js アイドルマスターのシリーズと主要イベントの年表をD3.jsで。 最近、あれいつごろのことだっけなと思うことが増えたので。 ライブツアーは基本的に最終公演日、2デイズは初日のみです。データは捨て６から……じゃなくてWikipediaからです。 AOI-CAT 2014-05-31 16:49 コメントを書く ゆかり王国、王... 続きを読む

【D3.js】 LeafletにSVGをオーバーレイする。 | GUNMA GIS GEEK

2014/05/14 50 users Leaflet SVG モバイルフレンドリー オーバー ソース

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.... 続きを読む

D3.js入門 – 「データ・ドリブン」という特徴について ｜ Developers.IO

2014/04/21 65 users Developers.IO データ・ドリブン 特徴 グラフ

D3.js入門 – 「データ・ドリブン」という特徴について はじめに D3.jsについて調べ始めた、t-hondaです。 前回はいきなりD3.jsとRuby on Railsを組み合わせてグラフを表示してみましたが 今回はD3.jsの入門編として、特徴と、簡単なソースの書き方について サンプルを挙げて書いていきたいと思います。 D3.jsの特徴 以下の弊社のブログ(※1)でも取り上げられていますが... 続きを読む

可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン

2014/04/14 209 users エレクトロン 敷居 グラフ 設計 データ

Tweet Tweet最近名前を聞くことが多くなってきたD3.jsを試してみています。 まだ使い始めたばかりですが、D3.jsの設計の素晴らしさに感動しています。 データを与えればグラフが表示されるというような単純なものではないので、敷居が高く感じていましたが、設計を知るほどによく出来ていて驚きます。 D3.jsとは何か？ そもそも、D3.jsとはなんでしょう？ D3.js – Data-Driv... 続きを読む

バンディットアルゴリズムのシミュレータを作ってみました ~ blog.k11i.biz

2014/03/31 13 users バンディットアルゴリズム シミュレータ BOWER ベース

2014年3月31日月曜日 バンディットアルゴリズムのシミュレータを作ってみました Posted on 12:37 by Atsushi KOMIYA | No comments お手軽に各種バンディットアルゴリズムの特性・性能を比較することができる Web ベースのバンディットアルゴリズムシミュレータを、Yeoman, Bower, Grunt, D3.js, NVD3.js, AngularJ... 続きを読む

Google Map上にGeoJSONデータを表示する | GUNMA GIS GEEK

2014/03/20 45 users GUNMA GIS GEEK GeoJSON API 参考

Google、地図アプリのデベロッパー向けJavaScript APIでGeoJSONをサポート Google Maps APIでGeoJSONデータがサポートされたらしいので、試してみました。（一部、D3.jsを使用しています） 【参考】 Combining and visualising multiple data sources – Google Maps API — Google Deve... 続きを読む

2時間縛りでd3.js挑戦してみた - mizchi's blog

2014/03/02 228 users mizchi's blog アンチ mizchi 無茶ぶり

2014-03-02 2時間縛りでd3.js挑戦してみた 何この記事 あんちべという人から無茶ぶりがきたので対応した mizchi、d3ブログ書いてくれた呑む— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian D3まだ極めてないです— 高意識エネルギー (@mizchi) 2014, 3月 2 @mizchi 2時間やろう、早く極めたまえ— 3... 続きを読む