Skip to content

Instantly share code, notes, and snippets.

@jfreels
Last active May 4, 2024 14:12
Show Gist options
  • Save jfreels/6814721 to your computer and use it in GitHub Desktop.
Save jfreels/6814721 to your computer and use it in GitHub Desktop.
d3js: Create a table using data from a CSV file.

d3js: Create a table using data from a CSV file.

variable aror asd maxdd
Convertible Arbitrage 0.0770203710991655 0.0694461870173684 -0.292688394529575
CTA Global 0.0767109922711062 0.0870559916457339 -0.11676813742079
Distressed Securities 0.0975096216543971 0.0635590261337229 -0.229232535454022
Emerging Markets 0.0936124939942315 0.133615370977481 -0.359789528051813
Equity Market Neutral 0.0739359541312794 0.031197069331753 -0.110823378150652
Event Driven 0.093190424075422 0.0635679064016912 -0.200817391305532
Fixed Income Arbitrage 0.0506750901161104 0.0490908049045477 -0.178792725850406
Global Macro 0.0942083012167199 0.0589577044136273 -0.0792292782044611
Long Short Equity 0.0940147333764296 0.0768123568274029 -0.218197216318131
Merger Arbitrage 0.0837211944713991 0.0386880290509073 -0.0563420437745007
Relative Value 0.0823165777302135 0.0457077150038685 -0.159407479811612
Short Selling 0.0326542894911763 0.190869128421505 -0.495619599274476
Funds of Funds 0.0712702593390044 0.0630880736754868 -0.20591447069347
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<script type='text/javascript' src='script.js'></script>
</body>
</html>
var tabulate = function (data,columns) {
var table = d3.select('body').append('table')
var thead = table.append('thead')
var tbody = table.append('tbody')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) { return d })
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr')
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function (column) {
return { column: column, value: row[column] }
})
})
.enter()
.append('td')
.text(function (d) { return d.value })
return table;
}
d3.csv('data.csv',function (data) {
var columns = ['variable','aror','asd','maxdd']
tabulate(data,columns)
})
@st4rck19981
Copy link

How would the code be for a scrolling table, for large tables.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment