xxxxxxxxxx
<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="https://d3js.org/d3.v3.min.js"></script>
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="https://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");
}); -->
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http:// to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://
https://d3js.org/topojson.v1.min.js