-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathbar.html
59 lines (47 loc) · 1.48 KB
/
bar.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
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
rect {
fill: teal;
fill-opacity: .8;
}
text {
font: 10px sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript">
var margin = {top: 50, bottom: 10, left:300, right: 40};
var width = 900 - margin.left - margin.right;
var height = 900 - margin.top - margin.bottom;
var xScale = d3.scale.linear().range([0, width]);
var yScale = d3.scale.ordinal().rangeRoundBands([0, height], .8, 0);
var bar_height = 15;
var state = function(d) { return d.State; };
var svg = d3.select("body").append("svg")
.attr("width", width+margin.left+margin.right)
.attr("height", height+margin.top+margin.bottom);
var g = svg.append("g")
.attr("transform", "translate("+margin.left+","+margin.top+")");
d3.tsv("unemp_states_us_nov_2013.tsv", function(data) {
var max = d3.max(data, function(d) { return d.Rate; } );
var min = 0;
xScale.domain([min, max]);
yScale.domain(data.map(state));
var groups = g.append("g")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(0, " + yScale(d.State) +")"; });
var bars = groups
.append("rect")
.attr("width", function(d) { return xScale(d.Rate); })
.attr("height", bar_height);
});
</script>
</body>
</html>