forked from wargabasdat/Seleksi-2015
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
257 lines (210 loc) · 11.9 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TUGAS 2 BASIS DATA</title>
<link rel="stylesheet" href="css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='stylesheet' type='text/css'>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="space">
</div>
<header id="header">
<div class="content">
<div id="logo"><a href=""> TUGAS BASDAT </a></div>
<nav id="nav">
<ul>
<li><a href="#slide1" class="active" title="Next Section" >Home</a></li>
<li><a href="#slide2" title="Next Section">Real Fact</a></li>
<li><a href="#slide3" title="Next Section">About</a></li>
<li><a href="#slide4" title="Next Section">Profile</a></li>
<li><a href="#slide5" title="Next Section">Graph</a></li>
</ul>
</nav>
</div>
</header>
<div id="slide1">
<div class="content">
<div id="christmas_tree"> </div>
<div id="snowflakes1"></div>
<div id="snowflakes2"></div>
<h2>Visualisasi Data</h2>
<h1>Tren Ekspor Non Migas 2005 - 2013</h1>
<div id="divider"> </div>
<h3>Kelompok Marqie</h3>
<div id="ribbon"></div>
<div id="new_year"> </div>
</div>
</div>
<div id="slide2">
<div class="content" >
<div class="container">
<h4 class="quotes">Indonesia mempunyai banyak sekali potensi untuk dikembangkan sebagai primadona perdanganan ekspor Indonesia disamping sektor migas, seperti sektor pertanian (Biji coklat, kopi, rempah-rempah,dll), sektor industri (makanan olahan, tekstil, bahan kimia), dan lain-lain. Akan tetapi, belum banyak pihak yang mengetahui potensi tersebut. </h4>
<h4 class="sub_gray"></h4>
</div>
</div>
</div>
<div id="slide3">
<div class="content">
<div class="container">
<h3 class="quotes"> Dalam Visualisasi data ini, penulis ingin melakukan visualisasi nilai ekspor non migas di Indonesia dalam berbagai sektor dan dalam lini waktu. Diharapkan dalam visualisasi ini dapat dibaca kinerja komoditas ekspor non migas di Indonesia dan tren-tren yang mengikutinya. Visualisasi data ini diharapkan dapat berguna dan menjadi pertimbangan bagi pemerintah, swasta, maupun masyarakat sipil untuk bersama-sama membangun perekonomian Indonesia menjadi lebih baik lagi.</h3>
<h4 class="sub_white"></h4>
</div>
</div>
</div>
<div id="slide4">
<div class="content">
<div class="container">
<div class="profile_widget" >
<div class="pw_avatar" >
<img class="img-circle" src="img/fiqie1.jpg" width="220px" height="200px"/>
</div>
<div class="pw_info" >
<h1>Fiqie Ulya </h1>
<h2>13514602</h2>
<p>Panda lover</p>
</div>
</div>
<div class="profile_widget" >
<div class="pw_avatar" >
<img class="img-circle" src="img/marco.jpg" width="220px" height="200px" />
</div>
<div class="pw_info" >
<h1>Marco Orlando </h1>
<h2>13513038</h2>
<p>Panda lover</p>
</div>
</div>
<!--img class="img-circle" src="img/fiqie.jpg" width="220px" height="200px" /-->
<!--img class="img-circle" src="img/marco.jpg" width="220px" height="200px" /-->
<!--h4 class="sub_white">Profile</h4-->
</div>
</div>
</div>
<div id="slide5">
<div class="content" style="margin-top:100px;">
<select id="kategori">
<option value="0" selected="selected">[silakan pilih]</option>
<option value="1">Hasil industri</option>
<option value="2">Hasil pertambangan dan sektor lainnya</option>
<option value="3">Hasil pertanian</option>
<option value="4">Ekspor yang tidak dapt diklasifikasikan</option>
</select>
<select id="jenis">
<option value="" selected="selected">[silakan pilih]</option>
</select>
<button id="ubah">klik</button>
<div class="graph" id="grafik"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
var option_file = [
{"[silakan pilih]": ""},
{"Alas Kaki": "tsv/Hasil industri/Alas kaki.tsv", "Asam berlemak" : "tsv/Hasil industri/Asam berlemak.tsv", "Bahan celup organik sintetik": "tsv/Hasil industri/Bahan celup organik sintetik.tsv", "Bahan kertas" :"tsv/Hasil industri/Bahan kertas.tsv", "Bahan kimia" :"tsv/Hasil industri/Bahan kimia.tsv", "Bahan anyaman" :"tsv/Hasil industri/Bahan anyaman.tsv", "Barang dari logam mulia" : "tsv/Hasil industri/Barang dari logam mulia.tsv", "Damar tiruan, bahan plastik" : "tsv/Hasil industri/Damar tiruan, bahan plastik.tsv","Emas batang" : "tsv/Hasil industri/Emas batang.tsv", "Furnitur":"tsv/Hasil industri/Furnitur.tsv", "Gelas dan barang dari gelas":"tsv/Hasil industri/Gelas dan barang dari gelas.tsv", "Gliserol dan larutan alkali" : "tsv/Hasil industri/Gliserol dan larutan alkali.tsv","Hasil industri lainnya":"tsv/Hasil industri/Hasil industri lainnya.tsv","Kapal laut dan sejenisnya":"tsv/Hasil industri/Kapal laut dan sejenisnya.tsv", "Karet olahan" : "tsv/Hasil industri/Karet olahan.tsv", "Kendaraan bermotor roda 2 dan 3" : "tsv/Hasil industri/Kendaraan bermotor roda 2 dan 3.tsv","Kendaraan bermotor roda 4 dan lebih" : "tsv/Hasil industri/ Kendaraan bermotor roda 4 dan lebih.tsv", "Kertas dan barang dari kertas" : "tsv/Hasil industri/Kertas dan barang dari kertas.tsv", "Komputer dan bagiannya" : "tsv/Hasil industri/Komputer dan bagiannya.tsv", "Kulit dan barang dari kulit":"tsv/Hasil industri/Kulit dan barang dari kulit.tsv", "Makanan olahan" : "tsv/Hasil industri/Makanan olahan.tsv", "Makanan ternak" : "tsv/Hasil industri/Makanan ternak.tsv", "Margarin dan lemak lainnya" : "tsv/Hasil industri/Margarin dan lemak lainnya.tsv", "Minyak atsiri dan lainnya" : "tsv/Hasil industri/Minyak atsiri dan lainnya.tsv", "Minyak sawit" : "tsv/Hasil industri/Minyak sawit.tsv", "Peralatan listrik, alat ukur dan optik" : "tsv/Hasil industri/Peralatan listrik, alat ukur dan optik.tsv", "Perlengkapan olahraga" : "tsv/Hasil industri/Perlengkapan olahraga.tsv", "Pesawat udara dan bagiannya" : "tsv/Hasil industri/Pesawat udara dan bagiannya.tsv", "Peti kemas" : "tsv/Hasil industri/Peti kemas.tsv", "Preparat pembasmi kuman" : "tsv/Hasil industri/Preparat pembasmi kuman.tsv", "Produk farmasi" : "tsv/Hasil industri/Produk farmasi.tsv", "Produk kayu olahan" :"tsv/Hasil industri/Produk kayu olahan.tsv", "Produk keramik": "tsv/Hasil industri/Produk keramik", "Produk logam dasar": "tsv/Hasil industri/Produk logam dasar.tsv", "Pupuk" : "tsv/Hasil industri/Pupuk.tsv", "Rotan olahan" : "tsv/Hasil industri/Rotan olahan.tsv", "Sabun mandi dan cuci" : "tsv/Hasil industri/Sabun mandi dan cuci.tsv", "Semen" : "tsv/Hasil industri/Semen.tsv", "Suku cadang kendaraan" : "tsv/Hasil industri/Suku cadang kendaraan.tsv", "Suku cadang mesin" : "tsv/Hasil industri/Suku cadang mesin.tsv", "Tekstil dan produk tekstil" : "tsv/Hasil industri/Tekstil dan produk tekstil.tsv"},
{"Batu bara":"tsv/Hasil pertambangan dan sektor lainnya/Batubara.tsv", "Bauksit":"tsv/Hasil pertambangan dan sektor lainnya/Bauksit.tsv", "Biji nikel" : "tsv/Hasil pertambangan dan sektor lainnya/Biji nikel.tsv", "Biji tembaga":"tsv/Hasil pertambangan dan sektor lainnya/Biji tembaga.tsv", "Granit" : "tsv/Hasil pertambangan dan sektor lainnya/Granit.tsv", "Hasil pertambangan lainnya": "tsv/Hasil pertambangan dan sektor lainnya/Hasil pertambangan lainnya.tsv","Hasil sektor lainnya" : "tsv/Hasil pertambangan dan sektor lainnya/Hasil sektor lainnya.tsv"},
{"Bahan nabati":"tsv/Hasil pertanian/Bahan nabati.tsv", "Biji coklat":"tsv/Hasil pertanian/Biji coklat.tsv", "Biji kopi" : "tsv/Hasil pertanian/Biji kopi.tsv", "Buah-buahan": "tsv/Hasil pertanian/Buah-buahan.tsv", "Damar dan getah damar": "tsv/Hasil pertanian/Damar dan getah damar.tsv", "Hasil pertanian lainnya": "tsv/Hasil pertanian/Hasil pertanian lainnya.tsv", "Ikan dan lain-lain": "tsv/Hasil pertanian/Ikan dan lain-lain.tsv", "Karet alam" : "tsv/Hasil pertanian/Karet alam.tsv", "Rempah-rempah" : "tsv/Hasil pertanian/Rempah-rempah.tsv", "Sayur-sayuran.tsv": "tsv/Hasil pertanian/Sayur-sayuran.tsv", "Teh": "tsv/Hasil pertanian/Teh.tsv", "Tembakau": "tsv/Hasil pertanian/Tembakau.tsv", "Udang" : "tsv/Hasil pertanian/Udang.tsv"},
{"Ekspor yang tidak dapat diklasifikasikan":"tsv/Ekspor yang tidak dapat diklasifikasikan/Ekspor yang tidak dapat diklasifikasikan.tsv"}
]
var ubah_opsi = function (e){
var list_jenis = option_file[$(this).val()];
var select_jenis = $("#jenis");
select_jenis.empty();
$.each(list_jenis, function(key,value) {
select_jenis.append($("<option></option>")
.attr("value", value).text(key));
});
console.log(options);
$("#jenis").inner(options);
}
var type = function type(d) {
d.nilai_ekspor = +d.nilai_ekspor;
return d;
}
var ubah_grafik = function (e) {
var margin = {top: 40, right: 30, bottom: 30, left: 80},
width = 950 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var formatPercent = d3.format("");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>nilai_ekspor:</strong> <span style='color:red'>" + d.nilai_ekspor + "</span>";
})
d3.select("svg").remove()
var svg = d3.select("#grafik").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
d3.tsv($("#jenis").val(), type, function(error, data) {
x.domain(data.map(function(d) { return d.tahun; }));
y.domain([0, d3.max(data, function(d) { return d.nilai_ekspor; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("nilai_ekspor (ribu USD)");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.tahun); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.nilai_ekspor); })
.attr("height", function(d) { return height - y(d.nilai_ekspor); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
}
$(function(){
$("#kategori").change(ubah_opsi);
$("#ubah").click(ubah_grafik);
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$("#nav li a").removeClass("active");
$(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;
});
}
}
});
});
</script>
</body>
</html>