D3.js
もう10月です。はやい...。 先日、発表をする機会がありまして、 前日まで資料に手を付けず、あたふたしておりました。 会社のPCにはOfficeあるけど、プライベートのPCにはOfficeもなく、 グーグルドライブを使うか…どうするかと考えたわけです。 結局、reve…
前回はtransitionで、ひたすら円を動かし、そして消すをやりました。 今回は、見た目難しそうなアレをやってみます。 force layout 力学モデル Wikipedia見ましょう。 あんなやつです。 作ってみる データの用意 nodes用のデータ、links用のデータの2つを用…
地図ばかりいじってきましたが、transitionを使い、 図形を遷移させて遊んでみたいと思います。 SVGと、図形の描画 ここはD3の基本的なところです。 まずはいつも通り、svg要素を作成します。 // svg var svg = d3.select('body').append('svg').attr({width…
前回は自動で回転させましたが、今回は手動で回転させてみます。 手動で回転させる際に参考にしたのは、D3.jsのexampleのこちらになります。 ほぼソースは同じですね。 exampleとの差異 exampleのソースを見てみると... var feature; var projection = d3.ge…
前回まで弄っていた日本地図から少し離れ、今回は別の投影法を試してみます。 orthographic D3.jsには、様々な投影法が用意されています。 その中でも今回はorthographicを使用してみます。 この投影法を使うと、地球儀みたいなものが作れちゃいそうです。 e…
先日の記事では日本地図をとりあえず描いてみました。 あれからちょいちょいと弄りまして、地図上にcircleを追加。 地図にマウスオーバーすると色を変えるようなことをしてみました。 イベントを追加する イベントを追加する時には.on('event_name', functio…
以前買った、インタラクティブ・データビジュアライゼーションはひとまず読了しました。 ちゃんと覚えたか?と問われれば、まだですが、少し感想を。 感想 D3.jsのチュートリアルの拡張のような内容で、 チュートリアルにある内容はもちろん、パイチャートや…
初オライリー! 初、オライリーを購入。 動物園目指しましょう! 何買ったの ツイッターでオススメしていただいた、D3.js関係のものになります。 インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化作者: Scott Murray,長尾高弘出…
D3.jsとは Data Driven Documentの頭文字をとって、D3のようです。 D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。 D3 はHTML や SVG、 CSSを使ってデータに命を吹き込みます。D3は WEB 標準に重点を置いており、 強力…