Built with blockbuilder.org
Attempt to automate tube like map from random data
license: mit |
Built with blockbuilder.org
Attempt to automate tube like map from random data
<!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> |