Elegant map

D3js try for elegant map out of OSM data.

<!DOCTYPE html>
<head>
<style>

.landuse {
	fill: #efefef;
}

.roads {
	fill: none;
	stroke: #777;
	stroke-width: 0.3px;
}

.roads_residential {
	fill: none;
	stroke: #fff;
	stroke-width: 0.3px;
}

.roads_primary {
	fill: none;
	stroke: #555;
	stroke-width: 0.35px;
}

.roads_trunk {
	fill: none;
	stroke: #3b3b3b;
	stroke-width: 0.4px;
}

.water {
	fill: steelblue;
	fill-opacity: 0.3;
}

span:before { }

</style>

var CSS = [
	{ "x": 30 , "y": 700-180, "class": "land_use"},
	{ "x": 30 , "y": 700-150, "class": "roads"},
	{ "x": 30 , "y": 700-120, "class": "roads_residential"},
	{ "x": 30 , "y": 700-90,  "class": "roads_primary"},
	{ "x": 30 , "y": 700-60,  "class": "roads_trunk"},
	{ "x": 30 , "y": 700-30,  "class": "water"}
];

var projection = d3.geo.mercator()
	.translate([600, height/2])
	.center([0.0, 51.4971])
	.scale(150000);
	
var path = d3.geo.path()
	.projection(projection);
	
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);
	
var svg_g = svg.append("g");

d3.json('london.topo.json', function(err, data) {

svg_g.append("path")
		.datum(topojson.object(data, data.objects.landuse))
		.attr("class", "landuse")
		.attr("d", path);
		
	svg_g.append("path")
		.datum(topojson.object(data, data.objects.roads))
		.attr("class", "roads")
		.attr("d", path);
		
	svg_g.append("path")
		.datum(topojson.object(data, data.objects.roads_residential))
		.attr("class", "roads_residential")
		.attr("d", path);
		
	svg_g.append("path")
		.datum(topojson.object(data, data.objects.roads_primary))
		.attr("class", "roads_primary")
		.attr("d", path);
		
	svg_g.append("path")
		.attr("class", "roads_trunk")
		.datum(topojson.object(data, data.objects.roads_truck))
		.attr("d", path);

svg_g
		.append("path")
		.datum(topojson.object(data, data.objects.waterway))
		.attr("class", "water")
		.attr("d", path);

svg_g.append("g")
		.attr("groupmode","layer")
		.attr({'id':'legend','label':'Legend'})
	.selectAll("rect")
		.data(CSS)
		.enter()
	.append("rect")
    	.attr("width", 20)
  	  	.attr("height", 10)
		.attr("x", function (d) { return d.x; })
		.attr("y", function (d) { return d.y; })
		.attr("class", function (d) { return d.class; });
       
});

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

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v0.min.js