ウェブ制作、コーディング初心者のメモ

D3.js

世界地図を表示する

2015/10/26 JSON, 世界地図を表示

地図のデータ形式にはいろいろなものがありますが、多くの地図データはshape形式(.shp)です。この形式はD3.jsでは扱うことができません。ほかに、JavaScriptで手軽に扱えるようにしたのが ...

D3.js

ヒートマップをDOMに表示する

2015/10/25 ヒートマップ

D3.jsは表示処理は行わないため、SVG、canvasだけではなく、HTMLのdiv要素を使いグラフを表示することができます、ヒートマップもdiv要素を表示することができます。ヒートマップのような単 ...

D3.js

ヒートマップをCanvasに表示する

2015/10/25 ヒートマップ

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位でグラフィックを描画できるCanvasや、3D描画が可能なWebGL(Canvas 3D)があります。 ...

D3.js

ヒートマップを作成する

2015/10/25 ヒートマップ

ヒートマップはウェブページで多くクリックされた箇所や、地面や人体の温度変化を把握したいときに使われます。 D3.jsにはヒートマップを自動的にlayoutする機能は備えられていません。ということは、棒 ...

D3.js

ツリーマップレイアウトで使用されている文字数を数えて表示する

2015/10/25 ツリーマップ, 使用頻度確認, 連想配列

テキストファイルを読み込んで、ファイル内で使われている文字数を数えてツリーマップに表示します。　入れ子にはならないですが、使用頻度が高い文字が分かります。サンプルコードの実行結果はこちら [cray ...

D3.js

ツリーマップレイアウトの階層構造をアニメーションをつけて表示する

2015/10/25 ツリーマップレイアウト, 階層構造

ツリーマップレイアウトは、それぞれのノード全体に占める割合を把握することに向いています。たとえば、日本という国の、各エリアの人口を知りたいとき、どのエリアに人がたくさん住んでいるかを視覚的に把握するこ ...

D3.js

ツリーマップを表示する

2015/10/24 ツリーマップ

ツリーマップレイアウトは階層(親子)関係を利用してチャートを表示します。以前の記事で出てきたパックレイアウトと同じ仕組みです。ということは、ツリーマップレイアウトも階層化レイアウト機能の一種として用意 ...

D3.js

JSONデータを読み込んで、ボタンでパックレイアウトで表示するデータを切り替える

2015/10/24 jsonファイル読込, パックレイアウト

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に３つのボタンを設けて、ボタンを押すと読み込むデータを切り替えてパックレイアウトを表示するコードを書いて ...

D3.js

パックレイアウトで人口を表す

2015/10/24 パックレイアウト

今回はパックレイアウトを使い日本の人口を表示します。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>パックレイアウトで人口を表示する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:320px;
			height:320px;
			border:2px solid black;
		}
		circle{
			stroke:none;
			opacity:0.25;
		}
		text{
			font-size:10px;
			text-anchor:middle;
			fill:black;
			opacity:0;
		}
	</style>
</head>
<body>
	<h1>パックレイアウトを表示</h1>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>

<head>

<title>パックレイアウトで人口を表示する</title>

<style>

svg{

width:320px;

height:320px;

border:2px solid black;

}

circle{

stroke:none;

opacity:0.25;

}

text{

font-size:10px;

text-anchor:middle;

fill:black;

opacity:0;

}

</style>

</head>

<body>

<h1>パックレイアウトを表示</h1>

</body>

</html>

[crayon-69a6ad0793cad53 ...

D3.js

パックレイアウトの生成

2015/10/24 パックレイアウト

パックレイアウトは階層(親子)関係を利用してチャートを表すものです。D3.jsではパックレイアウトは階層化レイアウト機能の１つとしてあります。パックレイアウト作成の基本パックレイアウトを作成するに ...

vesna