Combine Leaflet + NVD3

by Shabeer Sheffa

HTML

<head>

  <title>V4TEST</title>

  <meta charset="utf-8" />

  <!-- CSS Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

  <!-- JS Leaflet -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

  <!-- CSS Fullscreen -->
  <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

  <!-- JS Fullscreen -->
  <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>

  <!-- JS JQuery -->
  <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

  <!-- JS D3 -->
  <script src="https://d3js.org/d3.v3.min.js"></script>

  <!-- CSS NVD3 -->
  <link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet">


  <!-- JS NVD3 -->
  <script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
</head>

<body>

  <div id="plastic-map"></div>

  <!-- Data-->
  <script src='https://cdn.rawgit.com/andieich/test_plastic/master/data/PlasticData.js'></script>

</body>

CSS

body {
    padding: 0;
    margin: 0;
  }

  html,
  body,
  #plastic-map {
    height: 100%;
    width: 100%;
  }

  .info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }

  .info h4 {
    margin: 0 0 5px;
    color: #777;
  }

  .legend {
    line-height: 18px;
    color: #555;
  }

  .legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 1;
  }

JavaScript

$(document).ready(function() {

  //Chart Generation
  function exampleData() {
    return [{
        "label": "One",
        "value": 29.765957771107
      },
      {
        "label": "Two",
        "value": 0
      },
      {
        "label": "Three",
        "value": 32.807804682612
      },
      {
        "label": "Four",
        "value": 196.45946739256
      },
      {
        "label": "Five",
        "value": 0.19434030906893
      },
      {
        "label": "Six",
        "value": 98.079782601442
      },
      {
        "label": "Seven",
        "value": 13.925743130903
      },
      {
        "label": "Eight",
        "value": 5.1387322875705
      }
    ];
  }

  function createPieChart() {
    nv.addGraph(function() {
      var chart = nv.models.pieChart()
        .x(function(d) {
          return d.label
        })
        .y(function(d) {
          return d.value
        })
        .showLabels(true);

      d3.select("#chart svg") //WHAT TO SELECT HERE????
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

      return chart;
    });
  }


  //Initialize Map
  var p_map = L.map('plastic-map', {
    fullscreenControl: true
  }).setView([1.748, 125.135], 17);


  //Make Coulour Palette
  function getColor(d) {
    return d > 70 ? '#800026' :
      d > 60 ? '#BD0026' :
      d > 50 ? '#E31A1C' :
      d > 40 ? '#FC4E2A' :
      d > 30 ? '#FD8D3C' :
      d > 20 ? '#FEB24C' :
      d > 10 ? '#FED976' :
      '#FFEDA0';
  }


  //Set 'normal' Style
  function style(feature) {
    return {
      fillColor: getColor(feature.properties.amount),
      weight: 2,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }


  //Set highlight Style
  function highlight(layer) {
    layer.setStyle({
      weight: 5,
      color: '#666',
      dashArray: '',
      fillOpacity: 0.7
    });
    if (!L.Browser.ie && !L.Browser.opera) {
      layer.bringToFront();
    }
  }


  //Set...