kai's mustache

_.md

[ Launch: kai's mustache ] 78f1e269437f52a0b6c4 by enjalot

config.json

{"description":"kai's mustache","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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/MNnPpFq.png"}

inlet.js

// trying to modify http://bl.ocks.org/syntagmatic/4164283223f19e260b41
var width = tributary.sw;
var height = tributary.sh;

var area = d3.svg.area()
    .x(function(d) { return d.x; })
    .x0(function(d) { return d.x0; })
    .y0(function(d) { return d.y0; })
    .y1(function(d) { return d.y1; })
    .interpolate("cardinal")
    .tension(0.5);

var link = {
  start: [100,200],
  end: [500,350],
  width: 24,
  offset: -50
};

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

var path = svg.append("path")
    .datum(toArc(link))
    .attr("class", "area")
    .attr("d", area);

svg.append("circle")
  .attr("cx", link.start[0])
  .attr("cy", link.start[1])
  .attr("r", 3)
  .call(d3.behavior.drag()
    .on("drag", function() {
      link.start = [d3.event.x, d3.event.y];
      d3.select(this)
        .attr("cx", link.start[0])
        .attr("cy", link.start[1]);
      path.datum(toArc(link))
        .attr("d", area);
    })
  );

svg.append("circle")
  .attr("cx", link.end[0])
  .attr("cy", link.end[1])
  .attr("r", 3)
  .call(d3.behavior.drag()
    .on("drag", function() {
      link.end = [d3.event.x, d3.event.y];
      d3.select(this)
        .attr("cx", link.end[0])
        .attr("cy", link.end[1]);
      path.datum(toArc(link))
        .attr("d", area);
    })
  );

d3.select("#tension")
  .on("input", function() {
    area.tension(+this.value)
    d3.select("#tension-val").text(this.value);
    path.attr("d", area);
  });

d3.select("#width")
  .on("input", function() {
    link.width = +this.value;
    d3.select("#width-val").text(this.value);
    path.datum(toArc(link))
      .attr("d", area);
  });

d3.select("#offset")
  .on("input", function() {
    link.offset = +this.value;
    d3.select("#offset-val").text(this.value);
    path.datum(toArc(link))
      .attr("d", area);
  });

function toArc(d) {
  var midy = (d.start[1]+d.end[1])/2 + d.offset;
  var slope = {x: d.end[0] - d.start[0], y: d.end[1] - d.start[1] }
  slope = normalize(slope);
  var offset = rotate2d(slope, 90)
  offset.x *= d.width/2;
  offset.y *= d.width/2
  //var offset = {x: d.width/2, y: -d.width/2}
  
  return [{
    x: d.start[0],
    x0: d.start[0],
    y0: d.start[1],
    y1: d.start[1],
  },
  {
    x: (d.start[0]+d.end[0])/2,
    x0: (d.start[0]+d.end[0])/2,
    y0: (d.start[1]+d.end[1])/2+d.offset + offset.x,
    y1: (d.start[1]+d.end[1])/2+d.offset + offset.y,
  }
  ,
  {
    x: d.end[0],
    x0: d.end[0],
    y0: d.end[1],
    y1: d.end[1],
  }];
};

function rotate2d(vector, angle) {
  //rotate a vector 
  angle *= Math.PI/180; //convert to radians
  return {
    x: vector.x * Math.cos(angle) - vector.y * Math.sin(angle),
    y: vector.x * Math.sin(angle) + vector.y * Math.cos(angle)
  }
}

function normalize(vector) {
  var magnitude = Math.sqrt(vector.x*vector.x + vector.y*vector.y);
  return {x: vector.x / magnitude, y: vector.y / magnitude}
}

style.css

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area {
  fill: #555;
  pointer-events: none;
}

circle {
  fill: orange;
  stroke: none;
  opacity: 0.3;
}

circle:hover {
  fill: orange;
  stroke: orange;
  stroke-width: 12;
  opacity: 1;
}