• JUGEMテーマ
  • MonoColle
  • PICTO

ブログテーマ

ユーザーテーマ

JavaScript

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

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

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

D3.js v4でTree図を作成する (3)

D3.jsを使う魅力は、なんといってもユーザの操作に従ってダイナミックに動くグラフを作成できるという点です。というわけで、前回までに作成した「静的なツリー図」を、インタラクティブに動く「動的なツリー図」にしてみましょう。   以前作成したサンプルと同様に、対象となる html 内のプルダウン要素を指定して、その要素がユーザによって更新されたときにツリー図を更新するようにしました。具体的には、44行目でプルダウン要素を指定したうえで、その要素がユーザ操作によって更新されたときの動作を99行目以降で設定...

Agata's Blog | 2017.07.16 Sun 22:40

D3.js v4でTree図を作成する (2)

前回は、D3.js Ver.4を使って簡単なツリー図を作成してみました。そのなかでいろんな関数が出てきましたが、それらはいったい何をしているのでしょうか。ちょっと覗いてみることにしましょう。   ツリー図を作成するうえで、ポイントとなるのは次の4行です。   // Treeレイアウト var treemap = d3.tree() .size([width, height]); // 階層データの前処理 var rootNode = d3.hierarchy(treeData); // ノード描画用のデータ var nodes = treemap(rootNode); // ノード間を結ぶパス描画用のデータ var...

Agata's Blog | 2017.07.13 Thu 22:18

D3.js v4でTree図を作成する (1)

D3.js が Ver.4 にアップデートしていろいろなところが変わりましたが、Treeレイアウトの作成方法もその1つです。この変更によって、残念ながら Ver.3 でのTreeレイアウトのプログラムは Ver.4 では動作しなくなってしまいました。   さらに困ったことに、Ver.4 でTreeレイアウトを作成しようとしても、簡単なサンプルがなかなか見当たらないのが現状です (特に日本語では) 。例えばインターネットを検索すると「d3.js version4でシンプルなTree図を作成」という記事も見つかるのですが、ノードどうしを線でつ...

Agata's Blog | 2017.07.12 Wed 21:24

プルダウンメニューを使ってインタラクティブに散布図を更新

前回・前々回の2回にわたって、D3.jsを使ってCSVデータから散布図を作成する方法と、x,y軸のスケールをデータにあわせてインタラクティブに変更する方法を、それぞれ紹介しました。今回はこの2つの方法を合体させて、ユーザがプルダウンから選択した変数によって散布図が自動的に変化するページを作ってみます。   読み込むデータとしては、再びIrisデータセットのCSVファイルを使います。このIrisデータセットには4個の変数が含まれています。そこで、この4個の変数から2つをユーザがプルダウンメニューから選択すると、...

Agata's Blog | 2017.07.09 Sun 22:50

スケールやticksの設定値によるx軸の変化を確認する

D3.js の醍醐味は、なんといってもブラウザ上でダイナミックに動くグラフの作成ができることです。このブログでも、いよいよD3.jsを使って動きのある、さまざまな "魅せる" データ可視化手法を紹介していく予定です。でもその前に、ちょっとした腕ならしとして、まずはスケールやticksの設定によって軸の描画がどのように変化するかを確認しておきましょう。   せっかくなので、プルダウンメニューからインタラクティブに値を設定できるようにしてみましょう。   プログラムの28行目までは、これま...

Agata's Blog | 2017.07.08 Sat 20:57

【D3.js】CSVからデータを読み込んで散布図を作成する

データを可視化するうえで、ファイルからデータを読み込んでグラフにするという処理は基本中の基本です。今回は、一般的によく用いられるカンマ区切りのCSVデータファイルからデータを読み込んで、散布図を表示するプログラムを作成してみましょう。   せっかくなので、機械学習の練習によく使われる Iris データセットを使ってみましょう。D3.js でCSVデータを読み込むときには、 d3.csv というメソッドを使います。このメソッドの入力引数として、読み込むCSVファイル名を指定します。入力引数には、外部サイトのC...

Agata's Blog | 2017.07.07 Fri 23:55

【D3.js】Ver.4での折れ線グラフの作成・その1

バージョンアップしたD3.jsを使って、さっそく折れ線グラフを作成してみます。前回お話したように、バージョンアップによって、 d3.scale.linear() が d3.scaleLinear() に変わったことに注意して下さい。また、軸の目盛りの表示位置を指定するためのメソッドとして、 d3.axisBottom() , d3.axisTop() , d3.axisRight() , d3.axisLeft() の4つが新たに導入されています。 それでは、これらを使って基本的な折れ線グラフを作成してみましょう。なお、27行目や33行目に出てくる ...

Agata's Blog | 2017.07.06 Thu 12:09

D3.jsのバージョンアップ

こんにちは。 こここ1年ほどブログの更新をお休みしていましたが、そろそろ再開しようと思います。   じつは昨年6月、前回このブログを更新した直後に D3.js のメジャーバージョンアップがありました。それまでのバージョンは Ver.3 系で、このブログの記事もすべて Ver.3 系を前提に作成していました。ところがバージョンアップの後、つまり現行の Ver.4 では、Ver.3 系で作成したプログラムがほとんど動作しないらしいということが分かってきました。   D3: Data-Driven Document   ...

Agata's Blog | 2017.07.05 Wed 21:31

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

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

全116件中 1 - 10 件表示 (1/12 ページ)

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