Andrew-Reid · October 23, 2016 04:21
diff --git a/readme.md b/readme.md
diff --git a/contours.json b/contours.json
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 .rail {
 	fill:none;
 	stroke-width: 1;
 	stroke: #000;
 }
 .contour {
 	fill:none;
 	stroke-width: 0.5;
 	stroke: #bbb;

 }
 .structures {
 	stroke-width: 20px;
 	opacity: 0.4;
 	stroke: #000;
 	fill:none;
 }
 .water {
 	fill: #43a2ca;
 }
 svg {
 	background: #a8ddb5;
 }	
 </style>
 <body>
 <svg width="960" height="500"></svg>

 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
 <script src="https://d3js.org/topojson.v1.min.js"></script>

 <script>
 var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

 var projection = d3.geoKavrayskiy7()
    .scale(1050000)
    .rotate([116.41, 0])
    .center([0,51.428])
    .translate([width / 2, height / 2])
    .precision(.1);

 var path = d3.geoPath()
    .projection(projection);

 var g = svg.append("g");
 var g2 = svg.append("g");

 d3.json("spiral.json", function(error, spiral) {
 	// Add the rail
 	var paths = g2.selectAll("path")
 		.data(topojson.feature(spiral, spiral.objects.tracks).features)
 		.enter().append("path")
 		.attr("d", path)
 		.attr("class", "rail")
 		.attr("id",function(d,i) { return "b" + i });
 			
 	// Figure out how many cross hatches are needed for each track section
 	paths.each(function(d,i) {
 		var currentPath = d3.select("#b" + i).node();
 		var totalLength = currentPath.getTotalLength();
 		var numberOfSymbols = Math.round(totalLength/6); 
 		var spacingOfSymbols = totalLength/numberOfSymbols;
 		var intialSpacng = spacingOfSymbols/2;
 		var j = 0;
 		
 		// Add each cross hatch at the right angle
 		while (j < numberOfSymbols) {
 			var p1 = currentPath.getPointAtLength( (spacingOfSymbols/2 - 5) + (spacingOfSymbols * j) ); 
 			var p2 = currentPath.getPointAtLength( (spacingOfSymbols/2 + 5) + (spacingOfSymbols * j) );
 			var p3 = currentPath.getPointAtLength( (spacingOfSymbols/2) + (spacingOfSymbols * j) );
 			
 			var r = 3; 	// length of cross hatch from line
 			
 			var m = (p2.y - p1.y) / (p1.x - p2.x);
 			m = 1/m;
 			var k = r / Math.sqrt( 1 + (m*m) );
 			
 			if (m == Infinity) {
 				p1.x = p3.x;
 				p1.y = p3.y + r;
 				
 				p2.y = p3.y - r;
 				p2.x = p3.x;
 			}
 			
 			else {
 			
 				p1.x = p3.x + k;
 				p1.y = p3.y + (m * k);
 				
 				p2.x = p3.x - k;
 				p2.y = p3.y - (m * k);
 			}

 			var line = g2.append("line")
 				.attr("x1",p1.x)
 				.attr("x2",p2.x)
 				.attr("y1",p1.y)
 				.attr("y2",p2.y)
 				.attr("class", "rail")
 				.attr("stroke-width",1)
 				;
 			j++;
 		}
 	});	
 })


 d3.json("contours.json", function(error, contours) {
 	// contours
 	var paths = g.selectAll(".contour")
 		.data(topojson.feature(contours, contours.objects.contours).features)
 		.enter().append("path")
 		.attr("d", path)
 		.attr("class", "contour")
 		;
 });

 d3.json("structures.json", function(error, structures) {
 	// structures - bridges/tunnels/avalanche sheds
 	var paths = g.selectAll(".structures")
 		.data(topojson.feature(structures, structures.objects.structures).features)
 		.enter().append("path")
 		.attr("d", path)
 		.attr("class", "structures")
 		;
 });

 d3.json("water.json", function(error, water) {
 	// add water
 	var paths = g.selectAll(".water")
 		.data(topojson.feature(water, water.objects.water).features)
 		.enter().append("path")
 		.attr("d", path)
 		.attr("class", "water")
 		;
 });

 </script>
diff --git a/spiral.json b/spiral.json
diff --git a/structures.json b/structures.json
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/water.json b/water.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.rail {
	fill:none;
	stroke-width: 1;
	stroke: #000;
	}
	.contour {
	fill:none;
	stroke-width: 0.5;
	stroke: #bbb;

	}
	.structures {
	stroke-width: 20px;
	opacity: 0.4;
	stroke: #000;
	fill:none;
	}
	.water {
	fill: #43a2ca;
	}
	svg {
	background: #a8ddb5;
	}
	</style>
	<body>
	<svg width="960" height="500"></svg>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>

	<script>
	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var projection = d3.geoKavrayskiy7()
	.scale(1050000)
	.rotate([116.41, 0])
	.center([0,51.428])
	.translate([width / 2, height / 2])
	.precision(.1);

	var path = d3.geoPath()
	.projection(projection);

	var g = svg.append("g");
	var g2 = svg.append("g");

	d3.json("spiral.json", function(error, spiral) {
	// Add the rail
	var paths = g2.selectAll("path")
	.data(topojson.feature(spiral, spiral.objects.tracks).features)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "rail")
	.attr("id",function(d,i) { return "b" + i });

	// Figure out how many cross hatches are needed for each track section
	paths.each(function(d,i) {
	var currentPath = d3.select("#b" + i).node();
	var totalLength = currentPath.getTotalLength();
	var numberOfSymbols = Math.round(totalLength/6);
	var spacingOfSymbols = totalLength/numberOfSymbols;
	var intialSpacng = spacingOfSymbols/2;
	var j = 0;

	// Add each cross hatch at the right angle
	while (j < numberOfSymbols) {
	var p1 = currentPath.getPointAtLength( (spacingOfSymbols/2 - 5) + (spacingOfSymbols * j) );
	var p2 = currentPath.getPointAtLength( (spacingOfSymbols/2 + 5) + (spacingOfSymbols * j) );
	var p3 = currentPath.getPointAtLength( (spacingOfSymbols/2) + (spacingOfSymbols * j) );

	var r = 3; // length of cross hatch from line

	var m = (p2.y - p1.y) / (p1.x - p2.x);
	m = 1/m;
	var k = r / Math.sqrt( 1 + (m*m) );

	if (m == Infinity) {
	p1.x = p3.x;
	p1.y = p3.y + r;

	p2.y = p3.y - r;
	p2.x = p3.x;
	}

	else {

	p1.x = p3.x + k;
	p1.y = p3.y + (m * k);

	p2.x = p3.x - k;
	p2.y = p3.y - (m * k);
	}

	var line = g2.append("line")
	.attr("x1",p1.x)
	.attr("x2",p2.x)
	.attr("y1",p1.y)
	.attr("y2",p2.y)
	.attr("class", "rail")
	.attr("stroke-width",1)
	;
	j++;
	}
	});
	})


	d3.json("contours.json", function(error, contours) {
	// contours
	var paths = g.selectAll(".contour")
	.data(topojson.feature(contours, contours.objects.contours).features)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "contour")
	;
	});

	d3.json("structures.json", function(error, structures) {
	// structures - bridges/tunnels/avalanche sheds
	var paths = g.selectAll(".structures")
	.data(topojson.feature(structures, structures.objects.structures).features)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "structures")
	;
	});

	d3.json("water.json", function(error, water) {
	// add water
	var paths = g.selectAll(".water")
	.data(topojson.feature(water, water.objects.water).features)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "water")
	;
	});

	</script>