Skip to content

Instantly share code, notes, and snippets.

@CBasis

CBasis/.block

Created January 7, 2018 19:33
Show Gist options
  • Save CBasis/2affbe428237e7a4bcac7e319fbe7284 to your computer and use it in GitHub Desktop.
Save CBasis/2affbe428237e7a4bcac7e319fbe7284 to your computer and use it in GitHub Desktop.
Download ZIP
d3js: Create a table using data from a CSV file.
Raw
.block
license: mit
Raw
README.md
Raw
data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 2 columns, instead of 1. in line 1.
id,value
flare
flare.$VTHOSTNAME
flare.$VTHOSTNAME.VS0
flare.$VTHOSTNAME.VS0.DATA
flare.$VTHOSTNAME.VS0.DATA.SYSTEMDB,4096
flare.$VTHOSTNAME.VS0.LOG,4096
flare.$VTHOSTNAME.VS0.LOG.DB_ES1,4096
flare.$VTHOSTNAME.VS0.LOG.SYSTEMDB,4096
flare.VS0
flare.VS0.config_files
flare.VS0.config_files.COUNT_0,4096
flare.VS0.config_files.COUNT_0.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_0.global,5515
flare.VS0.config_files.COUNT_1,4096
flare.VS0.config_files.COUNT_1.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_1.global,5515
flare.VS0.config_files.COUNT_2,4096
flare.VS0.config_files.COUNT_2.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_2.global,5515
flare.VS0.config_files.COUNT_3,4096
flare.VS0.config_files.COUNT_3.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_3.global,5515
flare.VS0.config_files.COUNT_4,4096
flare.VS0.config_files.COUNT_4.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_4.global,5515
flare.VS0.config_files.COUNT_5,4096
flare.VS0.config_files.COUNT_5.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_5.global,5515
flare.VS0.config_files.COUNT_6,4096
flare.VS0.config_files.COUNT_6.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_6.global,5515
flare.VS0.config_files.COUNT_7,4096
flare.VS0.config_files.COUNT_7.dfvvesvs0hd00,5646
flare.VS0.config_files.COUNT_7.global,5515
flare.VS0.config_files.COUNT_9,4096
flare.VS0.config_files.COUNT_9.dfvvesvs0hd00,5329
flare.VS0.config_files.COUNT_9.global,5515
flare.VS0.config_files.Fri
flare.VS0.config_files.Fri.dfvvesvs0hd00,5329
flare.VS0.config_files.Fri.global,5515
flare.VS0.config_files.Tue
flare.VS0.config_files.Tue.dfvvesvs0hd00,5329
flare.VS0.config_files.Tue.global,5515
flare.VS0.data
flare.VS0.data.DB_EN0,4096
flare.VS0.data.DB_ES0,934097145856
flare.VS0.data.DB_ES1,113590620160
flare.VS0.data.DB_ES1.DB_ES1,4096
flare.VS0.data.SYSTEMDB,66648190976
flare.VS0.log
flare.VS0.log.DB_ES0,127421808640
flare.VS0.log.DB_ES0,127421808640
flare.VS0.log.DB_ES1,41320476672
flare.VS0.log.DB_ES1,41320476672
flare.VS0.log.SYSTEMDB,29750636544
flare.VS0.log.SYSTEMDB.newer,94208
flare.VS0.log.SYSTEMDB.newer,94208
flare.WS0
flare.WS0.config_files,4096
flare.WS0.data
flare.WS0.data.DB_FN0,4096
flare.WS0.data.DB_FS0,49291956224
flare.WS0.data.DB_FS1,14395346944
flare.WS0.data.DB_WS0,4096
flare.WS0.data.SYSTEMDB,5369049088
flare.WS0.log
flare.WS0.log.DB_FS0,399214690304
flare.WS0.log.DB_FS1,292114722816
flare.WS0.log.SYSTEMDB,1052390526976
flare.XS0
flare.XS0.config_files,4096
flare.XS0.data
flare.XS0.data.DB_KN0,19059085312
flare.XS0.data.DB_KS0,36457058304
flare.XS0.data.DB_KS1,6056742912
flare.XS0.data.SYSTEMDB,6157410304
flare.XS0.log
flare.XS0.log.DB_KN0,22690299904
flare.XS0.log.DB_KS0,26873028608
flare.XS0.log.DB_KS1,17937993728
flare.XS0.log.SYSTEMDB,32914739200
flare.ZS0
flare.ZS0.config_files,4096
flare.ZS0.data
flare.ZS0.data.DB_PS0,51271340032
flare.ZS0.data.DB_PS1,6392287232
flare.ZS0.data.DB_ZS0,4096
flare.ZS0.data.SYSTEMDB,6241296384
flare.ZS0.log
flare.ZS0.log.DB_PS0,655249408
flare.ZS0.log.DB_PS1,834719744
flare.ZS0.log.SYSTEMDB,667246592
Raw
index.html
<!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>
Raw
script.js
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 = ['id','value','asd','maxdd']
tabulate(data,columns)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment