Skip to content

Instantly share code, notes, and snippets.

@seemantk

seemantk/README.md

Last active May 3, 2020 02:19
Show Gist options
  • Save seemantk/3368f8c9b3d896965879 to your computer and use it in GitHub Desktop.
Save seemantk/3368f8c9b3d896965879 to your computer and use it in GitHub Desktop.
Download ZIP
Table with hyperlinks
Raw
README.md
Raw
data.csv
Title URL Data Change
A http://localhost/A.html 1
B http://localhost/B.html -2
C http://localhost/C.html 0
D http://localhost/D.html 12
E http://localhost/E.html -9
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment