-
Notifications
You must be signed in to change notification settings - Fork 0
/
barChart.html
61 lines (49 loc) · 2.44 KB
/
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
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
.bar {
fill: steelblue;
}
</style>
</head>
<body>
</body>
<script>
var data = [{"doc_count":51,"key":"main"},{"doc_count":51,"key":"frankfurt"},{"doc_count":42,"key":"berlin"},{"doc_count":41,"key":"böhme"},{"doc_count":40,"key":"münchen"},{"doc_count":35,"key":"hartmut"},{"doc_count":31,"key":"universität"},{"doc_count":29,"key":"ders"},{"doc_count":28,"key":"paris"},{"doc_count":26,"key":"professor"},{"doc_count":25,"key":"ü"},{"doc_count":24,"key":"literatur"},{"doc_count":24,"key":"deutsche"},{"doc_count":22,"key":"auslassungen"},{"doc_count":20,"key":"werke"},{"doc_count":19,"key":"aufl"},{"doc_count":19,"key":"stuttgart"},{"doc_count":16,"key":"goethes"},{"doc_count":13,"key":"leerstellen"},{"doc_count":13,"key":"kulturwissenschaft"},{"doc_count":12,"key":"humboldt"},{"doc_count":11,"key":"kulturwissenschaftlichen"},{"doc_count":10,"key":"auslassens"},{"doc_count":9,"key":"natascha"},{"doc_count":9,"key":"adamowsky"}];
var width = 300;
var height = 250;
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.ordinal().rangeBands([0, height], .1);
var svg = d3.select('body')
.append('svg')
.attr('preserveAspectRatio', 'xMaxYMin meet')
.attr('viewBox', '0 0 ' + (width + 75) + ' ' + height)
.append('g');
x.domain([0, d3.max(data, function(d) { return d.doc_count; })]);
y.domain(data.map(function(d) { return d.key; }));
var bars = svg.selectAll('rect')
.data(data, function(d, i) {
return Math.random();
});
bars.exit().remove();
bars.enter()
.append('rect')
.attr('class', 'bar rect')
.attr('y', function(d) { return y(d.key); })
.attr('height', y.rangeBand())
.attr('width', function(d) { return x(d.doc_count); });
var labels = svg.selectAll('text')
.data(data, function(d) { return Math.random(); });
labels.enter()
.append('text')
.style('font-size', '10px')
.attr('y', function(d) { return y(d.key) + y.rangeBand() / 2; })
.attr('x', function(d) { return x(d.doc_count) + 3; })
.attr('dy', '.35em')
.attr('text-anchor', function(d) { return 'start'; })
.text(function(d) { return d.key + ' (' + d.doc_count + ')'; });
labels.exit().remove();
</script>
</html>