danharr/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Attempt to automate tube like map from random data

  
## 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>
	<!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>