Pada kali ini kelompok saya akan mempraktekan penggunaan d3.js, dan kelompok saya akan menggunakan data dari website https://www.kaggle.com/beyondbeneath/geolocation-visualisations/data dan data yang kelompok saya ambil merupakan data events.csv dan phone_brand_device_model.csv. Pada kedua data tersebut yang kami ambil adalah data dari latitude dan longitude dari events.csv dan data model device yang didapat dari phone_brand_device_model.csv .
Data tersebut akan diproyeksikan kedalam map dan akan menghasilkan titik-titik koordinat yang akan menampilkan nama dari model device dari data tersebut. berikut ini merupakan source code yang kita gunakan untuk menampilkan map
Index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>D3 china map</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.10/d3.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
Map China
<div id="china-map"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./script.js"></script>
</body>
</html>script.js
var width = 1024;
var height = 768;
var svg = d3.select("#china-map")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)}))
var projection = d3.geo.mercator()
.center([107, 31])
.scale(700)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
d3.json("china_map.json", function(error, root) {
if (error) return console.error(error);
var tooltip = d3.select("body")
.append("div")
.attr("class","tooltip")
.style("opacity", 0);
svg.selectAll("path")
.data(root.features)
.enter()
.append("path")
.attr("stroke","#000")
.attr("stroke-width",1)
.attr("fill", function(d,i){
return "gray";
})
.attr("d", path )
.on("mouseover",function(d,i){
d3.select(this).attr("fill","#cccccc");
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html()
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
d3.json("data.json", function(data){
console.log(data)
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r",6)
.attr("cx",function (d) {
var kordinat = projection ([d.longitude, d.latitude])
console.log(kordinat)
return kordinat[0];
})
.attr("cy",function(d){
var kordinat = projection ([d.longitude, d.latitude])
console.log(kordinat)
return kordinat[1];
})
.style('opacity', '.5')
.on('mouseover', function(d, i) {
tooltip.html('No: ' + d.event_id +
'\n Device ID: ' + d.device_id +
'\n Time Stamp: ' + d.timestamp +
'\n Longitude: ' + d.longitude +
'\n Latitude: ' + d.latitude +
'\n Tipe HP: ' + d.device_model)
.style('text-align', 'align left')
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY + 'px')
.style('display', 'block')
.style('opacity', 1.7);
})
.on('mouseout', function(d) {
tooltip
.style('display', 'none');
});
});
});
style.css
svg {
background-color: PowderBlue;
}
body{
background: #B0DFE5;
color: #660d00;
font: bold large serif;
font-size: 50px;
}
path {
fill: SeaGreen;
stroke: #660d00;
stroke-width: 0.5px;
}
.tooltip {
background-color: yellow;
position: absolute;
padding: 0 10px;
white-space: pre-line;
border-radius: 10px;
}Hasil :
