Source Code Phone Labels China

Dari Universitas Bhayangkara

Nama : Achmad Ifandi Yazid

Gis dengan D3js

1. Source code teta tentang pencarian data phone dari China

    Yang pertama Index html dan tampilan

2. Data selanjutnya adalah main progamnya yang terdapat input Json   

   var width  = 1024;

var height = 768;

var svg = d3.select("#china-map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,0)");

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","#E9A825");
      tooltip.transition()
        .duration(200)
        .style("opacity", .9);

      tooltip.html(d.properties.name)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout",function(d,i){
      d3.select(this).attr("fill","gray");
      tooltip.transition()
             .duration(500)
             .style("opacity", 0);
    });


d3.json("data.json", function(events1){
  console.log(events1)
svg.selectAll(".city-label")
    .data(events1)
    .enter().append("text")
    .attr("class","city-label")
    .attr("x",function (d) {
  
  var kordinat = projection ([d.longitude, d.latitude])
  console.log(kordinat)
  return kordinat[0];
})

  .attr("y",function(d){
  var kordinat = projection ([d.longitude, d.latitude])
  console.log(kordinat)
  return kordinat[1];
})

  .text(function(d){
  console.log(d)

})

svg.selectAll("city-circle")
  .data(events1)
  .enter().append("circle")
  .attr("r",2)
  .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];
})

  .on("mouseover", function(d) {    
            div.transition()    
                .duration(200)    
                .style("opacity", .9);    
            div .html(d.device_model) 
                .style("left", (d3.event.pageX) + "px")   
                .style("top", (d3.event.pageY - 28) + "px");  
            })          
        .on("mouseout", function(d) {   
            div.transition()    
                .duration(500)    
                .style("opacity", 0); 
        });


  });

});    

ink untuk Json bisa di lihat di sene
https://www.kaggle.com/beyondbeneath/geolocation-visualisations/data