-
Notifications
You must be signed in to change notification settings - Fork 0
/
barchart7.html
112 lines (88 loc) · 3.29 KB
/
barchart7.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barchart example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.axis text{
font-family:sans-serif;
font-size:11px;
}
.axis path,
.axis line{
fill:none;
stroke:gray;
shape-rendering: crisp-edges;
}
</style>
</head>
<body>
<h3>Barchart Example Seven</h3>
<p>Our final step is to add some labels to our axes, so we know what we are looking at. We do this by appending an SVG text element on to the end of the axis.
</p>
<script>
var width = 400;
var height = 300;
var margins = {top:0, bottom: 60, left: 60, right:0};
var chartWidth = width - margins.left - margins.right;
var chartHeight = height - margins.top - margins.bottom;
var xScale = d3.scale.ordinal().rangeRoundBands([0, chartWidth], 0.1);
var yScale = d3.scale.linear().range([chartHeight, 0]);
var colorScale = d3.scale.linear().range(["grey", "red"]);
d3.csv("http://www.cs.middlebury.edu/~candrews/classes/infovis/data/drwho.csv", function(dataset){
console.log(dataset);
xScale.domain(dataset.map(function(d){return d.doctor;}));
yScale.domain([0, d3.max(dataset, function(d){return +d.duration;})]);
colorScale.domain([0, d3.max(dataset, function(d){return +d.episodes;})]);
var svg = d3.select('body')
.append('svg')
.attr({width:width, height:height});
var chart = svg.append("g").
attr("transform","translate("+margins.left + "," + margins.top + ")");
chart.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr({x: function(d){return xScale(d.doctor);},
y: function(d){return yScale(+d.duration);},
width: xScale.rangeBand(),
height: function(d){return chartHeight - yScale(+d.duration)}})
.style("fill", function(d){ return colorScale(+d.episodes); });
// Note that we are just appending the label onto the end of the axis
// an advantage of this is that they share the new origin for transformed
// axes
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
chart.append("g")
.attr("class","axis")
.attr("transform", "translate(0, " + chartHeight+")")
.call(xAxis)
.append("text")
.attr({
"x":chartWidth/2,
"y":margins.bottom/2,
"text-anchor":"middle" // set so the (x,y) of the text is in the middle bottom
})
.text("Doctor");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// for the y axis, we need to rotate the text
// the x and y are with respect to the rotated origin...
chart.append("g")
.attr("class","axis")
.call(yAxis)
.append("text")
.attr({
"x":-chartHeight/2,
"y":3 * -margins.left/4,
"text-anchor":"middle",
"transform" : "rotate(-90)"
})
.text("Duration");
});
</script>
</body>
</html>