Skip to content

Instantly share code, notes, and snippets.

@muddydixon

muddydixon/README.md

Last active August 29, 2015 13:56
Show Gist options
  • Save muddydixon/9295829 to your computer and use it in GitHub Desktop.
Save muddydixon/9295829 to your computer and use it in GitHub Desktop.
Download ZIP
iris.csvの棒グラフを作ってみよう
Raw
README.md

サーバの立ち上げ方

  • python: python -m SimpleHTTPServer 5000
  • perl: plackup -MPlack::App::Directory -e 'Plack::App::Directory->new(root => ".")->to_app
  • ruby: ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port => 5000, :DocumentRoot => ".").start'
  • php: php -S 0.0.0.0:5000
Raw
iris.csv
id Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1 5.1 3.5 1.4 0.2 setosa
2 4.9 3 1.4 0.2 setosa
3 4.7 3.2 1.3 0.2 setosa
4 4.6 3.1 1.5 0.2 setosa
5 5 3.6 1.4 0.2 setosa
6 5.4 3.9 1.7 0.4 setosa
7 4.6 3.4 1.4 0.3 setosa
8 5 3.4 1.5 0.2 setosa
9 4.4 2.9 1.4 0.2 setosa
10 4.9 3.1 1.5 0.1 setosa
11 5.4 3.7 1.5 0.2 setosa
12 4.8 3.4 1.6 0.2 setosa
13 4.8 3 1.4 0.1 setosa
14 4.3 3 1.1 0.1 setosa
15 5.8 4 1.2 0.2 setosa
16 5.7 4.4 1.5 0.4 setosa
17 5.4 3.9 1.3 0.4 setosa
18 5.1 3.5 1.4 0.3 setosa
19 5.7 3.8 1.7 0.3 setosa
20 5.1 3.8 1.5 0.3 setosa
21 5.4 3.4 1.7 0.2 setosa
22 5.1 3.7 1.5 0.4 setosa
23 4.6 3.6 1 0.2 setosa
24 5.1 3.3 1.7 0.5 setosa
25 4.8 3.4 1.9 0.2 setosa
26 5 3 1.6 0.2 setosa
27 5 3.4 1.6 0.4 setosa
28 5.2 3.5 1.5 0.2 setosa
29 5.2 3.4 1.4 0.2 setosa
30 4.7 3.2 1.6 0.2 setosa
31 4.8 3.1 1.6 0.2 setosa
32 5.4 3.4 1.5 0.4 setosa
33 5.2 4.1 1.5 0.1 setosa
34 5.5 4.2 1.4 0.2 setosa
35 4.9 3.1 1.5 0.2 setosa
36 5 3.2 1.2 0.2 setosa
37 5.5 3.5 1.3 0.2 setosa
38 4.9 3.6 1.4 0.1 setosa
39 4.4 3 1.3 0.2 setosa
40 5.1 3.4 1.5 0.2 setosa
41 5 3.5 1.3 0.3 setosa
42 4.5 2.3 1.3 0.3 setosa
43 4.4 3.2 1.3 0.2 setosa
44 5 3.5 1.6 0.6 setosa
45 5.1 3.8 1.9 0.4 setosa
46 4.8 3 1.4 0.3 setosa
47 5.1 3.8 1.6 0.2 setosa
48 4.6 3.2 1.4 0.2 setosa
49 5.3 3.7 1.5 0.2 setosa
50 5 3.3 1.4 0.2 setosa
51 7 3.2 4.7 1.4 versicolor
52 6.4 3.2 4.5 1.5 versicolor
53 6.9 3.1 4.9 1.5 versicolor
54 5.5 2.3 4 1.3 versicolor
55 6.5 2.8 4.6 1.5 versicolor
56 5.7 2.8 4.5 1.3 versicolor
57 6.3 3.3 4.7 1.6 versicolor
58 4.9 2.4 3.3 1 versicolor
59 6.6 2.9 4.6 1.3 versicolor
60 5.2 2.7 3.9 1.4 versicolor
61 5 2 3.5 1 versicolor
62 5.9 3 4.2 1.5 versicolor
63 6 2.2 4 1 versicolor
64 6.1 2.9 4.7 1.4 versicolor
65 5.6 2.9 3.6 1.3 versicolor
66 6.7 3.1 4.4 1.4 versicolor
67 5.6 3 4.5 1.5 versicolor
68 5.8 2.7 4.1 1 versicolor
69 6.2 2.2 4.5 1.5 versicolor
70 5.6 2.5 3.9 1.1 versicolor
71 5.9 3.2 4.8 1.8 versicolor
72 6.1 2.8 4 1.3 versicolor
73 6.3 2.5 4.9 1.5 versicolor
74 6.1 2.8 4.7 1.2 versicolor
75 6.4 2.9 4.3 1.3 versicolor
76 6.6 3 4.4 1.4 versicolor
77 6.8 2.8 4.8 1.4 versicolor
78 6.7 3 5 1.7 versicolor
79 6 2.9 4.5 1.5 versicolor
80 5.7 2.6 3.5 1 versicolor
81 5.5 2.4 3.8 1.1 versicolor
82 5.5 2.4 3.7 1 versicolor
83 5.8 2.7 3.9 1.2 versicolor
84 6 2.7 5.1 1.6 versicolor
85 5.4 3 4.5 1.5 versicolor
86 6 3.4 4.5 1.6 versicolor
87 6.7 3.1 4.7 1.5 versicolor
88 6.3 2.3 4.4 1.3 versicolor
89 5.6 3 4.1 1.3 versicolor
90 5.5 2.5 4 1.3 versicolor
91 5.5 2.6 4.4 1.2 versicolor
92 6.1 3 4.6 1.4 versicolor
93 5.8 2.6 4 1.2 versicolor
94 5 2.3 3.3 1 versicolor
95 5.6 2.7 4.2 1.3 versicolor
96 5.7 3 4.2 1.2 versicolor
97 5.7 2.9 4.2 1.3 versicolor
98 6.2 2.9 4.3 1.3 versicolor
99 5.1 2.5 3 1.1 versicolor
100 5.7 2.8 4.1 1.3 versicolor
101 6.3 3.3 6 2.5 virginica
102 5.8 2.7 5.1 1.9 virginica
103 7.1 3 5.9 2.1 virginica
104 6.3 2.9 5.6 1.8 virginica
105 6.5 3 5.8 2.2 virginica
106 7.6 3 6.6 2.1 virginica
107 4.9 2.5 4.5 1.7 virginica
108 7.3 2.9 6.3 1.8 virginica
109 6.7 2.5 5.8 1.8 virginica
110 7.2 3.6 6.1 2.5 virginica
111 6.5 3.2 5.1 2 virginica
112 6.4 2.7 5.3 1.9 virginica
113 6.8 3 5.5 2.1 virginica
114 5.7 2.5 5 2 virginica
115 5.8 2.8 5.1 2.4 virginica
116 6.4 3.2 5.3 2.3 virginica
117 6.5 3 5.5 1.8 virginica
118 7.7 3.8 6.7 2.2 virginica
119 7.7 2.6 6.9 2.3 virginica
120 6 2.2 5 1.5 virginica
121 6.9 3.2 5.7 2.3 virginica
122 5.6 2.8 4.9 2 virginica
123 7.7 2.8 6.7 2 virginica
124 6.3 2.7 4.9 1.8 virginica
125 6.7 3.3 5.7 2.1 virginica
126 7.2 3.2 6 1.8 virginica
127 6.2 2.8 4.8 1.8 virginica
128 6.1 3 4.9 1.8 virginica
129 6.4 2.8 5.6 2.1 virginica
130 7.2 3 5.8 1.6 virginica
131 7.4 2.8 6.1 1.9 virginica
132 7.9 3.8 6.4 2 virginica
133 6.4 2.8 5.6 2.2 virginica
134 6.3 2.8 5.1 1.5 virginica
135 6.1 2.6 5.6 1.4 virginica
136 7.7 3 6.1 2.3 virginica
137 6.3 3.4 5.6 2.4 virginica
138 6.4 3.1 5.5 1.8 virginica
139 6 3 4.8 1.8 virginica
140 6.9 3.1 5.4 2.1 virginica
141 6.7 3.1 5.6 2.4 virginica
142 6.9 3.1 5.1 2.3 virginica
143 5.8 2.7 5.1 1.9 virginica
144 6.8 3.2 5.9 2.3 virginica
145 6.7 3.3 5.7 2.5 virginica
146 6.7 3 5.2 2.3 virginica
147 6.3 2.5 5 1.9 virginica
148 6.5 3 5.2 2 virginica
149 6.2 3.4 5.4 2.3 virginica
150 5.9 3 5.1 1.8 virginica
Raw
iris.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>d3 scatter plog</title>
<style>
.axis line, .axis path { fill: none; stroke: grey; }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf8" src="./iris.js"></script>
</body>
</html>
Raw
iris.js
var WIDTH = 500, HEIGHT = 500, margin = 50;
var width = WIDTH - 2 * margin, height = HEIGHT - 2 * margin;
var key = 'Sepal.Length';
// iris.csv ファイルを読み込む
d3.csv(
"./iris.csv",
// データを取得
function(err, data){
// svg要素を追加
var svg = d3.select('body').append('svg').attr({
width: WIDTH,
height: HEIGHT
});
// マージンを確保して、軸などを表示できるようにする
var main = svg.append('g').attr({
width: width,
height: height,
transform: "translate("+margin+","+margin+")"
});
// 色の尺度
var color = d3.scale.category10();
// データを入れ子にする
var speciesData = d3.nest()
// 種類ごとに分類するキーを指定
.key(function(d){ return d.Species;})
// 出力をキーにマッチした配列から、平均値に変更
.rollup(function(values){
return d3.mean(values, function(d){ return +d[key]; });
})
// 値を配列で取得
.entries(data);
// 種類のキー一覧を取得
var species = speciesData.map(function(d){ return d.key; });
// 全体の高さの範囲を取得
var domain = d3.extent(data, function(d){ return +d[key]; });
// y座標の尺度を取得
var yScale = d3.scale.linear()
// 変換後の範囲(値域)
.range([0, height])
// 変換前の範囲(定義域)
.domain([0, domain[1]]);
// x座標の尺度を取得
var xScale = d3.scale.ordinal()
// 変換後の範囲(値域)
.rangeBands([0, width], .2)
// 変換前の範囲(定義域)
.domain(species);
// 棒(のグループ)要素を作成
var bar = main.selectAll('g')
.data(speciesData)
.enter()
.append('g')
.attr({
transform: function(d){
return "translate("+xScale(d.key)+","+height+")";
}
});
// 棒を描画
bar.append('rect').attr({
// 矩形の高さ
height: function(d){ return yScale(d.values); },
// 矩形の位置
y: function(d){ return -yScale(d.values); },
// 矩形の幅
width: xScale.rangeBand(),
// 矩形の色
fill: function(d){ return color(d.key); }
});
// 値を描画
bar.append('text')
// テキストは分類した時のキー
.text(function(d){
return d.values.toFixed(2);
})
.attr({
// 位置を棒の上に
dy: function(d){ return - yScale(d.values); },
dx: xScale.rangeBand() / 2,
fill: 'black'
}).style('text-anchor', 'middle');
// x軸生成のユーティリティ
var xAxisSvg = d3.svg.axis().scale(xScale);
// y軸生成のユーティリティ
var yAxisSvg = d3.svg.axis().scale(yScale.copy().range([height, 0])).orient('left');
// x軸を生成
var xAxis = main.append('g').call(xAxisSvg).attr('class', 'axis')
.attr("transform", "translate(0,"+height+")");
// y軸を生成
var yAxis = main.append('g').call(yAxisSvg).attr('class', 'axis');
// y軸のラベルを記述
main.append('text').text(key).attr({
transform: "translate(-30,"+(height / 2)+") rotate(-90)"
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment