Create a reusable table using d3 and jquery DataTables

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.

<!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">
  <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.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