簡単にガントチャートとかクラス図とか書けるやつ - 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... 続きを読む

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... 続きを読む

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について勘違いをしています。そこで、よくある誤解... 続きを読む

【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... 続きを読む

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... 続きを読む

「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」を執筆しました - PolyPeaceLight

2014/02/16 61 users 森藤大地 PolyPeaceLight 作者 執筆 エンジニア

2014-02-17 「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」を執筆しました 僕のような人間が書いていいのか、とは執筆前・執筆中・そして執筆が終わった今もずっと思っていますが、兎にも角にも書き終わりました。 エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)作者: 森藤大地,あんちべ出... 続きを読む

K-means 法を D3.js でビジュアライズしてみた - てっく煮ブログ

2013/11/07 62 users k-means クラスタリング 煮ブログ 動作原理 ステップ

クラスタリングの定番アルゴリズム K-means 法（K平均法）の動作原理を理解するために、D3.js を使って可視化してみました。 ステップ 最初から N (ノード数): K (クラスター数): 新規作成 図をクリックするか [ステップ] ボタンを押すと、1ステップずつ処理を行います [最初から] ボタンを押すと、最初の状態に戻ります [新規作成] ボタンを押すと、N (ノード数) と K (ク... 続きを読む

「D3.js」を使ったデータビジュアライゼーション （1/4）：CodeZine

2013/11/05 196 users Tech-Sketch スマートデバイス CodeZine

本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは！」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回は「D3.js」というJavaScriptのライブラリを利用した、データ可視化についてご紹介します。 Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッ... 続きを読む

D3.js の Data-Driven な DOM 操作がおもしろい - てっく煮ブログ

2013/10/23 190 users SVG Data-Driven DOM ライブラリー CSS

ここんところ D3.js を触ってみているんだけど、これがなかなか面白い。 D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込... 続きを読む

D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch

2013/09/02 309 users Data-Driven Tech-Sketch グラフ

Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィ... 続きを読む

ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ | GUNMA GIS GEEK

2013/04/27 227 users GUNMA GIS GEEK ゴールデンウィーク中

「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう ・about d3.js チュート... 続きを読む

D3.jsでForce-Directed Graphを使ってラブライブ！のキャラ関係を可視化する - AOI-CAT's diary

2013/04/09 55 users node 外周 AOI-CAT's diary 描画領域 マキ

2013-04-09 D3.jsでForce-Directed Graphを使ってラブライブ！のキャラ関係を可視化する D3.js ラブライブ！ Force-Directed Graph 力指向グラフは、nodeの間と描画領域に物理的な作用を計算してうまいぐあいに表示するらしいです。 線の太さがタグ数（「にこまき」なら“にこ”“まき”間の線が出現数に応じて太くなる）を表しています。nodeの外周を... 続きを読む

データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」 - GIGAZINE

2013/01/21 423 users ライブラリ GIGAZINE JavaScript グラフ

どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが... 続きを読む

ニューヨークタイムズも注目！「データ×デザイン」を実現するJavascriptライブラリ「d3.js」 | サンフランシスコ・シリコンバレー拠点のクリエイティブエージェンシー・btrax スタッフブログ

2013/01/17 167 users ニューヨークタイムズ GitHub 上位 ランク 注目

ニューヨークタイムズも注目！「データ×デザイン」を実現するJavascriptライブラリ「d3.js」 世界中でデータがどんどん増えていく中で、データをうまく扱うことはとても重要になってきています。そんな中、New York Timesが積極的に活用していたり、Githubのwatch数ランキングで上位にランクインしていたりと最近人気急上昇中の、データをビジュアライズする為の「d3.js」というラ... 続きを読む

様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌

2012/06/29 347 users phpspot開発日誌 グラフ NVD3.js サンフ マウス

NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプ... 続きを読む

「このプログラムは◯◯言語で書きました」の本当の意味

2012/02/28 336 users 言語 プログラム 意味 GDB メモリリーク

例：「このプログラムはC言語で書きました」＝「このプログラムはGDBでひたすらデバッグしてvalgrindでメモリリークをチェックしました」 以下絵が続きます。チャートそのものはd3.jsで描かれていて、このgistを拝借して手を加えています。 続きを読む

データのビジュアリゼーションに使えるJSライブラリ「d3.js」:phpspot開発日誌

2011/03/03 70 users インタラクティブ JSライブラリ phpspot開発日誌

d3.js データのビジュアリゼーションに使えるJSライブラリ「d3.js」 ユニークで様々なビジュアリゼーションが可能になっており、更にアニメーションしたりインタラクティブな要素を盛り込めるのも特徴 次のようなデータビジュアリゼーションをjavascriptのコードを使って描画でき、サンプルコードなんかも公開されています。 IEには対応していませんが、かなり色々なことができるので覚えておいてもよ... 続きを読む