D3 Table (IBM Carbon)

d3-table-ibm-carbon.markdown

D3 Table (IBM Carbon)

A Pen by PJ Trainor on CodePen.

License.

index.html

<div id="title" class="bx--title">
  <h1>D3 + ES6</h1>
  <h2>IBM Carbon Components</h2>
  <h3>🏅 Olympic Medal Data 🏅</h3>
</div>

<div id="viz"></div>

script.babel

const url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1245865/summer-olympics.csv";

// use es6 template literals to populate rows
const rowTemplate = (d) => {
  return `
  <td>${d["No."]}</td>
  <td>${d.Nation}</td>
  <td>${d.Games}</td>
  <td>${d.Gold}</td>
  <td>${d.Silver}</td>
  <td>${d.Bronze}</td>
  <td>${d.Total}</td>
  `;
};

// read data from the url
d3.csv(url, (err, data) => {
  
  // select viz and append table
  // append Carbon Components data table class
  const table = d3.select("#viz").append("table")
    .attr("class", "bx--data-table-v2 bx--data-table-v2--zebra");
  
  // append headers
  const header = table.append("thead")
    .selectAll('.header')
    .data(data.columns)
    .enter()
    .append('th')
    .text(d => d);
  
  // append rows with rowTemplate
  const rows = table.append("tbody")
    .selectAll(".row")
    .data(data)
    .enter()
    .append("tr")
    .html(rowTemplate);
      
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

style.css

#title {
  margin: 2em;  
}

th {
  padding: 1em;
}

styles

<link href="https://unpkg.com/carbon-components@latest/css/carbon-components.css" rel="stylesheet" />