Implementasi dan Menampilkan Data File SCV ke d3Js

posted by Gsurya on Desember 16, 2019 No Comments
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>
&nbsp; 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 :




0 komentar:

Posting Komentar