Simple demo of d3 ability to display geojson by ajzeigert

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>