Skip to content

Instantly share code, notes, and snippets.

@cool-Blue

cool-Blue/data.csv

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cool-Blue/0a6ac52bb2e3f9feeaaa to your computer and use it in GitHub Desktop.
Save cool-Blue/0a6ac52bb2e3f9feeaaa to your computer and use it in GitHub Desktop.
Download ZIP
build table from csv
Raw
data.csv
country 2004 2008 2012
eu 28 none 11.1 12.8
eu 28 one language 35.7 36.6
eu 28 two languages 53.1 50.6
eu 27 none 8.3 11.2 12.9
eu 27 one language 54.7 35.9 36.7
eu 27 two languages 52.9 50.3
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
white-space: pre;
}
td, th {
outline: 1px solid white;
background-color: #ccc;
}
th {
text-align: left;
}
td:not(:first-child) {
text-align: right;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!--<script src="d3 CB.js"></script>-->
<script>
d3.text("data.csv", function (text) {
var csv = d3.csv.parse(text), allheaders = d3.csv.parseRows(text)[0],
table = d3.select("body").append("table");
table.append("thead")
.append("tr").selectAll("th")
.data(allheaders).enter()
.append("th")
.text(function(d){return d});
table.append("tbody").datum(csv)
.selectAll("tr")
.data(function(d){
return d
})
.enter().append("tr")
.selectAll("td")
.data(function(row){
return allheaders.map(function(h) { return row[h]})
}).enter().append("td")
.text(function(d) {
return d
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment