D3 Examples - Collection Estimates

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="utf-8">
  <title>Collection Estimates</title>
  <script src="https://c3js.org/js/d3-3.5.6.min-77adef17.js"></script>
  <script src="https://c3js.org/js/c3.min-4c5bef8f.js" charset="utf-8"></script>
  <script src="https://c3js.org/js/highlight.pack-4af5004d.js"></script>
  <script src="https://c3js.org/js/foundation.min-1dfe8110.js"></script>
  <script src="https://c3js.org/js/jquery-1.11.0.min-910066fb.js"></script>
​
  <script src="https://c3js.org/js/ace/ace.js"></script>
  <script src="https://c3js.org/js/ace/mode-javascript.js"></script>
  <script src="https://c3js.org/js/ace/theme-tomorrow.js"></script>
​
​
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
    <style>
    .legend span {
    width: 33.333333%;
  
    text-align: center;
    cursor: pointer;
    color: black;
​
        
}
    
 
  </style>
</head>
​
<body>
  <div class="container">
  <div class="chart">
  <div id="chart">
​
 <div class="legend">
    <span data-id='data1' style='background-color: #1F77B4;'>New Items not in Collectify, but in EAD (815)</span>
    <span data-id='data' style="background-color: #FF7F0E;">Non-Trade Cards in EAD (4012)</span>
   <span data-id='data3' style="background-color:#2CA02C">Trade Cards in EAD (4225)</span>
   <span data-id='data4' style="background-color:#D62728;">Fine Arts Atelier (60)*</span>
   <span data-id='data5' style="background-color: #9467BD;">Documents and Trade Cards Processed in Round 2 (1950)*</span>
   <span data-id='data6' style="background-color: #8C564B;">Miscellaneous 3d Objects in Atelier(103)*</span>
  <span data-id='data7' style="background-color: #E377C2;">Unknown, Perhaps Books needed to get to 12067 (902)*</span>
  
  </div>
  <p>* indicates that objects are not in have not been been photographed may not be processed.</p>
  
​
  
  <script>
   var chart = c3.generate({
    data: {
        columns: [
​
                ['data1', 815],
            ['Non-Trade Cards in EAD (4012)', 4012],
            ['Trade Cards in EAD (4225)', 4225],
            ['Fine Arts Atelier (60)*', 60],
            ['Documents and Trade Cards Processed in Round 2 (1950)*', 1950],
            ['Miscellaneous 3d Objects in Atelier(103)*', 103],
            ['Unknown, Perhaps Books needed to get to 12067 (902)*', 902]
       ],
        type: 'pie'
    },
    legend: {
        show: false
    }
});
​
function toggle(id) {
    chart.toggle(id);
}      
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
    .data(['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'])
  .enter().append('span')
    .attr('data-id', function (id) { return id; })
    .html(function (id) { return id; })
    .each(function (id) {
        d3.select(this).style('background-color', chart.color(id));
    })
    .on('mouseover', function (id) {
        chart.focus(id);
    })
    .on('mouseout', function (id) {
        chart.revert();
    })
    .on('click', function (id) {
        chart.toggle(id);
    });
​
    
  
  </script>
  </div>
  </div>
</body>
​
</html>
​
    