Skip to content

Instantly share code, notes, and snippets.

@franklinbaldo

franklinbaldo/data.csv

Forked from seemantk/README.md
Last active May 3, 2020 04:43
Show Gist options
  • Save franklinbaldo/4ae15a1a0a89fdc63350a1527b3d9bea to your computer and use it in GitHub Desktop.
Save franklinbaldo/4ae15a1a0a89fdc63350a1527b3d9bea to your computer and use it in GitHub Desktop.
Download ZIP
Table with hyperlinks
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>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div id="table" class="table ></div>"
<script>
d3.csv("data.csv", function(error, data) {
if (error) throw error;
var sortAscending = true;
var table = d3.select('#table').append('table');
var titles = d3.keys(data[0]);
var headers = table.append('thead').append('tr')
.selectAll('th')
.data(titles).enter()
.append('th')
.text(function (d) {
return d;
})
.on('click', function (d) {
headers.attr('class', 'header');
if (sortAscending) {
rows.sort(function(a, b) { return b[d] < a[d]; });
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) { return b[d] > a[d]; });
sortAscending = true;
this.className = 'des';
}
});
var rows = table.append('tbody').selectAll('tr')
.data(data).enter()
.append('tr');
rows.selectAll('td')
.data(function (d) {
return titles.map(function (k) {
return { 'value': d[k], 'name': k};
});
}).enter()
.append('td')
.attr('data-th', function (d) {
return d.name;
})
.text(function (d) {
return d.value;
});
});
/*
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