D3 / C3.js in combination with Leaflet

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css">
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
<link rel="stylesheet" href="//rawgit.com/masayuki0812/c3/master/c3.css">
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
D3 / C3.js in combination with Leaflet. Click feature so get infos.
<div id="map"></div>
<div id="chart"></div>

CSS

html, body {
        margin:0;
        padding:0;
        height:100%;
        width:100%;
    }
    #map {
        height:70%;
        width:100%;
    }
    #chart {
        height:50%;
        width:100%;
        bottom:0px;
    }

JavaScript

var map = L.map('map').setView([45.508, -122.647], 18);

 L.esri.basemapLayer('Streets').addTo(map);

 var trees = L.esri.featureLayer({
     url:
         'https://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Building_Footprints_pdx/FeatureServer/0' 
 }).addTo(map);



 trees.on('click', function (evt) {
     feature = evt.layer.feature;
     $("#chart").empty();
    
     var chart = c3.generate({
         data: {
             names: {
                 data1: 'Roof Elevation',
                 data2: 'SurfAdj',
                 data3: 'SURF_Elev',
                 data4: 'AVG Height',
                 data5: 'Area'
             },
             // just taken some RANDOM fields to demonstrate
             // how to draw the chart
             columns: [
                 ['data1',
                 feature.properties.ROOF_ELEV],
                 ['data2',
                 feature.properties.SURF_ADJ],
                 ['data3',
                 feature.properties.SURF_ELEV],
                 ['data4',
                 feature.properties.AVG_HEIGHT * 5],
                 ['data5',
                 feature.properties.SHAPE_AREA / 10]
             ],
             types: {
                 data1: 'bar',
                 data2: 'bar',
                 data3: 'bar',
                 data4: 'bar',
                 data5: 'bar'
             }
         },
         axis: {
             rotated: false,
             x: {
                 label: {
                     text: 'Your Topics',
                     position: 'outer-middle'

                 }
             },
             y: {
                 label: {
                     text: 'Your_Values',
                     position: 'outer-center'
                 }
             }

         }
     });

 });