D3 Examples - iris demo

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datalib/1.6.3/datalib.min.js"></script>
</head>
​
<body>
​
  <script>
    var quantileBands = d3.range(10).map(function(d) {
      return 1 / 9 * d
    })
    
    console.log(quantileBands)
    
    d3.csv("iris.csv", function(err, data) {
      var featureKeys = d3.keys(data[0])
​
      featureKeys.splice(featureKeys.indexOf('class'), 1)
      var classKeys = dl.unique(data, function(d) { return d['class'] })
      
      var features = featureKeys.map(function(key) {
        var accessor = function(d) { return d[key] }
        
        var mean = dl.mean(data, accessor)
        var sd = dl.stdev(data, accessor)
        
        var scale = d3.scale.linear()
            .domain([mean, mean + 2 * sd])
            .range([180, 240])
        
        var classes = d3.nest()
            .key(function(d) {
            return d['class']
          })
            .rollup(function(v) {
            var valueByFeature = v.map(accessor).sort()
            
            return quantileBands.map(function(b) {
              return dl.quantile(valueByFeature, b)
            })
          })
            .entries(data)
        
        return {
          key: key,
          mean: mean,
          sd: sd,
          scale: scale,
          classes: classes
        }
      })
      
      console.log(features)
      
      
      
      var width = 960;
      var height = 500;
      var svg = d3.select("body").append("svg")
      .attr({width: width, height: height })
      
      var classes = classKeys.map(function(classKey) {
        return featureKeys.map(function(featureKey) {
          var featureForClass = features.find(function(f) {
            return f.key === featureKey
          })
          
          var values = featureForClass.classes.find(function(c) {
            return c.key === classKey
          })
          
          return values.values
        })
      })
      
      var bands = classes.map(function(irisType) {
        return d3.transpose(irisType)
      })
      
      console.log(bands)
      
      var b = bands[0]
      
      var lines = svg.selectAll('path')
        .data(b)
      
      lines.enter()
        .append('path')
        .attr({
            'fill': 'none',
                    'stroke': '#999',
            'stroke-width': 1
        })
      
      lines
        .attr('d', function(band) {
            var points = band.map(function(featureValue, i) {
                        var x = (i + 1) * 40
            var y = features[i].scale(featureValue)
            
            return x + ',' + y
          });
        
            return 'M' + points.join('L')
        })
      
      /*
      var f = features[0]
      var c = f.classes[0]
      var dots = svg.selectAll('circle')
        .data(c.values)
      
      dots.enter()
        .append('circle')
      
      dots
        .attr({
                    r: 2,
            fill: '#999',
            cx: 200,
        })
        .attr('cy', f.scale)
      */
      
​
    })
  </script>
</body>
​
​
​
    