• JUGEMテーマ
  • MonoColle
  • PICTO

ブログテーマ

ユーザーテーマ

JavaScript

このテーマに投稿された記事:124件 | このテーマのURL:http://jugem.jp/theme/c91/6579/
このテーマに投稿された記事
rss

1  2  3  4  5  6  7  8  9  10  11 >

D3.js v4によるVoronoi図の作り方

以前、このブログでD3.jsを使ったVoronoi図の作成方法を紹介しました (【D3.js】ボロノイ図の作成)。ところが、v4へのバージョンアップに伴い、Voronoi図を作成するための関数も d3.geom.voronoi() から d3.voronoi() に変更されたため、以前作成したプログラムのままでは D3 v4 でVoronoi図を作成できなくなってしまいました。   そこで、改めて D3 v4 を使って Voronoi図の作成方法について紹介します (Voronoi図そのものの説明については割愛します。Wikipediaの説明などを参照して下さい)。   それでは、...

Agata's Blog | 2017.08.14 Mon 19:28

D3.js v4でオリジナルのカラーマップを作成する方法

以前、d3-scale-chromatic.v1.min.js を使ってグラデーションを作成する方法を紹介しました (D3.js v4で利用可能なカラーマップ一覧)。今回は、d3-scale-chromatic.v1.min.js を読み込まずに、任意のカラーマップを作成する方法を紹介します。   このブログで D3.js v4 で折れ線グラフを作成する方法について紹介したときに、scaleLinear() というメソッドが出てきました。そのときは、データの値の範囲をSVG画像の座標軸にマッピングするために、このメソッドを使っていました。ところがこのメソッド、使い方によっ...

Agata's Blog | 2017.08.11 Fri 21:27

D3.js v4 によるパイチャートの描画 (2)

前回は、d3.arc() メソッドを使ったパイチャートの作成方法について説明しました (D3.js v4 によるパイチャートの描画 (1)) 。ただ、前回は簡単のためにアークの開始角度を固定していました。そこで今回は、アークの開始角度と終了角度の両方をデータにあわせて設定できるようにして、より現実的なパイチャートにしてみましょう。   せっかくなので、前回と同様にパイチャートと数字が変化するようにしてみました。ただ、今回はアークの数が複数になっているので、変化前の状態を保持しておくために each() メソッドを使...

Agata's Blog | 2017.08.08 Tue 20:02

D3.js v4 によるパイチャートの描画 (1)

以前、このブログで「D3.jsによるパイチャートの描画」という記事を書きました。ところが D3 の v4 へのバージョンアップに伴って、d3.svg.arc() が d3.arc() に変更されたため、以前のコードのままでは v4 でパイチャートを描画できなくなってしまいました。そこで、あらためて D3 v4 を使ってパイチャートを描画してみます。   ただ、前回と同じものを作っても面白くないので、ちょっとだけインタラクティブに動くグラフを作ってみました。   今回のポイントは以下の 3つです。  ...

Agata's Blog | 2017.08.05 Sat 14:31

D3.js v4で「レ・ミゼラブル」の人物関係を可視化

今回はちょっと応用編です。   インターネットで公開されているデータセットをいろいろ見ていると、文豪ヴィクトル・ユゴーの名作『レ・ミゼラブル』の人間関係というデータがありました。JSON形式で公開されているこのデータ、内容がどこまで正しいのかは良く分かりませんが、D3.js でJSON形式のファイルを読み込んで可視化する練習にちょうど良い手ごろなサイズなので、SVGのrect要素とtext要素だけを使って可視化してみました。       JUGEMテーマ:JavaScript

Agata's Blog | 2017.08.04 Fri 19:57

D3.js v4で等高線プロットを作成する

D3.js は、以前は1つのライブラリでしたが、v4 にバージョンアップしてからはモジュール化されています。たとえば、これまでに紹介した、カラーグラデーションを作成するための d3-scale-chromatic.v1.min.js というのもモジュールです。   D3.jsにはいろいろなモジュールがありますが、等高線をプロットするためのモジュール、d3-contour.v1.min.js もその1つです。等高線プロットは、いろいろなデータを可視化するうえで無くてはならない手法のひとつなのですが、残念ながらこのモジュールの説明は(特に日本語のページ...

Agata's Blog | 2017.08.01 Tue 20:41

D3.js v4によるデータバインド (2)

前回はSVG要素とデータをバインドしたうえで、Join, Update, Enter, Exit, Removeという一連の流れによってグラフが動的に変化する様子を確認しました。今回は、D3.js v4で新たに導入されたmergeメソッドを使って、前回のプログラムを書き直してみます。   サンプルコードを下に示します。生成されるグラフは前回と変わりません。ポイントは、前回は別々に実施していたEnterとUpdateの処理を、36~59行目でいっぺんに行っている部分です。キーとなるのは49行目に出てくる merge メソッドです。   少し詳しく見て...

Agata's Blog | 2017.07.29 Sat 14:07

D3.js v4によるデータバインド (1)

D3.js の大きな特徴は、データをSVGエレメントにバインドできるという点です。といっても、最初はなかなか実感がわかないと思うので、まずは下記のサンプルコードを例に見ていくことにしましょう。   下記のサンプルコードでは、まず20個の要素を持つ配列をサンプルデータとして作成しています(15行目)。そのうえで、23~26行目で、データの個々の要素をSVGのrectエレメントとバインドしています。ここで、バインドの仕方として、データの個々の数値をキーにrect要素とバインドしていることに注意して下さい(24~26行目...

Agata's Blog | 2017.07.28 Fri 21:13

D3.js v4で利用可能なカラーマップ一覧

D3.jsがVer.4にバージョンアップしてから、いろいろなカラーマップが利用可能になりました。せっかくなので、今回はv4で追加されたカラーマップを紹介します。   v4から追加されたカラーマップのなかに、0〜1の数値を入力するとRGB形式のカラーベクトルが返ってくるという、便利な関数があります。これらの関数を使うには、D3.js本体 (d3.v4.min.js) のほかに、d3-scale-chromatic.v1.min.js も追加で読み込む必要があります。以下では、このライブラリに含まれているカラーマップ関数一覧をプルダウンメニューから選択す...

Agata's Blog | 2017.07.20 Thu 22:36

D3でマウスイベントを使う

D3の .on メソッドを使うと、ユーザのマウス操作によって表示中のSVG要素を変化させることができます。今回は、?クリック、?マウスオン、?マウスアウトの3つイベントそれぞれによって表示中の図形のサイズや色が変化する簡単なサンプルを紹介します。   27行目までは、SVGの描画領域を設定したうえで、サンプルデータの配列とSVG要素をバインドして、配列の個数分だけ図形を作成しています。これまで何度もやってきた操作なので、説明は省略します。   29行目以降の部分が今回のメインです。マウスイベントを...

Agata's Blog | 2017.07.20 Thu 20:06

このテーマに記事を投稿する"

1  2  3  4  5  6  7  8  9  10  11 >

全124件中 1 - 10 件表示 (1/13 ページ)

[PR] レンタルサーバー heteml [ヘテムル]
あなたのクリエイティブを刺激する、
200.71GBの大容量と便利な高機能!