-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (88 loc) · 2.99 KB
/
index.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
<html>
<head>
<title>D8 to D3</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script type="text/javascript">
$(function() {
'use strict';
var jsonUrl = 'http://d8.dev/drupalcon-attendees/json';
var attendeesFn = function(d) { return parseInt(d.field_drupalcon_attendees, 10); };
var cityFn = function(d) { return d.field_drupalcon_city; };
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var chart = d3.select('.chart')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var y = d3.scale.linear()
.range([height, 0]);
d3.json(jsonUrl, function(error, data) {
y.domain([0, d3.max(data, attendeesFn)]);
var x = d3.scale.ordinal()
.rangeBands([0, width])
.domain(data.map(cityFn));
var barWidth = width / data.length;
var bar = chart.selectAll('g')
.data(data)
.enter().append('g')
.attr('transform', function(d, i) { return 'translate(' + i * barWidth + ',0)'; });
bar.append('rect')
.attr('y', function(d) { return y(d.field_drupalcon_attendees); })
.attr('height', function(d) { return height - y(d.field_drupalcon_attendees); })
.attr('width', barWidth - 1);
bar.append('text')
.attr('x', barWidth / 2)
.attr('y', function(d) { return y(d.field_drupalcon_attendees) + 3; })
.attr('dy', '.75em')
.text(function(d) { return d.field_drupalcon_attendees; });
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
chart.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(0,0)')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Attendees');
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
});
});
</script>
<style type="text/css">
.chart rect {
fill: #0678be;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
}
.chart .axis text {
font: 10px sans-serif;
fill: #000;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<svg class="chart"></svg>
</body>
</html>