/
ch5-4.html
77 lines (70 loc) · 2.26 KB
/
ch5-4.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
<title>My First Chart with D3</title>
<meta name="description" content="Practical D3">
<meta name="author" content="Tarek Amr, @gr33ndata">
</head>
<body>
<svg width="200" height="200" id="fun-drawing-area">
<!-- Commenting the rectangles out, will be added by D3 now -->
<!--rect x="10" y="40" width="170" height="20" stroke="black" stroke-width="2" fill="blue" />
<rect x="10" y="80" width="90" height="20" stroke="black" stroke-width="2" fill="blue" />
<rect x="10" y="120" width="50" height="20" stroke="black" stroke-width="2" fill="blue" />
<rect x="10" y="160" width="30" height="20" stroke="black" stroke-width="2" fill="blue" /-->
</svg>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var gdp_data = [
[10,15],
[15,25],
[25,30],
[10,25]
];
var area_width = 200;
var area_height = 200;
var left_margin = right_margin = 10;
var max_gdp = Math.max.apply(Math, gdp_data.map(
function(d){
return Math.max(d[0], d[1]);
})
);
var myScale = d3.scale
.linear()
.domain([0, max_gdp])
.range([0, area_width - left_margin - right_margin]);
var vScale = d3.scale
.linear()
.domain([0, gdp_data.length + 1])
.range([0, area_width]);
var spacing = area_height / (gdp_data.length + 1);
var fda = d3.select("#fun-drawing-area");
fda.selectAll("rect")
.data(gdp_data)
.enter()
.append("rect")
.attr("y", function (d, i) {
return vScale(i+1);
})
.attr("x", left_margin)
.attr("width", function (d, i) {
console.log(d[0],d[1]);
return myScale(d[0]);
})
.attr("height", "20")
.style("fill", "grey")
.style("stroke", "black")
.style("stroke-width", 1)
.on('click', function(d, i){
d3.select(this)
.style("stroke-width", 1)
.style("fill", "blue")
.transition()
.delay(100)
.duration(500)
.attr("width", function (d, i) {
return myScale(d[1]);
});
});
</script>
</body>
<html>