-
Notifications
You must be signed in to change notification settings - Fork 2
/
osmstatsbar_id.html
130 lines (119 loc) · 4.06 KB
/
osmstatsbar_id.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<h2>Laporan Statistik Bangunan pada Rabu, 1 April 2020 </h2>
<body>
<div id="chart"></div>
<script src="d3.v2.min.js"></script>
<script>
function renderChart() {
var data = d3.csv.parse(d3.select('#csv').text());
var valueLabelWidth = 150; // space reserved for value labels (right)
var barHeight = 30; // height of one bar
var barLabelWidth = 170; // space reserved for bar labels
var barLabelPadding = 10; // padding between bar and bar labels (left)
var gridLabelHeight = 20; // space reserved for gridline labels
var gridChartOffset = 10; // space between start of grid and first bar
var maxBarWidth = 700; // width of the bar with the max value
// accessor functions
var barLabel = function(d) { return d['Provinsi']; };
var barValue = function(d) { return parseFloat(d['Jumlah Bangunan']); };
// scales
var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
var y = function(d, i) { return yScale(i); };
var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);
// svg container element
var chart = d3.select('#chart').append("svg")
.attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
.attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
// grid line labels
var gridContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
.attr("x", x)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#ccc");
// bar labels
var labelsContainer = chart.append('g')
.attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')');
labelsContainer.selectAll('text').data(data).enter().append('text')
.attr('y', yText)
.attr('stroke', 'none')
.attr('fill', 'black')
.attr("dy", ".35em") // vertical-align: middle
.attr('text-anchor', 'end')
.text(barLabel);
// bars
var barsContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
barsContainer.selectAll("rect").data(data).enter().append("rect")
.attr('y', y)
.attr('height', yScale.rangeBand())
.attr('width', function(d) { return x(barValue(d)); })
.attr('stroke', 'white')
.attr('fill', 'steelblue');
// bar value labels
barsContainer.selectAll("text").data(data).enter().append("text")
.attr("x", function(d) { return x(barValue(d)); })
.attr("y", yText)
.attr("dx", 3) // padding-left
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "start") // text-align: right
.attr("fill", "black")
.attr("stroke", "none")
.text(function(d) { return d3.format(',')(d3.round(barValue(d), 2)); });
// start line
barsContainer.append("line")
.attr("y1", -gridChartOffset)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#000");
}
</script>
<script id="csv" type="text/csv">Provinsi,Jumlah Bangunan
Aceh,388370
Sumatera Utara,599561
Sumatera Barat,238487
Riau,21947
Kepulauan Riau,32838
Jambi,60824
Kep. Bangka Belitung,14643
Bengkulu,128205
Sumatera Selatan,546573
Lampung,395839
Banten,1264837
Jawa Barat,4548669
DKI Jakarta,1658024
Jawa Tengah,2229010
Jawa Timur,4632185
D.I Yogyakarta,886732
Kalimantan Barat,992191
Kalimantan Tengah,357200
Kalimantan Timur,610127
Kalimantan Selatan,495176
Kalimantan Utara,70091
Bali,1534840
Nusa Tenggara Barat,1480936
Nusa Tenggara Timur,798421
Maluku,303745
Maluku Utara,429910
Sulawesi Utara,430597
Gorontalo,196035
Sulawesi Tengah,609792
Sulawesi Barat,239288
Sulawesi Selatan,1476132
Sulawesi Tenggara,370913
Papua Barat,125873
Papua,141862
</script>
<script>renderChart();</script>
</body>
</html>