Dekalb cities draft

<!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="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>

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