scatterdice js

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: Helvetica;
  font-size: 10px;
}
.point {
  fill: black;
}

rect, circle, line {
  fill: none;
  stroke: black;
  stroke-width: 1;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script src="https://romsson.github.io/d3-gridding/example/utils/utils.js"></script>
<script src="https://romsson.github.io/d3-gridding/example/utils/layouts.js"></script>  
<script>

var width = 800,
    height = 600;

var data = layouts[8].values;

var dataMarginal = d3.range(1000).map(d3.randomBates(10));

var x = d3.scaleLinear()
    .rangeRound([0, width]);

var bins = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(10))
    (dataMarginal);

//bins.forEach(function(d) {
//
//  var e = {};
//  e.value = d.length;
//  e.index = "3";
//  data.push(e);
//
//})

//bins.forEach(function(d) {
//
//  var e = {};
//  e.value = d.length;
//  e.index = "2";
//  data.push(e);
//
//})

// MATRIX
d3.range(60).map(function(d) {
  d3.range(100).map(function(f, i) {
    var e = {};
    e.value = f.length;
    e.index = "2";
    e.index2 = "2_" + (i+1);
    data.push(e);
  });
});

// SCATTERPLOT
d3.range(250).map(function(d) {
  var e = {};
  e.value = d.length;
  e.index = "3";
  e.__width = 20;
  e.__height = 20;
  e.index2 = "undefined";
  data.push(e);
});

// HISTORY
d3.range(5).map(function(d) {
  var e = {};
  e.value = d.length;
  e.index = "4";
  e.index2 = "undefined";
  data.push(e);
});

var svgSquares = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g");

function update() {

nested_data = generate_nesting_agg([
    {groupBy: "", fn: function(d) { return d.length}, accessor: function(d) { return d; }},
    {groupBy: "index", fn: function(d) { return d.length}},
    {groupBy: "index2", fn: function(d) { return d.length}}
  ], "data");

draw(svgSquares, nested_data[0], params, 0, "0_");

d3.selectAll(".index").remove();
  // Get all the rects and create groups?

}

update();

</script>

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

Modified http://romsson.github.io/d3-gridding/build/d3-gridding.js to a secure url

https://d3js.org/d3.v4.js

https://romsson.github.io/d3-gridding/build/d3-gridding.js

https://romsson.github.io/d3-gridding/example/utils/utils.js

https://romsson.github.io/d3-gridding/example/utils/layouts.js