D3 Table with Inline Bar Indicator

See it in action at: bl.ocks.org (Note: bl.ocks.org link won't work for IE 8.)

#Overview This is a simple D3 constructed table that includes an inline CSS-based bar indicator for negative and positive values. Since it is CSS and not SVG, it works on IE 8 (and maybe earlier) by including Sizzle and a shim from Aight. Save it locally to test out IE 8 compatibility.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
    
    <style>
      h1 {
        font: 16px sans-serif;
        font-weight: bold;
        text-decoration: underline;
      }
      
      div {
        height: 17px;
      }
      div.container {
        float: left;
        width: 50%;
      }
      div.negative {
        float: right;
        background-color: brown;
      }
      div.positive {
        background-color: steelblue;
      }
      
      table {
        font: 14px sans-serif;
        vertical-align: middle;
        text-align: left;
        border-collapse: collapse;
      }
      
      td,th {
        padding-top: 2px;
        padding-bottom: 2px;
      }
      
      tr.even {
        background-color: whitesmoke; 
      }
      
      td.chart {
        background-color: white; 
      }
      
      
      th {
        padding-left: 10px;
      }
      
      th.total {
        text-align: right;
      }
      
      td.data {
        padding-left: 10px;

}
      td.value {
        text-align: right;
      }
      
    </style>
  </head>
  
  <body>
  <h1>Strategy Attribution Rank</h1>
    <script>
      var chartWidth = "100px",
          percent = d3.format(".2%");

var table = d3.select("body").append("table");

// Create a table with rows and bind a data row to each table row
      var tr = table.selectAll("tr.data")
          .data(data)
        .enter()
          .append("tr")
          .attr("class", "datarow");
      
      // Set the even columns
      d3.selectAll(".datarow").filter(":nth-child(even)").attr("class", "datarow even")
      
      
      // Create the name column
      tr.append("td").attr("class", "data name")
          .text(function(d) { return d[0] });
          
      // Create the percent value column
      tr.append("td").attr("class", "data value")
          .text(function(d) { return percent(d[1]) })

// Create a column at the beginning of the table for the chart
      var chart = tr.append("td").attr("class", "chart").attr("width", chartWidth);
      
      // Create the div structure of the chart
      chart.append("div").attr("class", "container").append("div").attr("class", "negative");
      chart.append("div").attr("class", "container").append("div").attr("class", "positive");

// Creates the negative div bar
      tr.select("div.negative")
        .style("width", "0%")
        .transition()
        .duration(500)
          .style("width", function(d) { return d[1] > 0 ? "0%" : x(Math.abs(d[1]));});

// Creates the positive div bar
      tr.select("div.positive")
        .style("width", "0%")
        .transition()
        .duration(500)
          .style("width", function(d) { return d[1] > 0 ? x(d[1]) : "0%"; });
      
      // Add the Total row
      var totalRow = table.append("tr");
      totalRow.append("th").attr("class", "totalDesc").text("Total Return");
      totalRow.append("th").attr("class", "total").text(percent(total));

</script>
  </body>
</html>

Updated missing url https://raw.github.com/shawnbot/aight/master/aight.min.js to https://cdn.jsdelivr.net/gh/shawnbot/aight/aight.min.js

https://raw.github.com/shawnbot/aight/master/aight.min.js

https://cdnjs.cloudflare.com/ajax/libs/sizzle/1.4.4/sizzle.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js