D3 Examples - Hist : Comaraison Rf vs Xgb

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  
​
    rect {
      fill: white;
      stroke: black;
      stroke-width: 1px;
    }
   .hidden1 {
        display: none;
    }
    div.tooltip1 {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
    .hidden2 {
        display: none;
    }
    div.tooltip2 {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
  
  </style>
</head>
​
<body>
  <div id='chart1'></div>
  <div id='chart2'></div>
  <script>
var dataXgb = [0.13103364, 0.14456363, 0.04778157, 0.0739883, 
               0.12676743, 0.0265724, 0.00901999, 0.06253047,
               0.00060946, 0.03083862, 0.0251097, 0.1094588, 
               0.0784983, 0.04339347, 0.0738664, 0.01596782];
var dataRF = [ 0.11644228,  0.0512878 ,  0.02223823,  0.02861037,  0.0678888 ,
        0.00661418,  0.01226258,  0.04944702,  0.00991546,  0.02635431,
        0.02287928,  0.12423607,  0.11368485,  0.11173004,  0.1222419 ,
        0.11416685];
var reg = ['Latitude', 'Beat', 'Description', 'Primary Type',
               'Arrest', 'Community Area', 'Block', 
               'Longitude', 'IUCR', 'Location Description',
               'District', 'Location', 'Ward', 'Domestic', 
               'Y Coordinate', 'Date', 'X Coordinate'];
​
var svg1 = d3.select("#chart1").append("svg")
      .attr("width", 900)
      .attr("height", 300);
//d3.select('#dataframe').html("testttt");
var svg2 = d3.select("#chart2").append("svg")
      .attr("width", 900) 
      .attr("height", 300);
    var x1 = d3.scaleLinear().range([0, 500]).domain([0, dataRF.length]);
    var y1 = d3.scaleLinear().range([0, 100]).domain([0, d3.max(dataRF)]); 
    var x2 = d3.scaleLinear().range([0, 500]).domain([0, dataXgb.length]);
    var y2 = d3.scaleLinear().range([0, 100]).domain([0, d3.max(dataXgb)]);
    var g1 = svg1.append("g").attr("transform", "translate(100, 0)");
    var g2 = svg2.append("g").attr("transform", "translate(100, 0)");
    var tooltip1 = d3.select('#chart1')
                    .append('div')
                    .attr('class', 'hidden1 tooltip1');
    var tooltip2 = d3.select('#chart2')
                    .append('div')
                    .attr('class', 'hidden2 tooltip2');
// For RF
    g1.selectAll("text").data(dataRF).enter().append("text")
      .text("Histogramme d'importances des variables selon Random Forest")
      .attr("y", 200)
      .attr("x", 300)
      .style("font-size", 12)
    .style("text-anchor", "middle")
      .style("font-family", "monospace");
​
    g1.selectAll("rect").data(dataRF).enter().append("rect")
        .attr("x", function(d, i) { return x1(i); })
        .attr("y", function(d) { return 170 - y1(d); })
        .attr('id', function(d, i ) {return 'Rect' + i;})
        .attr("height", function(d) { return y1(d); })
        .attr("width", 500 / dataRF.length - 10 )
    .on("mouseover", function(d, i) {
      d3.select('#Rect'+i).style("fill", "red");
      d3.select('#Rect2'+i).style("fill", "red");
    /*    // Using Ids instead of values
      d3.selectAll("text").filter(function(e, j) {
          return i === j;
        })
        .style("font-size", 24);*/
        var mouse = d3.mouse(svg1.node()).map(function(d) {
                 return parseInt(d);
              });
        tooltip1.classed('hidden1', false)
                     .attr('style', 'left:' + (mouse[0] + 80) +
                             'px; top:' + (mouse[1] - 50) + 'px')
            .html(reg[i] + " : " + d);
      
    })
​
    .on("mouseout", function(d, i) {
      d3.select('#Rect'+i).transition().duration(500).style("fill", "white");
      d3.select('#Rect2'+i).transition().duration(500).style("fill", "white");  
        // Should be using Ids instead of values
     /* d3.selectAll("text").filter(function(e, j) {
          return i === j;
        })
        .transition().duration(500)
        .style("font-size", 12);*/
       tooltip1.classed('hidden1', true);
      
    });
​
​
// For Xgb
  g2.selectAll("text").data(dataXgb).enter().append("text")
      .text("Histogramme d'importances des variables selon XgBoost")
      .attr("y", 200)
      .attr("x", 300)
      .style("font-size", 12)
    .style("text-anchor", "middle")
      .style("font-family", "monospace");
​
    g2.selectAll("rect").data(dataXgb).enter().append("rect")
        .attr("x", function(d, i) { return x2(i); })
        .attr("y", function(d) { return 170 - y2(d); })
        .attr("height", function(d) { return y2(d); })
      .attr('id', function(d, i ) {return 'Rect2' + i;})
        .attr("width", 500 / dataXgb.length - 10 )
    .on("mouseover", function(d, i) {
      d3.select('#Rect'+i).style("fill", "red");
        d3.select('#Rect2'+i).style("fill", "red");
        var mouse2 = d3.mouse(svg2.node()).map(function(d) {
                 return parseInt(d);
              });
        tooltip2.classed('hidden2', false)
                     .attr('style', 'left:' + (mouse2[0] + 80) +
                             'px; top:' + (mouse2[1] +150) + 'px')
            .html(reg[i] + " : " + d);
      
    })
​
    .on("mouseout", function(d, i) {
       d3.select('#Rect'+i).transition().duration(500).style("fill", "white");
       d3.select('#Rect2'+i).transition().duration(500).style("fill", "white");
       tooltip2.classed('hidden2', true);
       
    });
​
​
  </script>
</body>
​
    