Skip to content

Instantly share code, notes, and snippets.

@tomstove

tomstove/index.html

Created May 24, 2013 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomstove/5642750 to your computer and use it in GitHub Desktop.
Save tomstove/5642750 to your computer and use it in GitHub Desktop.
Download ZIP
Chicago
Raw
index.html
<!DOCTYPE html>
<head>
<style>
body {
background: rgb(10, 16, 29);
}
.water {
fill: rgb(66, 73, 85);
fill-opacity: 1;
}
.landuse {
fill: rgb(51, 51, 51);
fill-opacity: 0.5;
}
.roads_residential {
fill: none;
stroke: rgb(63, 71, 85);
stroke-width: 0.3px;
}
.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;
}
</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 = 1200,
height = 760;
var projection = d3.geo.mercator()
.translate([width/2, height/2])
.center([-87.685323, 41.8352915])
.scale(70000);
var path = d3.geo.path()
.projection(projection);
var colour = d3.scale.threshold()
.domain([0, 9, 14, 19, 24, 30])
.range(["#7f0000", "#d7301f", "#ef6548", "#fc8d59", "#fdbb84", "#fdd49e", "#fff7ec"]);
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 rect = svg.append("g");
var pointmax = svg.append("g");
d3.json('output.json', function(err, data) {
rect.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return projection([d._west, d._north])[0]; })
.attr("y", function(d) { return projection([d._west, d._north])[1]; })
.attr("width", function(d) { return projection([d._east, d._south])[0] - projection([d._west, d._north])[0]; })
.attr("height", function(d) { return projection([d._east, d._south])[1] - projection([d._west, d._north])[1]; })
.style("fill", function(d) { return colour(d.current_speed); })
.style("fill-opacity", 0.25)
.transition()
.delay(3000)
.duration(1500)
.style("fill", function(d) { return colour(d.current_speed2); })
});
d3.json('roads_residential.topo.json', function(err, data) {
roads_residential.append("path")
.datum(topojson.object(data, data.objects.roads_residential))
.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_secondary))
.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_primary))
.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_trunk))
.attr("class", "roads_trunk")
.attr("d", path);
});
d3.json('waterway.topo.json', function(err, data) {
water.append("path")
.datum(topojson.object(data, data.objects.waterway))
.attr("class", "water")
.attr("d", path);
});
d3.json('landuse.topo.json', function(err, data) {
landuse.append("path")
.datum(topojson.object(data, data.objects.landuse))
.attr("class", "landuse")
.attr("d", path);
})
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
landuse.topo.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
output.json
[ {
"region" : "Rogers Park - West Ridge",
"_region_id" : "1",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.709645",
"_description" : "North of Devon. Kedzie to Lake Shore",
"_north" : "42.026444",
"current_speed" : "5",
"current_speed2" : "10",
"_east" : "-87.654561",
"_south" : "41.997946"
}
, {
"region" : "Far North West",
"_region_id" : "2",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.84621",
"_description" : "North of Montrose. East River to Cicero",
"_north" : "42.0190998",
"current_speed" : "8.4",
"current_speed2" : "25.2",
"_east" : "-87.747456",
"_south" : "41.960669"
}
, {
"region" : "North Park-Albany-Linconl Sq",
"_region_id" : "3",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "Montrose to Devon. Cicero to Ravenswood",
"_north" : "41.997946",
"current_speed" : "25.91",
"current_speed2" : "3.7",
"_east" : "-87.67459",
"_south" : "41.960669"
}
, {
"region" : "Edge Water-Uptown",
"_region_id" : "4",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.67459",
"_description" : "Montrose to Devon. Ravenswood to Lake Shore",
"_north" : "41.997946",
"current_speed" : "2.8",
"current_speed2" : "19.2",
"_east" : "-87.646438",
"_south" : "41.960669"
}
, {
"region" : "Dunning-Portage-Belmont Cragn",
"_region_id" : "5",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.84621",
"_description" : "North Ave to Montrose. East River to Cicero",
"_north" : "41.960669",
"current_speed" : "16",
"current_speed2" : "1",
"_east" : "-87.747456",
"_south" : "41.909269"
}
, {
"region" : "Irving Park-Avondale-North Ctr",
"_region_id" : "6",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "Diversey to Montrose. Cicero to Ravenswood",
"_north" : "41.960669",
"current_speed" : "21.3",
"current_speed2" : "21.5",
"_east" : "-87.67459",
"_south" : "41.931841"
}
, {
"region" : "Hermosa-Logan Square",
"_region_id" : "7",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "North Ave to Diversy. Cicero to Ravenswood",
"_north" : "41.931841",
"current_speed" : "9.5",
"current_speed2" : "8.9",
"_east" : "-87.67459",
"_south" : "41.909269"
}
, {
"region" : "Lincoln Park-Lake View",
"_region_id" : "8",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.67459",
"_description" : "North Ave to Montrose. Ravenswood to Lake Shore",
"_north" : "41.960669",
"current_speed" : "29.32",
"current_speed2" : "10",
"_east" : "-87.619112",
"_south" : "41.910561"
}
, {
"region" : "Austin",
"_region_id" : "9",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.775947",
"_description" : "Roosevelt to North Ave. Austin to Cicero",
"_north" : "41.909269",
"current_speed" : "19",
"current_speed2" : "17.43",
"_east" : "-87.747456",
"_south" : "41.866129"
}
, {
"region" : "Humboldt-Garfield Prk E/W",
"_region_id" : "10",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "Roosevelt to North Ave. Cicero to Rockwell",
"_north" : "41.909269",
"current_speed" : "27.27",
"current_speed2" : "12",
"_east" : "-87.691617",
"_south" : "41.866129"
}
, {
"region" : "West Town-Near West",
"_region_id" : "11",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.691617",
"_description" : "Roosevelt to North. Rockwell to Halsted",
"_north" : "41.910561",
"current_speed" : "25.91",
"current_speed2" : "27.86",
"_east" : "-87.647208",
"_south" : "41.866129"
}
, {
"region" : "Near North",
"_region_id" : "12",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.647208",
"_description" : "Wacker to North. Halsted to Michigan",
"_north" : "41.911401",
"current_speed" : "14",
"current_speed2" : "16.78",
"_east" : "-87.62308",
"_south" : "41.88886"
}
, {
"region" : "Chicago Loop",
"_region_id" : "13",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.647208",
"_description" : "Roosevelt to Wacker: Halsted to Michigan",
"_north" : "41.88886",
"current_speed" : "23.83",
"current_speed2" : "5.45",
"_east" : "-87.62308",
"_south" : "41.866129"
}
, {
"region" : "Lawndale N/S",
"_region_id" : "14",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "Pershing to Roosevel. Cicero to Western",
"_north" : "41.866129",
"current_speed" : "6",
"current_speed2" : "12",
"_east" : "-87.685372",
"_south" : "41.822792"
}
, {
"region" : "Bridgeport-McKinley-Lower West",
"_region_id" : "15",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.685372",
"_description" : "Pershing to Roosevel. Western to Stewart",
"_north" : "41.866129",
"current_speed" : "10",
"_east" : "-87.636322",
"_south" : "41.822792"
}
, {
"region" : "Near South-Douglas",
"_region_id" : "16",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.636322",
"_description" : "Pershing to Roosevelt. Stewart to Lake Shore",
"_north" : "41.866129",
"current_speed" : "23.86",
"current_speed2" : "15",
"_east" : "-87.597952",
"_south" : "41.822792"
}
, {
"region" : "Midway-Garfield Rdg-Clearing",
"_region_id" : "17",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.802188",
"_description" : "71st to Pershing. Halem to Cicero",
"_north" : "41.822792",
"current_speed" : "12",
"current_speed2" : "23.34",
"_east" : "-87.747456",
"_south" : "41.764066"
}
, {
"region" : "South West Side",
"_region_id" : "18",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "71st to Pershing. Cicero to Western",
"_north" : "41.822792",
"current_speed" : "27.55",
"current_speed2" : "2.3",
"_east" : "-87.68373",
"_south" : "41.764066"
}
, {
"region" : "New City-Englewood-W Englewood",
"_region_id" : "19",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.68373",
"_description" : "71st to Pershing. Western to Steward",
"_north" : "41.822792",
"current_speed" : "25.3",
"current_speed2" : "19",
"_east" : "-87.636322",
"_south" : "41.764066"
}
, {
"region" : "Fuller-Grand Blvd-Washington Park",
"_region_id" : "20",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.636322",
"_description" : "71st to Pershing. Steward to Cottage Grove",
"_north" : "41.822792",
"current_speed" : "30.68",
"current_speed2" : "13.4",
"_east" : "-87.606334",
"_south" : "41.764066"
}
, {
"region" : "Hyde Park-Kenwood-Woodlawn",
"_region_id" : "21",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.606334",
"_description" : "71st to Pershing. Cottage Grove to Lake Shore",
"_north" : "41.822792",
"current_speed" : "18",
"current_speed2" : "16.98",
"_east" : "-87.56626",
"_south" : "41.764066"
}
, {
"region" : "Ashburn",
"_region_id" : "22",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "91st to 71st. Cicero to Damen",
"_north" : "41.764066",
"current_speed" : "29.76",
"current_speed2" : "25.76",
"_east" : "-87.67298",
"_south" : "41.728472"
}
, {
"region" : "Auburn Gresham-Chatham",
"_region_id" : "23",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.67298",
"_description" : "91st to 71st. Damen to Cottage Grove",
"_north" : "41.764066",
"current_speed" : "25.23",
"current_speed2" : "14.23",
"_east" : "-87.606334",
"_south" : "41.728472"
}
, {
"region" : "South Shore-S Chicago-Avlon",
"_region_id" : "24",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.606334",
"_description" : "91st to 71st. Cottage Grove to Lake Shore",
"_north" : "41.764066",
"current_speed" : "24.6",
"current_speed2" : "10",
"_east" : "-87.526388",
"_south" : "41.728472"
}
, {
"region" : "Beverly-Mt Greenwood-Morgan Park",
"_region_id" : "25",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.747456",
"_description" : "119th to 91st. Cicero to Ashland",
"_north" : "41.728472",
"current_speed" : "14",
"current_speed2" : "16.87",
"_east" : "-87.662508",
"_south" : "41.677477"
}
, {
"region" : "Washington Hts-Roseland-Pullman",
"_region_id" : "26",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.662508",
"_description" : "119th to 91st. Ashland to Stony Island ",
"_north" : "41.728472",
"current_speed" : "25.91",
"current_speed2" : "19",
"_east" : "-87.584845",
"_south" : "41.677477"
}
, {
"region" : "South Deering-East Side",
"_region_id" : "27",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.584845",
"_description" : "119th to 91st. Stony Island to State Line ",
"_north" : "41.728472",
"current_speed" : "16",
"current_speed2" : "8.96",
"_east" : "-87.524436",
"_south" : "41.677477"
}
, {
"region" : "Riverdale-Hegewisch",
"_region_id" : "28",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.662508",
"_description" : "138th to 119th. Ashland to State Line",
"_north" : "41.677477",
"current_speed" : "23.5",
"current_speed2" : "5.7",
"_east" : "-87.524436",
"_south" : "41.644139"
}
, {
"region" : "Downtown Lakefront",
"_region_id" : "29",
"_last_updt" : "2013-05-23 03:40:04.0",
"_west" : "-87.62308",
"_description" : "Roosevelt to Oak. Michigan to Lake Shore",
"_north" : "41.911401",
"current_speed" : "12.8",
"current_speed2" : "21.3",
"_east" : "-87.595378",
"_south" : "41.866129"
}
]
Display the source blob
Display the rendered blob
Raw
roads_primary.topo.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
roads_residential.topo.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
roads_secondary.topo.json
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
roads_trunk.topo.json
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
waterway.topo.json
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment