ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル｜スコット・マレイ｜alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr
都道府県別グラフ - jsdo.it - Share JavaScript, HTML5 and CSS
google.load('visualization', '1', {'packages': ['geochart']}) rand = -> parseInt(Math.random() * 100, 10) drawRegionsMap = -> data = google.visualization.arrayToDataTable([ ['City', 'Population'] ['Hokkaido', rand()] ['Aomori', rand()] ['Iwate', rand()] ['Miyagi', rand()] ['Akita', rand()] ['Yamagata', rand()] ['Fukushima', rand()] ['Ibaraki', rand()] ['Tochigi', rand()] ['Gunma', rand()] ['Saitam
arbor.js
about arbor Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whate
Complex Data Visualization with JavaScript: Part 3
いくつか取りこぼしがあったので更に追加。 Part1 Part2 jsPlumb 大規模なグラフを描画するというよりは、奇麗なネットワーク図、あるいは生物学的パスウェイ等、比較的複雑なものを描く用途に向いているライブラリ。ノードやエッジに複雑な処理を施す事が可能。 Flotr2 HTML5 Canvasを利用した一般的なチャート（円グラフ、折れ線グラフ等）描画用のライブラリだが、仕上がりが奇麗。HTML5なので、もちろんダイナミックなアニメーションも可能。 Google Chart Tools 定番。描画のカスタマイズ自由度が飛び抜けているわけではないが、Googleの他のサービスと連携させる事が容易なのが強み。 私が仕事でやっている事がグラフ（ネットワーク）に関わるものが多いのでやや偏り気味ですが、ネットワーク描画関連で活発に開発されているものは、これでほぼ網羅できていると思います。
Complex Data Visualization with JavaScript: Part 2
前回の続きです。取りこぼしていたものをいくつか追加します。 sigma.js グラフ描画ライブラリ。グラフデータの入出力部分まで含んでおり、GEXF形式のファイルを簡単に可視化出来る。プラグインの考え方を取り入れており、新たに特定のファイルフォーマットのパーザ等を追加するのは容易。 arbor.js グラフの描画に特化したライブラリ。APIもグラフに特化したシンプルなもので分かりやすい。パフォーマンス重視と書いてあるので、一度簡単なベンチマークをしてみたいところ。 paper.js HTML5 Canvasベースのライブラリ。思想的にはProcessing.jsに近い。プリセットを使ってチャートを簡単に描いたりするというより、独自の描画アイデアをCanvasで行いたい時に使うタイプのフレームワーク。 vvvv.js メディアアート等に用いられるvvvvのJavaScript版。思想的にはM
Complex Data Visualization with JavaScript: Part 1
時代はますます何でもWeb上、と言うかブラウザ上へ移行してます。データ可視化と言う分野も例外ではないです。以前はヒストグラムを描くとか円グラフを表示するとかのシンプルなものはともかく、それ以上に複雑なデータの可視化を行う場合は、Flashで作り込むとか、Javaでアプレットを作るとか、そう言った作業が必要でした。そのためのツールキットの代表例としてはPrefuse等があります。 TreeView Demo by Jeffrey Heer: しかし、近年の第二次ブラウザ戦争(HTML5への対応やJavaScriptの実行速度競争など。第一次はIE vs Netscape)のおかげで、クライアント側のテクノロジが飛躍的に進化し、JavaScript実行のパフォーマンスが向上したり、GPUの恩恵を描画で受けられたりと、特にマルチプラットフォームのサポートを求められる事の多いデータ可視化系プロジェ
d3jsではじめるデータビジュアライゼーション入門
The document discusses visualizing Wikipedia data using force-directed graphs and Voronoi diagrams with the JavaScript library d3.js. It provides examples of basic charts created with d3.js by selecting DOM elements and binding data to append child elements. The examples demonstrate how to update the chart by rebinding new data and removing old data elements.Read less
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
arbor.js
Sigma.js
http://needforair.com/blog/2012/05/09/d3-tutorial/