TUGAS AKHIR SIDS MEMBUAT PROJECTS WEBGL GLOBE MEMBUAT SEBUAH TOLKING DATA BISA TAU PENGGUNA YANG MEMAKAI MOBILE
UNIVERSITAS BHAYANGKARA SURABAYA
projects
yang saya buat untuk membuat tolking data bisa tau pengguna yang
memakai mobile dari pengguna laki - laki dan perempuan dalam menemukan
titik koordinat yang paling banyak yang menggunakan pengguna mobile
tersebut yang akan ditampilkan di webgl globe berikut cara proses
pembuatannya. jadi saya kebagian untuk pengolahan data dan programnya
- bahan yang dibutuhakan dalam projects tersebut seperti berikut :
1. install anaconda
2. siapkan data yaitu (toolking data pengguna mobile)
3. access webgl globe
berikut langkah - langkah pembuatannya :
1. pertama kita download data nya berikut datanya
jadi datanya ada 2 file yang dengan isi berbeda, file pertama bernama file events seperti berikut.
jadi data diatas mencakup event_id, device_id, timestime, langitude,
latitude. jadi yang event_id sama timestamp tidak saya butuh kan jadi
tinggal dihapus saja. jadi total data yang diatas mencapai 116510 jadi
kita potong 3000 data saja
2. data yang kedua bernama gender yang mencakup device_id, gender. seperti berikut datannya
jadi datanya file gender saya potong 3000 data menyesuaikan data events.
3.
dari kedua data yang sudah saya sebutkan dari kedua data punya
device_id jadi datanya saya gabung menjadi satu, setelah digabungkan ada
data yang sama di merge nanti jadi magnitude nya, selanjutnya data
gender difilter mana yang perempuan mana yang laki-laki. berikut hasil
datannya yang sudah digabungkan. untuk fungsi magnitude saya tambahkan
sendiri kedalam data nya agar mengetahui paling banyak pengguna mobile
tiap khusus perempuan dan laki - laki
4. jadi kalo sudah selesai kita compress datannya menjadi file json. coba akses untuk convert secara online berikut link nya https://codebeautify.org/csv-to-json-converter#
5. seperti berikut hasil data nya sudah convert ke json nya
6. lalu kita buat programnnya html nya dan GET json berikut programnya.
- index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WebGL Globe</title>
<meta charset="utf-8">
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #000000 url(/globe/loading.gif) center center no-repeat;
color: #ffffff;
font-family: sans-serif;
font-size: 13px;
line-height: 20px;
height: 100%;
}
#info {
font-size: 11px;
position: absolute;
bottom: 5px;
background-color: rgba(0,0,0,0.8);
border-radius: 3px;
right: 10px;
padding: 10px;
}
#currentInfo {
width: 270px;
position: absolute;
left: 20px;
top: 63px;
background-color: rgba(0,0,0,0.2);
border-top: 1px solid rgba(255,255,255,0.4);
padding: 10px;
}
a {
color: #aaa;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.bull {
padding: 0 5px;
color: #555;
}
#title {
position: absolute;
top: 20px;
width: 370px;
left: 20px;
background-color: rgba(0,0,0,0.2);
border-radius: 3px;
font: 20px Georgia;
padding: 10px;
}
.vis {
font: 16px Georgia;
line-height: 26px;
height: 30px;
text-align: center;
float: left;
width: 90px;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
-webkit-transition: all 0.1s ease-out;
}
.vis:hover, .vis.active a{
font-size: 23px;
color: #fff;
}
#ce span {
display: none;
}
#ce {
width: 107px;
height: 55px;
display: block;
position: absolute;
bottom: 15px;
left: 20px;
background: url(/globe/ce.png);
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<strong><a
href="http://www.chromeexperiments.com/globe">WebGL
Globe</a></strong> <span
class="bull">•</span> Created by the Google Data Arts
Team <span class="bull">•</span> Data acquired from
<a
href="https://www.kaggle.com/c/talkingdata-mobile-user-demographics/data">kaggle</a>
</div>
<div id="currentInfo">
<h2>Filter</h2>
<div class="vis active" id="vis_0">
<a href="#">pengguna</a>
</div>
<div class="vis" id="vis_1">
<a href="#">F</a>
</div>
<div class="vis" id="vis_2">
<a href="#">M</a>
</div>
</div>
<div id="title">
TalkingData Mobile User Demographics
</div>
<a id="ce" href="http://www.chromeexperiments.com/globe">
<span>This is a Chrome Experiment</span>
</a>
<script type="text/javascript" src="/globe/third-party/Detector.js"></script>
<script type="text/javascript" src="/globe/third-party/three.min.js"></script>
<script type="text/javascript" src="/globe/third-party/Tween.js"></script>
<script type="text/javascript" src="/webgl-globe-mastera/globe/globe.js"></script>
<script type="text/javascript">
var globe = DAT.Globe(document.getElementById('container'), function(label){
return new THREE.Color([
0xd9d9d9, 0xb6b4b5, 0x9966cc, 0x15adff, 0x3e66a3,
0x216288, 0xff7e7e, 0xff1f13, 0xc0120b, 0x5a1301, 0xffcc02,
0xedb113, 0x9fce66, 0x0c9a39,
0xfe9872, 0x7f3f98, 0xf26522, 0x2bb673, 0xd7df23,
0xe6b23a, 0x7ed3f7][label]);
});
var xhr;
TWEEN.start();
xhr = new XMLHttpRequest();
xhr.open('GET', '/webgl-globe-mastera/globe/population909500.json', true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
window.data = data;
var info = document.getElementById('currentInfo');
for (var i in data) {
info.innerHTML += '<div class= "vis" id="vis_' +i+'"><a href="#">' + data[i][0] + '</div>';
}
var change = function(i){
return function(){
globe.removeAllPoints();
globe.addData(data[i][1], {format: 'magnitude'});
globe.createPoints();
var yy = document.getElementByClassName('vis');
for (var j=0; j<yy.length; j++){
yy[j].setAttribute('class','vis');
}
this.setAttribute('class','vis active');
};
}
for(var i in data) {
var vis = document.getElementById('vis_' +i);
if (i==0) {
vis.setAttribute('class','vis active');
}
vis.addEventListener('click', change(i), false);
}
globe.addData(data[0][1],{format: 'magnitude'});
globe.createPoints();
globe.animate();
document.body.style.backgroundImage = 'none'; // remove loading
}
}
};
xhr.send(null);
</script>
</body>
</html>
- globe.js
var DAT = DAT || {};
DAT.Globe = function(container, opts) {
opts = opts || {};
var colorFn = opts.colorFn || function(x) {
var c = new THREE.Color();
c.setHSL( ( 0.6 - ( x * 0.5 ) ), 1.0, 0.5 );
return c;
};
var imgDir = opts.imgDir || '/globe/';
var Shaders = {
'earth' : {
uniforms: {
'texture': { type: 't', value: null }
},
vertexShader: [
'varying vec3 vNormal;',
'varying vec2 vUv;',
'void main() {',
'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
'vNormal = normalize( normalMatrix * normal );',
'vUv = uv;',
'}'
].join('\n'),
fragmentShader: [
'uniform sampler2D texture;',
'varying vec3 vNormal;',
'varying vec2 vUv;',
'void main() {',
'vec3 diffuse = texture2D( texture, vUv ).xyz;',
'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );',
'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );',
'gl_FragColor = vec4( diffuse + atmosphere, 1.0 );',
'}'
].join('\n')
},
'atmosphere' : {
uniforms: {},
vertexShader: [
'varying vec3 vNormal;',
'void main() {',
'vNormal = normalize( normalMatrix * normal );',
'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
'}'
].join('\n'),
fragmentShader: [
'varying vec3 vNormal;',
'void main() {',
'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );',
'gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;',
'}'
].join('\n')
}
};
var camera, scene, renderer, w, h;
var mesh, atmosphere, point;
var overRenderer;
var curZoomSpeed = 0;
var zoomSpeed = 50;
var mouse = { x: 0, y: 0 }, mouseOnDown = { x: 0, y: 0 };
var rotation = { x: 0, y: 0 },
target = { x: Math.PI*3/2, y: Math.PI / 6.0 },
targetOnDown = { x: 0, y: 0 };
var distance = 100000, distanceTarget = 100000;
var padding = 40;
var PI_HALF = Math.PI / 2;
function init() {
container.style.color = '#fff';
container.style.font = '13px/20px Arial, sans-serif';
var shader, uniforms, material;
w = container.offsetWidth || window.innerWidth;
h = container.offsetHeight || window.innerHeight;
camera = new THREE.PerspectiveCamera(30, w / h, 1, 10000);
camera.position.z = distance;
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry(200, 40, 30);
shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);
uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir+'world.jpg');
material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
});
mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = Math.PI;
scene.add(mesh);
shader = Shaders['atmosphere'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);
material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
side: THREE.BackSide,
blending: THREE.AdditiveBlending,
transparent: true
});
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set( 1.1, 1.1, 1.1 );
scene.add(mesh);
geometry = new THREE.BoxGeometry(0.75, 0.75, 1);
geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,-0.5));
point = new THREE.Mesh(geometry);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(w, h);
renderer.domElement.style.position = 'absolute';
container.appendChild(renderer.domElement);
container.addEventListener('mousedown', onMouseDown, false);
container.addEventListener('mousewheel', onMouseWheel, false);
document.addEventListener('keydown', onDocumentKeyDown, false);
window.addEventListener('resize', onWindowResize, false);
container.addEventListener('mouseover', function() {
overRenderer = true;
}, false);
container.addEventListener('mouseout', function() {
overRenderer = false;
}, false);
}
function addData(data, opts) {
var lat, lng, size, color, i, step, colorFnWrapper;
opts.animated = opts.animated || false;
this.is_animated = opts.animated;
opts.format = opts.format || 'magnitude'; // other option is 'legend'
if (opts.format === 'magnitude') {
step = 3;
colorFnWrapper = function(data, i) { return colorFn(data[i+2]); }
} else if (opts.format === 'legend') {
step = 4;
colorFnWrapper = function(data, i) { return colorFn(data[i+3]); }
} else {
throw('error: format not supported: '+opts.format);
}
if (opts.animated) {
if (this._baseGeometry === undefined) {
this._baseGeometry = new THREE.Geometry();
for (i = 0; i < data.length; i += step) {
lat = data[i];
lng = data[i + 1];
// size = data[i + 2];
color = colorFnWrapper(data,i);
size = 0;
addPoint(lat, lng, size, color, this._baseGeometry);
}
}
if(this._morphTargetId === undefined) {
this._morphTargetId = 0;
} else {
this._morphTargetId += 1;
}
opts.name = opts.name || 'morphTarget'+this._morphTargetId;
}
var subgeo = new THREE.Geometry();
for (i = 0; i < data.length; i += step) {
lat = data[i];
lng = data[i + 1];
color = colorFnWrapper(data,i);
size = data[i + 2];
size = size*200;
addPoint(lat, lng, size, color, subgeo);
}
if (opts.animated) {
this._baseGeometry.morphTargets.push({'name': opts.name, vertices: subgeo.vertices});
} else {
this._baseGeometry = subgeo;
}
};
function createPoints() {
if (this._baseGeometry !== undefined) {
if (this.is_animated === false) {
this.points = new THREE.Mesh(this._baseGeometry, new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors,
morphTargets: false
}));
} else {
if (this._baseGeometry.morphTargets.length < 8) {
console.log('t l',this._baseGeometry.morphTargets.length);
var padding = 8-this._baseGeometry.morphTargets.length;
console.log('padding', padding);
for(var i=0; i<=padding; i++) {
console.log('padding',i);
this._baseGeometry.morphTargets.push({'name': 'morphPadding'+i, vertices: this._baseGeometry.vertices});
}
}
this.points = new THREE.Mesh(this._baseGeometry, new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors,
morphTargets: true
}));
}
this.points.name = "lines";
scene.add(this.points);
}
}
// Create this function
function removeAllPoints() {
scene.remove(scene.getObjectByName("lines"));
}
function addPoint(lat, lng, size, color, subgeo) {
var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
point.position.y = 200 * Math.cos(phi);
point.position.z = 200 * Math.sin(phi) * Math.sin(theta);
point.lookAt(mesh.position);
point.scale.z = Math.max( size, 0.1 ); // avoid non-invertible matrix
point.updateMatrix();
for (var i = 0; i < point.geometry.faces.length; i++) {
point.geometry.faces[i].color = color;
}
if(point.matrixAutoUpdate){
point.updateMatrix();
}
subgeo.merge(point.geometry, point.matrix);
}
function onMouseDown(event) {
event.preventDefault();
container.addEventListener('mousemove', onMouseMove, false);
container.addEventListener('mouseup', onMouseUp, false);
container.addEventListener('mouseout', onMouseOut, false);
mouseOnDown.x = - event.clientX;
mouseOnDown.y = event.clientY;
targetOnDown.x = target.x;
targetOnDown.y = target.y;
container.style.cursor = 'move';
}
function onMouseMove(event) {
mouse.x = - event.clientX;
mouse.y = event.clientY;
var zoomDamp = distance/1000;
target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005 * zoomDamp;
target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005 * zoomDamp;
target.y = target.y > PI_HALF ? PI_HALF : target.y;
target.y = target.y < - PI_HALF ? - PI_HALF : target.y;
}
function onMouseUp(event) {
container.removeEventListener('mousemove', onMouseMove, false);
container.removeEventListener('mouseup', onMouseUp, false);
container.removeEventListener('mouseout', onMouseOut, false);
container.style.cursor = 'auto';
}
function onMouseOut(event) {
container.removeEventListener('mousemove', onMouseMove, false);
container.removeEventListener('mouseup', onMouseUp, false);
container.removeEventListener('mouseout', onMouseOut, false);
}
function onMouseWheel(event) {
event.preventDefault();
if (overRenderer) {
zoom(event.wheelDeltaY * 0.3);
}
return false;
}
function onDocumentKeyDown(event) {
switch (event.keyCode) {
case 38:
zoom(100);
event.preventDefault();
break;
case 40:
zoom(-100);
event.preventDefault();
break;
}
}
function onWindowResize( event ) {
camera.aspect = container.offsetWidth / container.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize( container.offsetWidth, container.offsetHeight );
}
function zoom(delta) {
distanceTarget -= delta;
distanceTarget = distanceTarget > 1000 ? 1000 : distanceTarget;
distanceTarget = distanceTarget < 350 ? 350 : distanceTarget;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
zoom(curZoomSpeed);
rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
distance += (distanceTarget - distance) * 0.3;
camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
camera.lookAt(mesh.position);
renderer.render(scene, camera);
}
init();
this.animate = animate;
this.__defineGetter__('time', function() {
return this._time || 0;
});
this.__defineSetter__('time', function(t) {
var validMorphs = [];
var morphDict = this.points.morphTargetDictionary;
for(var k in morphDict) {
if(k.indexOf('morphPadding') < 0) {
validMorphs.push(morphDict[k]);
}
}
validMorphs.sort();
var l = validMorphs.length-1;
var scaledt = t*l+1;
var index = Math.floor(scaledt);
for (i=0;i<validMorphs.length;i++) {
this.points.morphTargetInfluences[validMorphs[i]] = 0;
}
var lastIndex = index - 1;
var leftover = scaledt - index;
if (lastIndex >= 0) {
this.points.morphTargetInfluences[lastIndex] = 1 - leftover;
}
this.points.morphTargetInfluences[index] = leftover;
this._time = t;
});
// Near the bottom of the code
this.addData = addData;
this.removeAllPoints = removeAllPoints; // Add this line
this.createPoints = createPoints;
this.renderer = renderer;
this.scene = scene;
return this;
};
7. lalu letakan datanya di File C:Users/RICKYEKA, seperti berikut contoh nya.
8. langkah selanjutnya buka anaconda prompt, lakukan perintah ini : python -m http.server
9. lalu buka browser lakukan perintah ini : http://localhost:8000/webgl-globe-mastera/globe/
Referensi tugas uas : sekian
dari tugas kelompok projects UAS SIDS dari Ricky eka kurnia susprasetya
(1614311020) bertugas data dan programnya dan teman saya mahathir muhammad (1614311040).
