ranaalisaeed/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  /* CSS goes here. */
  .background {
    fill: none;
    pointer-events: all;
  }

  path {
    fill: #ddd;
    stroke: #fff;
    stroke-width: .1px;
  }

  /* CSS way for hover over color */
  /* path:hover {
    fill: red;
  } */

  .suburbs :hover {
    fill: red;
  }

  .feature {
    fill: #ccc;
    cursor: pointer;
  }

  .feature.active {
    fill: orange;
  }

  .mesh {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
</style>

<body>
  <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <script src="//unpkg.com/topojson@3"></script>
  <script>

    var width = 960,
      height = 500
    active = d3.select(null);

    var projection = d3.geoMercator()
      .scale(1)
      .translate([0, 0]);

    var path = d3.geoPath()
      .projection(projection)

    var zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on('zoom', zoomed);

    var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .on('click', stopped, true);

    svg.append('rect')
      .attr('class', 'background')
      .attr('width', width)
      .attr('height', height)
      .on('click', reset);

    var g = svg.append('g');

    svg.call(zoom); // enables fee zooming

    // Load data
    d3.json("vic_3f_q5k_S70_topo.json", function (err, tjson) {
      if (err) throw err;

      var geojson = topojson.feature(tjson, tjson.objects.vic_3fields);

      var b = path.bounds(geojson),
        s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
        t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

      projection
        .scale(s)
        .translate(t)

      g.append('g')
          .attr('class', 'suburbs')
        .selectAll("path")
          .data(geojson.features)
        .enter().append("path")
          .attr("d", path)
          .attr('class', 'feature')
          .on('click', clicked);

      g.append('path')
        .datum(topojson.mesh(tjson, tjson.objects.vic_3fields, function (a, b) { return a !== b; }))
        .attr('class', 'mesh')
        .attr('d', path);
    });


    function clicked(d) {
      if (active.node() === this) return reset();
      active.classed('active', false);
      active = d3.select(this).classed('active', true);
      var bounds = path.bounds(d),
        dx = bounds[1][0] - bounds[0][0],
        dy = bounds[1][1] - bounds[0][1],
        x = (bounds[0][0] + bounds[1][0]) / 2,
        y = (bounds[0][1] + bounds[1][1]) / 2,
        s = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
        t = [width / 2 - s * x, height / 2 - s * y];
      svg.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity.translate(t[0], t[1]).scale(s));
    }

    function reset() {
      active.classed("active", false);
      active = d3.select(null);
      g.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity);
    }

    function zoomed() {
      // var transform = d3.event.transform;
      // projection.scale(transform.k).translate([transform.x, transform.y]);
      g.style("stroke-width", 1.5 / d3.event.transform.k + "px");
      g.attr('transform', d3.event.transform);

      // This line was slowing the whole sh** down
      // g.selectAll('path').attr('d', path);
    }

    function stopped() {
      if (d3.event.defaultPrevented) {
        d3.event.stopPropagation();
      }
    }

  </script>

## vic_3f_q5k_S70_topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              vic_3f_q5k_S70_topo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	/* CSS goes here. */
	.background {
	fill: none;
	pointer-events: all;
	}

	path {
	fill: #ddd;
	stroke: #fff;
	stroke-width: .1px;
	}

	/* CSS way for hover over color */
	/* path:hover {
	fill: red;
	} */

	.suburbs :hover {
	fill: red;
	}

	.feature {
	fill: #ccc;
	cursor: pointer;
	}

	.feature.active {
	fill: orange;
	}

	.mesh {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	</style>

	<body>
	<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
	<script src="//unpkg.com/topojson@3"></script>
	<script>

	var width = 960,
	height = 500
	active = d3.select(null);

	var projection = d3.geoMercator()
	.scale(1)
	.translate([0, 0]);

	var path = d3.geoPath()
	.projection(projection)

	var zoom = d3.zoom()
	.scaleExtent([1, 8])
	.on('zoom', zoomed);

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.on('click', stopped, true);

	svg.append('rect')
	.attr('class', 'background')
	.attr('width', width)
	.attr('height', height)
	.on('click', reset);

	var g = svg.append('g');

	svg.call(zoom); // enables fee zooming

	// Load data
	d3.json("vic_3f_q5k_S70_topo.json", function (err, tjson) {
	if (err) throw err;

	var geojson = topojson.feature(tjson, tjson.objects.vic_3fields);

	var b = path.bounds(geojson),
	s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
	t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

	projection
	.scale(s)
	.translate(t)

	g.append('g')
	.attr('class', 'suburbs')
	.selectAll("path")
	.data(geojson.features)
	.enter().append("path")
	.attr("d", path)
	.attr('class', 'feature')
	.on('click', clicked);

	g.append('path')
	.datum(topojson.mesh(tjson, tjson.objects.vic_3fields, function (a, b) { return a !== b; }))
	.attr('class', 'mesh')
	.attr('d', path);
	});


	function clicked(d) {
	if (active.node() === this) return reset();
	active.classed('active', false);
	active = d3.select(this).classed('active', true);
	var bounds = path.bounds(d),
	dx = bounds[1][0] - bounds[0][0],
	dy = bounds[1][1] - bounds[0][1],
	x = (bounds[0][0] + bounds[1][0]) / 2,
	y = (bounds[0][1] + bounds[1][1]) / 2,
	s = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
	t = [width / 2 - s * x, height / 2 - s * y];
	svg.transition()
	.duration(750)
	.call(zoom.transform, d3.zoomIdentity.translate(t[0], t[1]).scale(s));
	}

	function reset() {
	active.classed("active", false);
	active = d3.select(null);
	g.transition()
	.duration(750)
	.call(zoom.transform, d3.zoomIdentity);
	}

	function zoomed() {
	// var transform = d3.event.transform;
	// projection.scale(transform.k).translate([transform.x, transform.y]);
	g.style("stroke-width", 1.5 / d3.event.transform.k + "px");
	g.attr('transform', d3.event.transform);

	// This line was slowing the whole sh** down
	// g.selectAll('path').attr('d', path);
	}

	function stopped() {
	if (d3.event.defaultPrevented) {
	d3.event.stopPropagation();
	}
	}

	</script>