iris demo

simple csv demo

for the building-blocks intro video

<!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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/datalib/1.6.3/datalib.min.js