Table Subplots in JavaScript

How to make a D3.js-based table subplots in javascript.


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/Mining-BTC-180.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
  }

  // header values
  var headerNames = d3.keys(rows[0]);
  var headerValues = [headerNames[1],headerNames[2],
                      headerNames[3],headerNames[4]];

  // cell values
  var cellValues = [];
  for (i = 0; i < headerValues.length; i++) {
    cellValue = unpack(rows, headerValues[i]);
    cellValues[i] = cellValue;
  }

  // clean date
  for (i = 0; i < cellValues[0].length; i++) {
  var dateValue = cellValues[0][i].split(' ')[0]
  cellValues[0][i] = dateValue
  }

  // create table
  var table = {
    type: 'table',
    columnwidth: [150,200,200,150],
    columnorder: [0,1,2,3],
    header: {
      values: headerValues,
      align: "center",
      line: {width: 1, color: 'rgb(50, 50, 50)'},
      fill: {color: ['rgb(235, 100, 230)']},
      font: {family: "Arial", size: 11, color: "white"}
    },
    cells: {
      values: cellValues,
      align: ["center", "center"],
      line: {color: "black", width: 1},
      fill: {color: ['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)']},
      font: {family: "Arial", size: 10, color: ["black"]}
    },
    xaxis: 'x',
    yaxis: 'y',
    domain: {x: [0,0.4], y: [0,1]}
  }

  // create 1st plot
  var trace1 = {
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'Hash-rate'),
    xaxis: 'x1',
    yaxis: 'y1',
    mode: 'lines',
    line: {width: 2, color: '#9748a1'},
    name: 'hash-rate-TH/s'
  }
  // create 2nd plot
  var trace2 = {
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'Mining-revenue-USD'),
    xaxis: 'x2',
    yaxis: 'y2',
    mode: 'lines',
    line: {width: 2, color: '#b04553'},
    name: 'Mining-revenue-USD'
  }

  // create 3rd plot
  var trace3 = {
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'Transaction-fees-BTC'),
    xaxis: 'x3',
    yaxis: 'y3',
    mode: 'lines',
    line: {width: 2, color: '#af7bbd'},
    name: 'Transaction-fees-BTC'
  }

  var data = [table,trace1,trace2,trace3]

  // define subplot axes
  var axis = {
    showline: true,
    zeroline: false,
    showgrid: true,
    mirror:true,
    ticklen: 4,
    gridcolor: '#ffffff',
    tickfont: {size: 10},
  }

  var axis1 = {domain: [0.5, 1], anchor: 'y1', showticklabels: false}
  var axis2 = {domain: [0.5, 1], anchor: 'y2', showticklabels: false}
  var axis3 = {domain: [0.5, 1], anchor: 'y3'}
  var axis4 = {domain: [0.66, 0.98], anchor: 'x1', hoverformat: '.2f'}
  var axis5 = {domain: [0.34, 0.64], anchor: 'x2', tickprefix: '$', hoverformat: '.2f'}
  var axis6 = {domain: [0.0, 0.32], anchor: 'x3', tickprefix: '\u20BF', hoverformat: '.2f'}

  // define layout
  var layout = {
    title: {text: "Bitcoin mining stats for 180 days"},
    plot_bgcolor: 'rgba(228, 222, 249, 0.65)',
    showlegend: false,
    xaxis1: Object.assign(axis1,axis),
    xaxis2: Object.assign(axis2,axis),
    xaxis3: Object.assign(axis3,axis),
    yaxis1: Object.assign(axis4,axis),
    yaxis2: Object.assign(axis5,axis),
    yaxis3: Object.assign(axis6,axis)
  }

  Plotly.newPlot('myDiv', data, layout);

});
Click to copy
4M6M8M10M12M$5M$10MMay 2017Jun 2017Jul 2017Aug 2017Sep 2017Oct 2017₿0₿200₿400₿6002017-04-292017-04-302017-05-012017-05-022017-05-032017-05-042017-05-052017-05-062017-05-072017-05-082017-05-092017-05-102017-05-112017-05-122017-05-132017-05-142017-05-152017-05-162017-05-172017-05-182017-05-192017-05-202017-05-212017-05-222017-05-232017-05-24Date341319281489294786333161295149354737267193363022316011365096332879311391294743317698329266369098329229233977317527288904319502352805326057327868367710338642Number-transactions44889163918072389212440997043425069435917933472274359179433323246705494021862411977337579014286791439813645651544732172367439243146273952755456515445929904091937406410049767384562010Output-volume(BTC)31191792720216287827831495532760373350074627791703610789350562040621733715394366504134680773731718388582140180284090703335633242412643986175474688048623174331490449910556689465524488Market-price
Bitcoin mining stats for 180 days