Old school D3 from simpler times

All examples By author By category About

nlubock

Full window Github gist

dc.js test

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
  <script src="https://unpkg.com/d3@5/dist/d3.js"></script>
  <script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
  <script src="https://unpkg.com/dc@3/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
  
</head>

<body>
  This is a test
  <div id="test"></div>
  
  <script>
    var scatter = dc.scatterPlot("#test");
    
    d3.csv("tsne.csv").then(function(data) {
      data.forEach(d => {
    		d.X = +d.X
    		d.Y = +d.Y
    		d.Pos = +d.Pos
        //d.Norm = +d.Norm
        //d.Condition = +d.Condition
  		})
      
    	var ndx = crossfilter(data);
      //var tsne_dim = ndx.dimension(d => [+d.X, +d.Y]);
      var tsne_dim = ndx.dimension(function(d){return [+d.X, +d.Y];});
      var dim1 = ndx.dimension(function (d) {
        return [+d.X, +d.Y];
      });
      var group = dim1.group();
      //tsne.filter(0)
      var tsne_group = tsne_dim.group();
      
      scatter
        .width(380)
        .height(200)
        .symbolSize(8)
      	.x(d3.scaleLinear().domain([0, 20]))
        .dimension(dim1)
  			.group(group);
      
      scatter.render();
    
    });
    
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
  <script src="https://unpkg.com/d3@5/dist/d3.js"></script>
  <script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
  <script src="https://unpkg.com/dc@3/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
  
</head>
​
<body>
  This is a test
  <div id="test"></div>
  
  <script>
    var scatter = dc.scatterPlot("#test");
    
    d3.csv("tsne.csv").then(function(data) {
      data.forEach(d => {
            d.X = +d.X
            d.Y = +d.Y
            d.Pos = +d.Pos
        //d.Norm = +d.Norm
        //d.Condition = +d.Condition
        })
      
        var ndx = crossfilter(data);
      //var tsne_dim = ndx.dimension(d => [+d.X, +d.Y]);
      var tsne_dim = ndx.dimension(function(d){return [+d.X, +d.Y];});
      var dim1 = ndx.dimension(function (d) {
        return [+d.X, +d.Y];
      });
      var group = dim1.group();
      //tsne.filter(0)
      var tsne_group = tsne_dim.group();
      
      scatter
        .width(380)
        .height(200)
        .symbolSize(8)
        .x(d3.scaleLinear().domain([0, 20]))
        .dimension(dim1)
            .group(group);
      
      scatter.render();
    
    });
    
  </script>
</body>
​
    

Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js

https://unpkg.com/d3@5/dist/d3.js

https://unpkg.com/crossfilter2@1.4/crossfilter.js

https://unpkg.com/dc@3/dc.js

https://rawgit.com/crossfilter/reductio/master/reductio.js

https://npmcdn.com/universe@latest/universe.js