Skip to content

Instantly share code, notes, and snippets.

@tomstove

tomstove/index.html

Created July 25, 2013 06:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tomstove/6077439 to your computer and use it in GitHub Desktop.
Save tomstove/6077439 to your computer and use it in GitHub Desktop.
Download ZIP
London Traffic
Raw
index.html
<!DOCTYPE html>
<head>
<style>
body {
background: rgb(10, 16, 29);
}
.points {
fill: rgb(243, 247, 28);
fill-opacity: 0.6;
stroke: none;
}
.water {
fill: rgb(63, 71, 85);
}
.landuse {
fill: rgb(51, 51, 51);
fill-opacity: 0.5;
}
.roads_residential {
fill: none;
stroke: rgb(63, 71, 85);
stroke-width: 0.2px;
}
.roads_secondary {
fill: none;
stroke: rgb(63, 71, 85);
stroke-width: 0.4px;
}
.roads_primary {
fill: none;
stroke: rgb(63, 71, 85);
stroke-width: 0.5px;
}
.roads_trunk {
fill: none;
stroke: rgb(63, 71, 85);
stroke-width: 0.8px;
}
.mask {
fill: none;
stroke: rgb(63, 71, 85);
stroke-width: 0.4px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
</head>
<body>
<script>
var width = 2400,
height = 1800;
var projection = d3.geo.mercator()
.translate([width/2, height/2])
.center([-0.08, 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 landuse = svg.append("g");
var water = svg.append("g");
var roads_residential = svg.append("g");
var roads_secondary = svg.append("g");
var roads_primary = svg.append("g");
var roads_trunk = svg.append("g");
var points = svg.append("g");
var mask = svg.append("mask").attr("id", "maskurl");
/* Traffic dataset */
d3.csv('majorroads/2001hgvs.csv', function(err, data) {
points.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return projection([d.Longitude, d.Latitude])[0]; })
.attr("cy", function(d) { return projection([d.Longitude, d.Latitude])[1]; })
.attr("r", function(d) { return Math.sqrt(d.AllHGVs)*0.25; })
.attr("mask", "url(#maskurl)")
.attr("class", "points");
});
/* Calls to individual topojson files, separated for clarity */
d3.json('roads_residential.topo.json', function(err, data) {
roads_residential.append("path")
.datum(topojson.object(data, data.objects.roads_residential1))
.attr("class", "roads_residential")
.attr("d", path);
roads_residential.append("path")
.datum(topojson.object(data, data.objects.roads_residential2))
.attr("class", "roads_residential")
.attr("d", path);
roads_residential.append("path")
.datum(topojson.object(data, data.objects.roads_residential3))
.attr("class", "roads_residential")
.attr("d", path);
});
d3.json('roads_secondary.topo.json', function(err, data) {
roads_secondary.append("path")
.datum(topojson.object(data, data.objects.roads_secondary1))
.attr("class", "roads_secondary")
.attr("d", path);
roads_secondary.append("path")
.datum(topojson.object(data, data.objects.roads_secondary2))
.attr("class", "roads_secondary")
.attr("d", path);
roads_secondary.append("path")
.datum(topojson.object(data, data.objects.roads_secondary3))
.attr("class", "roads_secondary")
.attr("d", path);
});
d3.json('roads_primary.topo.json', function(err, data) {
roads_primary.append("path")
.datum(topojson.object(data, data.objects.roads_primary1))
.attr("class", "roads_primary")
.attr("d", path);
roads_primary.append("path")
.datum(topojson.object(data, data.objects.roads_primary2))
.attr("class", "roads_primary")
.attr("d", path);
roads_primary.append("path")
.datum(topojson.object(data, data.objects.roads_primary3))
.attr("class", "roads_primary")
.attr("d", path);
});
d3.json('roads_trunk.topo.json', function(err, data) {
roads_trunk.append("path")
.datum(topojson.object(data, data.objects.roads_trunk1))
.attr("class", "roads_trunk")
.attr("d", path);
roads_trunk.append("path")
.datum(topojson.object(data, data.objects.roads_trunk2))
.attr("class", "roads_trunk")
.attr("d", path);
roads_trunk.append("path")
.datum(topojson.object(data, data.objects.roads_trunk3))
.attr("class", "roads_trunk")
.attr("d", path);
});
/* Call to the same topojson files to be used for the mask */
d3.json('roads_secondary.topo.json', function(err, data) {
mask.append("path")
.datum(topojson.object(data, data.objects.roads_secondary1))
.attr("class", "mask")
.attr("d", path);
mask.append("path")
.datum(topojson.object(data, data.objects.roads_secondary2))
.attr("class", "mask")
.attr("d", path);
mask.append("path")
.datum(topojson.object(data, data.objects.roads_secondary3))
.attr("class", "mask")
.attr("d", path);
});
d3.json('roads_primary.topo.json', function(err, data) {
mask.append("path")
.datum(topojson.object(data, data.objects.roads_primary1))
.attr("class", "mask")
.attr("d", path);
mask.append("path")
.datum(topojson.object(data, data.objects.roads_primary2))
.attr("class", "mask")
.attr("d", path);
mask.append("path")
.datum(topojson.object(data, data.objects.roads_primary3))
.attr("class", "mask")
.attr("d", path);
});
d3.json('roads_trunk.topo.json', function(err, data) {
mask.append("path")
.datum(topojson.object(data, data.objects.roads_trunk1))
.attr("class", "mask")
.attr("d", path);
mask.append("path")
.datum(topojson.object(data, data.objects.roads_trunk2))
.attr("class", "mask")
.attr("d", path);
mask.append("path")
.datum(topojson.object(data, data.objects.roads_trunk3))
.attr("class", "mask")
.attr("d", path);
});
d3.json('london.topo.json', function(err, data) {
landuse.append("path")
.datum(topojson.object(data, data.objects.landuse))
.attr("class", "landuse")
.attr("d", path);
water.append("path")
.datum(topojson.object(data, data.objects.waterway))
.attr("class", "water")
.attr("d", path);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment