tfl by danharr

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
   <link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    text {
  font-family: 'Hammersmith One', sans-serif;
  fill: #0019A8;
  font-size: 14px;
  cursor: pointer;
  font-weight: normal;
}
    
    path {
	fill: none;
	stroke: #999;
      stroke-width:5px;
}
circle {
	fill: white;
	stroke: #000000;
  stroke-width:3px;
  cursor: pointer;
}
  </style>
</head>


<body>
  <script>

    
    
    
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 1500)
      .attr("height", 800);
    
    
    
    //if there's just one line...
    
var lineGenerator = d3.line()
	.curve(
  d3.curveCatmullRom.alpha(0)
  );

    var points = [];
  var guests = [
  ["David Thompson","Marge Harris","Jack Harris","Fred Harris","Lisa Townsend","Stew Townsend","Barry Hurst","Kirk Hurst","Sally Hurst"],
  
  ["Dan Deane","Gail Deane","Brad Deane","Derek Deane","Amy Deane","Lois Deane","Ruby Wilkins","Matt Wilkins","Ted Wilkins"],
    ["Henry Gunnell","Mary Gunnell","Bob Gunnell","Geoff Turner","Jack Turner","Mark Turner","Kieth Turner","Pete Turner","Ken Turner"],
    ["Sharon Rickman","Dennis Rickman","Zoe Slater","Ruby Allen","Mo Slater","Tracey T","Stacey Slater","Den Watts","Ken Watts"],
    ["Ian Beale","Cindy Beale","Lucy Beale","Max Branning","Dot Cotton","Eric Young","Grant Mitchell","Phil Mitchell","Peggy Mitchell"]
   ,
    ["Barry White","Mark White","Larry White","Grace Rickman","Susan White","Emma White","Omar White","Lilly White"],
    
    ["Ted Moon","Zoe Moon","Alan Moon","Dan Moon","David Moon","Vera Moon","Len Moon","Frank Moon","Jill Moon"],
["Ken Harris","Mary Harris","Chris Harris","Angie Harris","Rosa Harris","Andrew Harris","James Harris","Abigail Harris","Ted Harris"],
    
  ["Joan Bilic","David Bilic","Owen Bilic","Will Bilic","Henry Bilic","Mark Bilic","Olivia Bilic","Sue Bilic","Pauline Bilic"]  
  
  
  ] 
  
  
  guests.forEach(function(d,i) {
    
   var x = d; 
    var x_coord = i*150;
   var coords = [];
    
    x.forEach(function(d,i){
      var y = i*50;
      coords.push([x_coord,y,d])
      
      
    })
    
    
    
    
    points.push(coords);
    
    console.log(points);
    
  })
    
    
 
    
    
 var color = [['#000099'],
['#0099CC'],
['#996633'],
['#CC3333'],
['#FFCC00'],
['#006633'],
['#CC9999'],
['#868F98'],
['#660066'],
['#000000'],
['#66CCCC'],
['#009999'],
['#FF6600'],
['#66CC00']];


function pathData(x) { return lineGenerator(x)};

var g = svg.append('g').attr('transform','translate(69,99)');
    
 function update() {  
   
 
    g.selectAll('.curves').data(points)
	.attr('d', function(d) {return pathData(d)});
   
   
 }
    
g.selectAll('.curves').data(points).enter().append('path')
    .style('stroke',function(d,i){return color[i]})
    .attr('class','curves')
	.attr('d', function(d) {return pathData(d)});

// Also draw points for reference
var labels = g.selectAll('stations')
	.data(points)
	.enter()
.append('g').attr('line',function(d,i){return i}).selectAll('sub_g')
.data(function(d) {return d})
.enter()
	.append('g').attr('station',function(d,i){return i}).call(d3.drag()
    .on("drag", dragged));
    
    var circles = 
labels
	.append('circle')
	.attr('cx', function(d) {
		return d[0];
	})
	.attr('cy', function(d) {
		return d[1];
	})
	.attr('r', 8);
    
      var names = 
labels
	.append('text')
	.attr('x', function(d) {
		return d[0]+10;
	})
	.attr('y', function(d) {
		return d[1]+15;
	})
	.text(function(d) {return d[2]})
      .call(d3.drag()
    .on("drag", dragged2)); 
    
    
    
 
function dragged(d,i) {

  d3.select(this).select("text")
    .attr("x", d.x = d3.event.x+10)
    .attr("y", d.y = d3.event.y+10);
  
    d3.select(this).select("circle")
    .attr("cx", d.x = d3.event.x)
    .attr("cy", d.y = d3.event.y);
  

  points[+d3.select(this.parentNode).attr('line')][+d3.select(this).attr('station')][0]=d3.event.x;
  
   points[d3.select(this.parentNode).attr('line')][+d3.select(this).attr('station')][1]=d3.event.y; 
  
  update();
  console.log(d3.event.x,d3.event.y,+d3.select(this).attr('station'),d3.select(this.parentNode).attr('line'))
}
 
    
    
     
function dragged2(d,i) {

  d3.select(this)
    .attr("x", d.x = d3.event.x+10)
    .attr("y", d.y = d3.event.y+10);
  
    
  

}

  </script>
</body>