D3 Examples

3D SPLOM

Note that this example requires WebGL.

In my previous gist, I had stated how easy it would be to display 3 dimensional scatterplot matrices; simply a matter of framing the data a bit differently and plugging in a WebGL 3d Scatterplot.

After 4 days of working this "easy" problem, I have a working solution.

I had to modify the elegans library to be a bit more reusable and is included within this gist.

I also ran into issues with my original idea of showing all permutations of the iris dataset. This would have resulted in 64 3d models. Apparently 16 is the limit and my computer almost blew up trying to accomplish the original task.

So I framed the data via unique combinations instead and settled for 4 distinct 3d models.

Specific Points of Interest

Framing

The original data is stored in a csv structured like this

sepal_length,sepal_width,petal_length,petal_width,species 5.1,3.5,1.4,0.2,setosa 4.9,3,1.4,0.2,setosa 4.7,3.2,1.3,0.2,setosa ...

The following code creates frames based upon all the distinct combinations of 3 columns at a time (other than species which is left alone and passed as is for grouping, legends and series coloring).

var gi = dex.csv.getColumnNumber(iris, "species"); var frames = dex.csv.getCombinationFrames(iris, 3, gi);

Each frame is fed into its own independent 3-dimensional scatterplot and laid out in 3d space.

References

dex.js The main site

forked from Saminu's block: 3D

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }
​
    .Plot {
        display: inline;
        float: left;
    }
​
    #legend {
        position: relative;
        margin-top: 200px;
    }
</style>
​
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="elegans_modified.js"></script>
<script src="https://dexjs.net/js/dex.min.js"></script>
​
<body>
<script>
​
  // Read in iris data
  d3.csv("iris.csv", function (error, data) {
​
    // Convert to dex-csv form
    var iris = {};
    iris.header = Object.keys(data[0]);
    iris.data = data.slice(1).map(function (row) {
      return iris.header.map(function (h) {
        return row[h];
      });
    });
​
    // Divy up the dataset into SPLOM frames.  Skip the species
    // column because we'll be using that for coloring.
    var gi = dex.csv.getColumnNumber(iris, "species");
    var frames = dex.csv.getCombinationFrames(iris, 3, gi);
​
    // Create our color scheme
    var colorScheme = d3.scale.category10();
​
    // Iterate over each SPLOM3D frame:
    frames.frames.forEach(function (frame, i) {
      // Create a gridster panel for each of our frames.
      d3.select("body")
        .append("div")
        .attr("id", "Plot" + i)
        .attr("class", "Plot");
​
      var series = [
        {
          'coordinates': {
            'x': frame.header[1],
            'y': frame.header[2],
            'z': frame.header[3]
          },
          'group': frame.header[0],
          'shape': 'circle',
          'size': 1
        }];
​
      var scatterplot = dex.charts.elegans.ScatterPlot({
          'parent': '#Plot' + i,
          'color': d3.scale.category10(),
          'csv': frame,
          'series': series,
          'stage.space.axis.labels.x': frame.header[1],
          'stage.space.axis.labels.y': frame.header[2],
          'stage.space.axis.labels.z': frame.header[3],
          'stage.height': 500,
          'stage.width': 500,
          'stage.space.width': 460,
          'stage.space.height': 460,
          'stage.space.axis.labelOptions.width': 400,
          'stage.space.axis.labelOptions.height': 400,
          'stage.space.axis.labelOptions.scale': 10,
          'stage.space.axis.labelOptions.fill': "rgb(255,0,0)",
          'stage.orbit': true,
          'stage.perspective': true,
          'stage.grid': false
        }
      ).render();
    });
  });
</script>
</body>
    