Line drawing practice

_.md

[ Launch: Tributary inlet ] 6130176 by tarvaina

config.json

{"description":"Line drawing practice","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/YlWyn75.png"}

inlet.js

var data = [];

var line = d3.svg.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

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

var pathText = svg.append("text")
  .text("Click to draw a line!")
  .attr({ x: 10, y: 30 });

var tx = 10;
var ty = 10;

var group = svg.append("g").attr("transform", "translate(" + [tx, ty] + ")");

var path = group.selectAll("path")
  .data([data])
  .enter()
  .append("path")
  .attr({
    d: line,
    fill: "none",
    stroke: "#FF0000"
  });

svg.on("click", function() {
  coord = d3.mouse(this);
  data.push({x: coord[0] - tx, y: coord[1] - ty});
  path.attr("d", line);
  pathText.text(line(data));
});