Drawing example

_.md

[ Launch: Drawing example ] 6156608 by tarvaina

config.json

{"description":"Drawing example","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/sJfxryP.png"}

inlet.js

var colors = [
  "#FF0000",
  "#00FF00",
  "#0000FF"
];

var sizes = [
  [{ size: 5 }],
  [{ size: 20 }],
  [{ size: 50 }]
];


var stack = d3.layout.stack()
  .y(function(d) { return d.size; })
  .out(function(d, size0, size) { d.size = size; d.size0 = size0; });

stack(sizes);
console.log(sizes);


var svg = d3.select('svg');

var canvas = svg.append('rect')
  .attr({
    x: 20,
    y: 20,
    width: 360,
    height: 360,
    fill: "#000000"
  });

var circle = svg.append('circle')
  .attr({
    cx: 50,
    cy: 50,
    r: 10,
    stroke: "#none",
    fill: "#FF0000"
  });

canvas.on('click', function() {
  var pos = d3.mouse(this);
  circle.attr({
    cx: pos[0],
    cy: pos[1]
  });
});

var colorBars = svg.selectAll('#color-bar')
  .data(colors).enter()
  .append('rect')
  .classed('color-bar', true)
  .attr({
    x: function(d, i) { return 400 + 20*i; },
    y: 20,
    width: 20,
    height: 20,
    fill: function(d, i) { return d; }
  }).on('click', function(d, i) {
    circle.attr({
      fill: d
    });
  });

var sizeCircles = svg.selectAll('#size-circles')
  .data(sizes).enter()
  .append('circle')
  .classed('size-circles', true)
  .attr({
    cx: function(d, i) { return 405 + 10 * i + 2 * d[0].size0 + d[0].size; },
    cy: 70,
    r: function(d) { return d[0].size; }
  }).on('click', function(d, i) {
    circle.attr({
      r: d[0].size
    });
  });