-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathbasic_barchart.html
89 lines (87 loc) · 2.85 KB
/
basic_barchart.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
<!DOCTYPE html>
<html>
<head>
<script src="d3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path{
display: none;
}
body{
font: 10px arial;
text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Animated Barchart</h1>
<script type="text/javascript">
//Set up margin and percentage formatter
var margin = {top:20, right: 30, bottom: 30, left:40};
var width = 800-margin.left-margin.right;
var height = 400-margin.top-margin.bottom;
//Creating a percentage formatter
var formatPercent = d3.format("%.0");
//Create x and y scale
var yScale = d3.scale.linear().range([height,0]);
var xScale = d3.scale.ordinal().rangeRoundBands([0,width],0.1,0.2);
//Create category for color
var c10 = d3.scale.category10();
//Create SVG Element
var svg = d3.select("body")
.append("svg")
.attr({"width":width+margin.left+margin.right,"height":height+margin.top+margin.bottom})
.append("g")
.attr("transform","translate("+margin.left+","+margin.right+")");
//Load data from external tsv file
d3.tsv("http://simplysanad.com/d3js/words.tsv", function(data){
//Set domain of x and y scales based on loaded data
yScale.domain([0,d3.max(data, function(d){ return d.frequency; })]);
xScale.domain(data.map(function(d){ return d.letter; }));
//Create X and Y Axis based on scales and data
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(formatPercent);
//Add bars
var bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class","bar")
.attr("width", xScale.rangeBand())
.attr("fill","steelblue")
.attr("fill", function(d,i){
return c10(Math.random()*10*i);
})
.attr("y", function(d){
return yScale(d.frequency);
})
.attr("x", function(d){
return xScale(d.letter);
})
.attr("height", function(d){
return height-yScale(d.frequency);
});
//Add X Axis
svg.append("g")
.attr("transform","translate(0,"+height+")")
.call(xAxis)
.attr("class","x axis");
//Add Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
</html>