blur-experiment-1

_.md

[ Launch: path-experiment-1 ] 85f6416a6cdf1eb85d55 by jdutta
[ Launch: punch-card ] 73b802927c78657ce356 by jdutta
[ Launch: split-donut ] c2012b3b494c15cbc2a7 by jdutta
[ Launch: split-donut ] 80ed144d7ce9ebc365cb by jdutta

config.json

{"description":"blur-experiment-1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.csv":{"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/rUn1ian.gif"}

inlet.js

// Blur experiment (onion skin)


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  width: 500,
  height: 500
};

var svg = d3.select('svg');
var gRoot = svg.append('svg:g')
    //.attr('transform', 'translate(100, 100) scale(1)')
    //.style('shape-rendering', 'crispEdges')
    //.style('stroke', 'red')
    .style('stroke-width', '1')
    .style('fill', 'red')

var circle = gRoot.append('svg:circle')
  .classed('foo', true)
  .attr({
    cx: 50,
    cy: 50,
    r: 30
  })

svg.on('mousemove', function () {
    var m = d3.mouse(this);
    console.log('mouse', m);
    //*
    circle
    //.transition()
    .attr({
      cx: m[0],
      cy: m[1]
    });
    //*/
  gRoot.append('svg:circle')
    .attr({
      cx: m[0],
      cy: m[1],
      r: 30
    })
    .transition()
    .duration(500)
    .style({opacity: 0})
    .remove();
  });