vendredi 27 septembre 2019

How to plot points(data) in D3 using country if i don't have Lat long

Am using d3.js in my angular7 project to display the map and am using https://datamaps.github.io/ datamaps which is also using d3.js. to plot points(data) we need lat-long but what if I don't have lat-long and I have a country name then how can I plot the points(data) without lat-long.

bubble_map.bubbles([ { radius: 10, centered: 'BRA', country: 'USA', data: { Open: 120, Closed: 40, Agriculture: 60, Water: 34, Finance: 10, Transportation: 8, Other: 4, } }, { radius: 8, country: 'USA', centered: 'USA', data: { Open: 120, Closed: 40, Agriculture: 60, Water: 34, Finance: 10, Transportation: 8, Other: 4, } }, { radius: 12, country: 'USSR', latitude: 73.482, longitude: 54.5854, data: { Open: 120, Closed: 40, Agriculture: 60, Water: 34, Finance: 10, Transportation: 8, Other: 4, } } ]}

export class MapComponent implements OnInit {

constructor() { }

ngOnInit() {

let bubble_map = new Datamap({
  element: document.getElementById("container"),
  height: '460',
  scope: 'world',
  geographyConfig: {
    popupOnHover: false,
    dataUrl: null,
    borderColor: '#E5E5E5',
    hideAntarctica: true,
    hideHawaiiAndAlaska: true,
    borderWidth: 1,
    borderOpacity: 1,
    highlightOnHover: true,
    highlightFillColor: '#F2F2F2',
    highlightBorderColor: '#E5E5E5',
    highlightBorderWidth: 1,
    highlightBorderOpacity: 1,
    exitDelay: 100,
    animate: true
  },
  fills: {
    defaultFill: '#F2F2F2'
  },
  bubblesConfig: {
    borderWidth: 4,
    borderOpacity: 1,
    animate: true,
    fillColor: '#fff',
    borderColor: '#632AFF',
    popupOnHover: true,
    highlightFillColor: '#fff',
    highlightBorderColor: '#632AFF',
    highlightBorderWidth: 6,
    exitDelay: 100
  },
  arcConfig: {
    strokeColor: '#DD1C77',
    strokeWidth: 1,
    arcSharpness: 1,
    animationSpeed: 600
  },
  done: function() {},
});

// d3.select(window).on('resize', function () {
//   bubble_map.resize();
// });

bubble_map.bubbles([
  {
    radius: 10,
    centered: 'BRA',
    country: 'USA',
    data: {
      Open: 120,
      Closed: 40,
      Agriculture: 60,
      Water: 34,
      Finance: 10,
      Transportation: 8,
      Other: 4,
    }
  },
  {
    radius: 8,
    country: 'USA',
    centered: 'USA',
    data: {
      Open: 120,
      Closed: 40,
      Agriculture: 60,
      Water: 34,
      Finance: 10,
      Transportation: 8,
      Other: 4,
    }
  },
  {
    radius: 12,
    country: 'USSR',
    latitude: 73.482,
    longitude: 54.5854,
    data: {
      Open: 120,
      Closed: 40,
      Agriculture: 60,
      Water: 34,
      Finance: 10,
      Transportation: 8,
      Other: 4,
    }
  }
], {
  popupTemplate: function (geo, res) {
    // data = {};
    // let name = res.country;
    let newdata = res.data;
    return `<div class="hoverinfo"
       style="
         background: rgba(255, 255, 255, 0.96);
         border: 1px solid #e5e5e5;
         box-sizing: border-box;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
         border-radius: 10px;
         padding: 8px;
         font-family: Roboto;
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
         line-height: 12px;
         color: #000000;
         float: left;
         cursor: pointer;
       ">
         <div style="
           font-size: 12px;
           font-weight: bold;
           margin-bottom: 4px;
         ">${ res.country }</div>
        <div style="
          float:left;
          margin-right: 15px;
        ">
          <div style="margin-bottom: 2px;">Open : ${newdata.Open}</div>
          <div>Closed : ${newdata.Closed}</div>
        </div>
        <div style="
          float:left
        ">
          <div style="margin-bottom: 2px;">Agriculture: ${newdata.Agriculture}</div>
          <div style="margin-bottom: 2px;">Water: ${newdata.Water}</div>
          <div style="margin-bottom: 2px;">Finance: ${newdata.Finance}</div>
          <div style="margin-bottom: 2px;">Transportation: ${newdata.Transportation}</div>
          <div style="margin-bottom: 2px;">Other: ${newdata.Other}</div>
        </div>
       </div>`
  }
});

}

ngAfterViewInit() { }

}




Aucun commentaire:

Enregistrer un commentaire