I removed the top two lines, which were causing a parser error due to the missed ) in d3.csv("E2allProcEff.csv".then and the redundant loading of data by two different methods:
d3.csv("E2allProcEff.csv".then(function(data) { d3.tsv(tsv, type).then(function(data) {and the sets of braces/parentheses at the bottom that go with them. When I created some data objects, the table displays fine:
var data = ['Blues','Greens','Greys','Purples','Reds','Oranges'].map( s => { var obj = { colours: s }; d3['scheme'+ s ][5].forEach( (c,i) => obj['position_'+ i] = c ) return obj} )var sortAscending = true;var table = d3.select('#page-wrap').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; });* { margin: 0; padding: 0; } body { font: 14px/1.4 Georgia, Serif; }#page-wrap { margin: 50px;}p { margin: 20px 0; }/* Generic Styling, for Desktops/Laptops */table { width: 100%; border-collapse: collapse; }/* Zebra striping */tr:nth-of-type(odd) { background: #eee; }th { background: #333; color: white; font-weight: bold; cursor: s-resize; background-repeat: no-repeat; background-position: 3% center;}td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }th.des:after { content: "\21E9";}th.aes:after { content: "\21E7";}/* Max width before this PARTICULAR table gets nastyThis query will take effect for any screen smaller than 760pxand also iPads specifically.*/@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:before { content: attr(data-th) ": "; font-weight: bold; width: 6.5em; display: inline-block; }}/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 480px) { body { padding: 0; margin: 0; width: 320px; } }/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { width: 495px; }}<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script><div id="page-wrap"></div>You just need to add in the code that loads your csv data, and you're done:
d3.csv("E2allProcEff.csv").then( function(data) { var sortAscending = true; var table = d3.select('#page-wrap').append('table'); var titles = d3.keys(data[0]); [... snip ...] 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; });})