ajzeigert/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Pipeline test</title>
	<meta charset="UTF-8">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style>
		.pipes {
			stroke-width: 2;
			fill: none;
			stroke-linejoin: "round";
		}

		.hp {
			stroke: #7a9e00;
		}

		.t {
			stroke: #d9b410;
		}

		.streets {
			stroke-width: 1;
			stroke: #cbcbca;
			stroke-linejoin: "round";
		}

/*
		.pipes:hover {
			stroke: #d98410;
		}
*/

	</style>
</head>
<body>
	<script>

		var width = 800,
				height = 600;

		var svg = d3.select("body")
			.append("svg")
			.attr("width", width)
			.attr("height", height);

		var projection = d3.geo.mercator()
//		.rotate();

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

		// Load high-pressure pipeline
		d3.json("pipeline_hp.json", function(error, data){
			if (error) throw error;

			projection
				.scale(1)
				.translate([0,0]);

			var b = path.bounds(data),
					s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
					t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

			projection
				.scale(s)
				.translate(t);

			svg.append("path")
				.datum(data)
				.attr("class", "pipes hp")
				.attr("d", path);


			// Load transmission pipeline
			d3.json("pipeline_t.json", function(error, data2){
				if (error) throw error;

				svg.append("path")
					.datum(data2)
					.attr("class", "pipes t")
					.attr("d", path);

			});

		});

	</script>
</body>
</html>

## pipeline_hp.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              pipeline_hp.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## pipeline_t.json

      
    Raw
  

              pipeline_t.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pipeline test</title>
	<meta charset="UTF-8">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style>
	.pipes {
	stroke-width: 2;
	fill: none;
	stroke-linejoin: "round";
	}

	.hp {
	stroke: #7a9e00;
	}

	.t {
	stroke: #d9b410;
	}

	.streets {
	stroke-width: 1;
	stroke: #cbcbca;
	stroke-linejoin: "round";
	}

	/*
	.pipes:hover {
	stroke: #d98410;
	}
	*/

	</style>
	</head>
	<body>
	<script>

	var width = 800,
	height = 600;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var projection = d3.geo.mercator()
	// .rotate();

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

	// Load high-pressure pipeline
	d3.json("pipeline_hp.json", function(error, data){
	if (error) throw error;

	projection
	.scale(1)
	.translate([0,0]);

	var b = path.bounds(data),
	s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
	t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

	projection
	.scale(s)
	.translate(t);

	svg.append("path")
	.datum(data)
	.attr("class", "pipes hp")
	.attr("d", path);


	// Load transmission pipeline
	d3.json("pipeline_t.json", function(error, data2){
	if (error) throw error;

	svg.append("path")
	.datum(data2)
	.attr("class", "pipes t")
	.attr("d", path);

	});

	});

	</script>
	</body>
	</html>