UGHH

_.md

[ Launch: UGHH ] 6d068bfa2d5e1f5b03c2 by gelicia

config.json

{"description":"UGHH","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/njuhqvD.png"}

inlet.js

//modfied from https://gist.github.com/dholth/1368205

var svg = d3.select("svg");
 
var defs = svg.append('defs');
 
defs.append('svg:linearGradient')
  .attr('gradientUnits', 'userSpaceOnUse')
  .attr('x1', 0).attr('y1', 0).attr('x2', 85).attr('y2', 23)
  .attr('id', 'master').call(
      function(gradient) {
        gradient.append('svg:stop').attr('offset', '0%').attr('style', 'stop-color:rgb(0,229,91);stop-opacity:1');
        gradient.append('svg:stop').attr('offset', '100%').attr('style', 'stop-color:rgb(0,229,91);stop-opacity:0');
      });
 
var data = [[17, 30], [50, 60], [20, 180], [20, 70], [23, 42], [52, 64]];
 
defs.selectAll('.gradient').data(data)
  .enter().append('svg:linearGradient')
  .attr('id', function(d, i) { return 'gradient' + i; })
  .attr('class', 'gradient')
  .attr('xlink:href', '#master')
  .attr('gradientTransform', function(d) { return 'translate(' + d[1] + ')'; });
 
svg.selectAll('rect').data(data)
  .enter().append('svg:rect')
  .attr('fill', function(d, i) { return 'url(#gradient' + i + ')'; })
  .attr('x', 0)
  .attr('y', function(d, i) { return (i+1) * 20; })
.attr("height", function(d){return 20;})
.attr("width", function(d){return 250;});