Old school D3 from simpler times

All examples By author By category About

jwildfire

Full window Github gist

Hexbin with linked table

This chart demonstrates hexagonal binning with a linked table for a 5,000 record flow cytometry data set. Click a hex to see the underlying data.

Created using webcharts, webcharts-wrapper-boilerplate and the d3.js hexbin plugin. Also includes optional data tables integration.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">  
  <link rel="stylesheet" href="webchartsHexbin.css">

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.datatables.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.6.1.js"></script>
  <script src="webchartsHexbin.js"></script>

</head>
<body>
</body>

<script>
  var div = 'body';
  var settings = {
    width:400,
     margin:{top:20},
     x_var:"FSC.A",
     y_var:"SSC.A",
     data_table:true
  };

var dataFile = "sampleFlow.csv";
  d3.csv(dataFile, function (data){
    webchartsHexbin(div, settings).init(data);
  });
</script>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">  
  <link rel="stylesheet" href="webchartsHexbin.css">
​
​
  <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.datatables.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.6.1.js"></script>
  <script src="webchartsHexbin.js"></script>
​
</head>
<body>
</body>
​
<script>
  var div = 'body';
  var settings = {
    width:400,
     margin:{top:20},
     x_var:"FSC.A",
     y_var:"SSC.A",
     data_table:true
  };
​
  var dataFile = "sampleFlow.csv";
  d3.csv(dataFile, function (data){
    webchartsHexbin(div, settings).init(data);
  });
</script>
</html>
​
    

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

https://code.jquery.com/jquery-2.2.4.min.js

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

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

https://graphics.rhoworld.com/src/webcharts/webcharts.v1.6.1.js