d3js Table With Search

This is an exmaple of resuable components using d3. They are described as 'closures (i.e. functions) with setters and getters'. In this example, _table is the closure.

To make the component responsive, we add a dispatcher which broadcasts events happening inside the component to all listeners. In this example, a div listens to highlight and select events from the table, and changes its text accordingly.

Notice that I didn't assume anything about the data other that its structure. Also, I didn't hardcode any data-specific attributes.

forked from ahmohamed's block: Create a reusable table using d3 and jquery DataTables

<!DOCTYPE html>
<meta charset="utf-8">
<title>Create a reusable table using d3 and jquery DataTables</title>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
   <link rel="stylesheet" type="text/css" href="materialize.css">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script>
  <script src="gene_data.js"></script>
  <script src="makeTable.js"></script>
</head>
<body>
  <div id='highlighted'>Nothing Highlighted</div>
  <div id='selected'>Nothing Selected</div>
  <div id='container'></div>

d3.csv("records.csv")
    .row(function(d) { return {key: d.key, value: +d.value}; })
    .get(function(error, rows) {
      console.log(rows);
      myData = rows;// Now you can assign it
      myDataIsReady()// Now you can draw it
    });
  
var table_plot = makeTable()
  .datum(myData)
	.datum(gene_data)
  .sortBy('pval', true)
  .filterCols(['col', 'x', 'y']);

d3.select('#container').call(table_plot);

table_plot.on('highlight', function(data, on_off){
  if(on_off){//if the data is highlighted
    d3.select('#highlighted').text(
      'Oops, I just stepped over gene ' + data.symb
    );
  }
});
table_plot.on('select', function(data, on_off){
  if(on_off){//if the data is highlighted
    d3.select('#selected').text(
      'And it was the chosen one ' + data.GeneID
    );
  }
});
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js to a secure url

Updated missing url https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js to https://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js