Skip to content

Instantly share code, notes, and snippets.

@maggie-lee

maggie-lee/index.html

Created October 1, 2014 21:03
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 maggie-lee/61c03c3d646a09d5a012 to your computer and use it in GitHub Desktop.
Save maggie-lee/61c03c3d646a09d5a012 to your computer and use it in GitHub Desktop.
Download ZIP
Dekalb cities draft
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#south_dekalb1 { /*city comprising south dekalb*/
fill: gray ;
opacity: 0.5;
}
#lakeside_tucker1 {
fill: gainsboro;
opacity: 0.5;
}
#lakeside_tucker2 {
fill: dimGray;
opacity: 0.5;
}
#brookhaven1 {
fill: purple;
opacity: 0.5;
}
/* CSS goes here. */
</style>
<body>
Proposed cities are in gray shades
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1500,
height = 1500;
var scale = 100000;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var color = d3.scale.category20();
d3.json("topo_cities.json", function(error, dek) {
if (error) return console.error(error);
console.log("ok dek:", dek)
var projection = d3.geo.mercator()
.scale(scale)
.rotate([84.2, -33.9, 0]);
var path = d3.geo.path()
.projection(projection);
svg.selectAll("#cities")
.data(topojson.feature(dek, dek.objects['cities']).features)
.enter().append("path")
.attr("id", function (d, i) {return "cities" + i; })
.attr("d", path)
.attr("fill", function (d, i) {return color(i);});
});
d3.json("topo_brookhaven.json", function(error, bkh) {
if (error) return console.error(error);
console.log("ok dek:", bkh)
var projection = d3.geo.mercator()
.scale(scale)
.rotate([84.2, -33.9, 0]);
var path = d3.geo.path()
.projection(projection);
svg.selectAll("#brookhaven")
.data(topojson.feature(bkh, bkh.objects['brookhaven']).features)
.enter().append("path")
.attr("id", function (d, i) {return "brookhaven" + i; })
.attr("d", path)
.attr("opacity", 0);
});
d3.json("south_dekalb.json", function(error, south_dekalb) {
if (error) return console.error(error);
console.log("ok sdk", south_dekalb);
var projection = d3.geo.mercator()
.scale(scale)
.rotate([84.2, -33.9, 0]) // l/r, u/d, yawl
var path = d3.geo.path()
.projection(projection);
svg.selectAll("#south_dekalb")
.data(topojson.feature(south_dekalb, south_dekalb.objects['south_dekalb']).features)
.enter().append("path")
.attr("id", function (d, i) {return "south_dekalb" + i; })
.attr("d", path)
.attr("opacity", 0);
});
d3.json("lakeside-tucker.json", function(error, lakeside_tucker) {
if (error) return console.error(error);
console.log("ok lakeside:" , lakeside_tucker)
var projection2 = d3.geo.mercator()
.scale(scale)
.rotate([84.2, -33.9, 0]) // l/r, u/d, yawl
console.log("lakeside features:", lakeside_tucker.objects['lakeside-tucker']);
var path2 = d3.geo.path()
.projection(projection2);
svg.selectAll("#lakeside_tucker")
.data(topojson.feature(lakeside_tucker, lakeside_tucker.objects['lakeside-tucker']).features)
.enter().append("path")
.attr("id", function (d, i) {return "lakeside_tucker" + i; })
.attr("d", path2)
.attr("opacity", 0);
});
</script>
<!-- // var projection = d3.geo.mercator()
// .scale(scale)
// .rotate([84.2, -33.9, 0]) // l/r, u/d, yawl
// var path = d3.geo.path()
// .projection(projection);
// svg.selectAll("#south_dekalb")
// .data(topojson.feature(south_dekalb, south_dekalb.objects['south_dekalb']).features)
// .enter().append("path")
// .attr("id", function (d, i) {return "south_dekalb" + i; })
// .attr("d", path)
// .attr("opacity", 0);
// });
-->
<!-- // d3.json("lakeside-tucker.json", function(error, lakeside_tucker) {
// if (error) return console.error(error);
// console.log("ok lakeside:" , lakeside_tucker)
// var projection2 = d3.geo.mercator()
// .scale(scale)
// .rotate([84.2, -33.9, 0]) // l/r, u/d, yawl
// console.log("lakeside features:", lakeside_tucker.objects['lakeside-tucker']);
// var path2 = d3.geo.path()
// .projection(projection2);
// svg.selectAll("#lakeside_tucker")
// .data(topojson.feature(lakeside_tucker, lakeside_tucker.objects['lakeside-tucker']).features)
// .enter().append("path")
// .attr("id", function (d, i) {return "lakeside_tucker" + i; })
// .attr("d", path2)
// .attr("opacity", 0);
// }); -->
<!-- d3.json("050_002.json", function(error, counties) {
if (error) return console.error(error);
console.log("ok counties:", counties)
var projection = d3.geo.mercator()
.scale(scale)
.rotate([84.2, -33.9, 0]);
var path = d3.geo.path()
.projection(projection);
svg.append("path")
.datum(topojson.feature(counties, counties.objects['050_00']))
.attr("d", path)
// svg.selectAll("#counties")
// .data(topojson.feature(counties, counties.objects.geometry))
// .enter().append("path")
// .attr("id", "counties")
// .attr("d", path)
// .attr("opacity", 0.1)
// .attr("stroke", "black")
// .attr("fill", "null");
}); -->
Display the source blob
Display the rendered blob
Raw
lakeside-tucker.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
south_dekalb.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
topo_brookhaven.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
topo_cities.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment