arcs

_.md

[ Launch: Tributary inlet ] 10185213 by samzhang111

config.json

{"description":"arcs","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/1GyRVK4.png"}

inlet.js

// DATA --> these can be tweaked for fun

p1 = {
  x: 200,
  y: 300
};

p2 = {
  x: 600,
  y: 100
};

conflict_index = 5;

// functions

function get_scale(p1, p2) {
  var dist = Math.sqrt((p1.x-p2.x)*(p1.x-p2.x)+(p1.y-p2.y)*(p1.y-p2.y))/1.5;
  return d3.scale.linear().domain([-10, 10]).range([-1*dist, dist]);
}

function draw_arc(p1, p2, weight) {
  var slope = (p1.y-p2.y)/(p1.x-p2.x);
  var m = {
    x: (p1.x+p2.x)/2+weight*-slope,
    y: (p1.y + p2.y)/2+weight
  }
  //var str = "M p1.x p1.y Q m.x m.y p2.x p2.y";
  return "M " + p1.x + " " + p1.y + " Q " + m.x + " " + m.y + " " + p2.x + " " + p2.y;
}

// code

var scale = get_scale(p1, p2);
var weight = scale(conflict_index);

var pathstr = draw_arc(p1, p2, weight);

var svg = d3.select("svg");
var arc = svg.append("path")
.attr("d", pathstr)
.attr("stroke", "black")
.attr("fill", "none")
.attr("stroke-width", 4.48);