D3_Topojson_test

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

CSS

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}

path:hover {
  fill: red;
}

JavaScript

var width = 960,
  height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
debugger;
//var url = "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json"
var url = "http://mazolosite.orionhub.org:8000/ZAF_adm3.json";
d3.json(url, function(error, topology) {

  if (error) throw error;

  //var featureCollection = topojson.feature(topology, topology.objects.counties);
  var featureCollection = topojson.feature(topology, topology.objects.collection);
  var bounds = d3.geo.bounds(featureCollection);

  var centerX = d3.sum(bounds, function(d) {
      return d[0];
    }) / 2,
    centerY = d3.sum(bounds, function(d) {
      return d[1];
    }) / 2;

  var projection = d3.geo.mercator()
    .scale(300)
    .center([180,90]);//centerX, centerY
  path.projection(projection);

  svg.selectAll("path")
    .data(featureCollection.features)
    .enter().append("path")
    .attr("d", path);
});