Table with hyperlinks

Built with blockbuilder.org In response to this SO question from Francis Niu

forked from seemantk's block: Table with hyperlinks

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    table { border-collapse: collapse; color: #333; background-color: #F7F6F3; }
    table thead { font-weight: bold; background-color: #CCC; cursor: default; }
    table tbody tr:hover { background-color: #FFC; }
    td { border: solid 1px #CCC; padding: 0 1ex; }
    .even { color: #284775; background-color: White; }
    .left { text-align: left; }
    .right { text-align: right; }
    .add { color: green; }
    .minus { color: red; }
  </style>
</head>

<body>
  <div id="table"></div>
  <script>
    var table = d3.select("#table").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");
    thead.append("th").text("Title");
    thead.append("th").text("Data Change");

d3.csv("data.csv", function(error, data) {
      if (error) throw error;
      var tr = tbody.selectAll("tr")
      		.data(data)
      	.enter().append("tr")
      		.classed("even", function(d, i) { return i % 2 == 1; });
      tr.each(function(d) {
       	var self = d3.select(this);
        self.append("td")
        	.append("a")
        		.attr("href", d.URL)
        		.text(d.Title);
        self.append("td")
        	.html(d["Data Change"]);
      });
    });
  </script>
</body>

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