reftrips

_.md

[ Launch: reftrips ] 8651099 by hanbzu

config.json

{"description":"reftrips","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"}],"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},"timetable.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"inline-console":true,"thumbnail":"http://i.imgur.com/wQdITt7.gif"}

inlet.js

var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = tributary.sw - margin.left - margin.right,
    height = tributary.sh - margin.top - margin.bottom

var x = d3.scale.linear()
  .domain([0, 50])
  .range([0, width])

var y = d3.scale.linear()
  .domain([0, 50])
  .range([0, height])

var xAxis = d3.svg.axis().scale(x)
var yAxis = d3.svg.axis().scale(y)

var svg = d3.select("svg")
    .attr("width",width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("y", - margin.top)
    .attr("width", width)
    .attr("height", height + margin.top + margin.bottom)

function findValue(value, where, old) {
  function linearInterpolation(from, to, value) {
    var x1 = from[0], x2 = to[0], y1 = from[1], y2 = to[1]
    var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1
    return m * value + b
  }
  if (where.length === 0) return undefined
  var head = where[0]
  if (head[0] == value) return { found: head[1], rest: where }
  else if (head[0] > value) return { found: linearInterpolation(old, head, value), rest: [old].concat(where) }
  return findValue(value, where.slice(1), head)
}

function normalise(theTrip, ref) {
  function scale(trip, refTrip, newTrip) {
    newTrip = newTrip || []
    if (trip.length === 0) return newTrip
    var head = trip[0],
        lookup = findValue(head[0], refTrip),
        result = [ head[0], head[1] - lookup.found ] // distance, difference
    return scale(trip.slice(1), lookup.rest, newTrip.concat( [result] ))
  }
  var valueAtStart = findValue(theTrip[0][0], ref)
  return scale(theTrip, ref).map(function(x) { return [x[0], x[1] + valueAtStart.found] })
}

function rank(val) {
  return function(step) { return [ step[0], step[1] + val ] }
}

var ref = [ [0, 0], [20, 5], [35, 25], [50, 30] ]
var trip1 = [ [0, 0], [20, 5], [35, 25], [50, 30] ].map(rank(5))
var trip2 = [ [20, 0], [35, 20], [50, 25] ].map(rank(10))

function xy(step)  {
  return { x: step[0], y: step[1] }
}

var trips = [
  { key: "1", value: normalise(trip1, ref).map(xy) },
  { key: "2", value: normalise(trip2, ref).map(xy) }
]


var trip = svg.append("g")
  .attr("class", "trip")
  .attr("clip-path", "url(#clip)")
.selectAll("g")
  .data(trips)
.enter().append("g")
  .attr("class", "trip");

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

trip.append("path")
.attr("class", "trip")
.attr("d", function(d) { return line(d.value) })

trip.selectAll("circle")
.data(function(d) { return d.value })
.enter().append("circle")
.attr("transform", function(d) {
  return "translate(" + x(d.x) + "," + y(d.y) + ")" })
.attr("r", 4.52)

svg.append("g")
.attr("class", "x top axis")
.call(xAxis.orient("top"))

svg.append("g")
.attr("class", "y left axis")
.call(yAxis.orient("left"))

style.css

svg {
  background-color:#FCFCFC;
  font: 10px sans-serif;
}

.trip path {
  fill: none;
  stroke-width: 2.46px;
  stroke: #41BD7D;
}

.trip circle {
  fill: #41BD7D;
  stroke-width: 2.04px;
  stroke: #FFFFFF;
}
.axis line {
  stroke: #000000;
  shape-rendering: crispEdges;
}
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}