D3 Examples - Market Capitalisation by Sector

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <div style="width:75%; margin: 1em auto">
        <canvas id="chart" width="900" height="600"></canvas>
    </div>
  <script>
    
    var file = "Data - Market capitalization by Industries.csv"
    
    var colorScale = d3.scaleOrdinal(d3.schemeCategory20)
    
    d3.csv(file, function(data){
      
      // map keys
      var quarters = Object.keys(data[1]);
      quarters.splice(0, 1); // remove index
//       quarters.splice(quarters.length-1, 1); // remove 2017 Q4
      
      // map values
      var datasets = data.map(d => ({
        fill: true,
        label : d[""],
        data : quarters.map(k =>  
                            d[k] === "" ? 0 : parseFloat(d[k]).toFixed(2)/1000
                           ),
        borderColor : colorScale(d[""]),
        backgroundColor : colorScale(d[""])
      }))
      
//       console.log(quarters)
      console.log(datasets)
      
      var config = {
        type: 'line',
        data: {
          labels : quarters,
          datasets : datasets
        },
        options: {
          responsive: true,
          title:{
            display:false,
            text:"Industries des 10 entreprises les plus capitalisées"
          },
          elements: { point: { radius: 1 } },
          tooltips: {
                        mode: 'index',
//             callbacks: {
//             label: (tooltipItem, data) =>  tooltipItem.yLabel+"%";
//              }
          },
          scales: {
            xAxes: [{
              scaleLabel: {
                display: false,
                labelString: 'Trimestres'
              }
            }],
            yAxes: [{
              stacked: true,
              scaleLabel: {
                display: true,
                labelString: 'Capitalisation (Milliards de Dollars US)'
              },
              ticks: {
                beginAtZero: true,
//                 steps: 10,
//                 stepValue: 5,
//                 max: 100
              }
            }]
          },
          animation: {
            duration: 750,
          },
        }
      }
​
      
      var chart = new Chart(document.getElementById("chart"), config);
      
    })
    
​
  </script>
</body>
​
    