グラフ描くだけだと思ってない？D3.jsのデータバインディングがやっとわかった
イケてるグラフが描けると人気のJSライブラリー「D3.js」。でも、グラフを描くライブラリーならほかにもありますよね。人気の背景にあるデータバインディングについて、なぜか野菜畑を使って初心者向けの解説を試みてみました。 D3.jsは、bubble chartsやline and bar chartsなどのすばらしいチャートをたった数行のコードで作成できる強力なデータ・ビジュアライゼーション・ライブラリーです。 JavaScript初心者程度の知識があれば、配列やオブジェクトをカラフルなビジュアルに変換することができます。しかし、初心者は最初、データがDOMの実際の要素とどのように結びついているのかを理解するのに苦労しています。これは「データバインディング」や「データ結合」と呼ばれ、プロセス全体の第一段階にあたる、とても重要な部分です。 直感的に言うと、for()ループがあるとして、次のよう
D3.jsの概要と使い所について - Qiita
個人的に初めてD3.js（以下、D3と呼びます）を使う機会があったので、その時に得られたD3の大まかな概要やD3（もしくはSVG）の使い所を纏めておきたいと思います。特にD3を使った事がない人向けですが、ここではD3についてハンズオン的な事はしないのでご了承ください。 D3とは D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving yo
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。 <!DOCTYPE html> <head> <meta charset="utf-8"> <script src="d3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
