koopa

_.md

[ Launch: koopa ] 5833476 by enjalot

config.json

{"description":"koopa","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/3TIL9U4.png"}

inlet.js

var xScaler = d3.scale.ordinal()
.range([0, 300])
var yScaler = d3.scale.linear()
.domain([0, 40])
.range([0, 300])

// Build the area chart
      var area = d3.svg.area()
          .x(function (d, i) { return xScaler(d.title) })
          .y0(this.height)
          .y1(function (d) { return yScaler(d.value) })
 
      // Build the line chart
      var line = d3.svg.line()
        .x(function (d, i) {  
          console.log("HI", xScaler(d.title))
          return xScaler(d.title) })//console.log(largestSet[i]);
        .y(function (d, i, foo) {
          return yScaler(d.value)
        })
 
    var draw = function (selection) {
      selection.each(function (data) {
        var dgroup = d3.select(this).selectAll('.data-group').data(data)
 
        dgroup.enter().append('g')
            .attr('class', function(d, i) {
                return 'data-group data-group-' + i;
            });
 
        var plot = dgroup.selectAll('path')
        .data(function (d) { return [d] })
        
        plot.enter()
          .append('path')
          .attr('class', 'area')
          
        plot.attr('d', function(d) { console.log("D", d);return line(d.datapoints); })
 
      })
 
      return draw
    }
 
    draw.area = function (a) {
      if (!arguments.length) { return area }
      area = a
      return draw
    }
 
    draw.line = function (l) {
      if (!arguments.length) { return line }
      line = l
      return draw
    }
 
    draw.fill = function (f) {
      if (!arguments.length) { return fill }
      fill = f
      return draw
    }
 
    // Add the SVG, which is a D3 object
    var svg = d3.select('svg')
      .append('g')
      .attr('class', 'line-chart-group')
 
 
    var data = [{"datapoints":[{"value":12,"title":"2008"},{"value":2,"title":"2009"},{"value":27.9,"title":"2011"},{"value":45,"title":"2012"}],"title":"X-Cola!"},{"datapoints":[{"value":18.4,"title":"2008"},{"value":20.1,"title":"2009"},{"value":24.8,"title":"2010"},{"value":26.1,"title":"2011"},{"value":29,"title":"2012"}],"title":"Y-Cola"}]
      , container = svg.data([data])
 
    // Add the datasets
    draw.area(area)
    draw.line(line)
    container.call(draw)