HarryStevens/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    It's ridiculous how easy d3-zoom makes it to zoom elements.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <style>
  body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    cursor: default;
  }

  .subunit {
    stroke: #fff;
    stroke-width: .5px;
  }
  .subunit.highlight {
    stroke: #000;
    stroke-width: 2px;
  }
  .subunit-boundary {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
  }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <!-- <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <script>
  var width = window.innerWidth, height = window.innerHeight;

  var projection = d3.geoAzimuthalEqualArea()
    .rotate([-70, -10, -1]);

  var path = d3.geoPath()
      .projection(projection)
      .pointRadius(2);

  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
  var g = svg.append("g").attr("width", width).attr("height", height);

  var colors = ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];

  d3.json("india_state.json", (error, data) => {
    var feature = topojson.feature(data, data.objects.polygons);

    projection.fitSize([width, height], feature);

    g.selectAll(".subunit")
        .data(feature.features, d => d.properties.ST_NM)
      .enter().append("path")
        .attr("class", "subunit")
        .attr("d", path)
        .style("fill", (d, i) => colors[i % colors.length])
        .on("mouseover", function(){
          d3.select(this).classed("highlight", true).raise();
          d3.select(".subunit-boundary").raise();
        })
        .on("mouseout", () => {
          d3.selectAll(".subunit").classed("highlight", false);
        });

    g.append("path")
        .datum(topojson.mesh(data, data.objects.polygons, (a, b) => a === b))
        .attr("d", path)
        .attr("class", "subunit-boundary");

    var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([[0, 0], [width, height]]).on("zoom", () => g.attr("transform", d3.event.transform));
    svg.call(zoom);

    window.onresize = () => {
      width = window.innerWidth, height = window.innerHeight;

      svg.attr("width", width).attr("height", height);
      g.attr("width", width).attr("height", height);

      projection.fitSize([width, height], topojson.feature(data, data.objects.polygons));

      g.selectAll("path").attr("d", path);

      zoom.translateExtent([[0, 0], [width, height]]);
      svg.call(zoom);
    }
  });
  </script>
</body>
</html>

## india_state.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              india_state.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.
      
    
## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	font-family: "Helvetica Neue", sans-serif;
	cursor: default;
	}

	.subunit {
	stroke: #fff;
	stroke-width: .5px;
	}
	.subunit.highlight {
	stroke: #000;
	stroke-width: 2px;
	}
	.subunit-boundary {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
	}
	</style>
	</head>
	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<!-- <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
	<script>
	var width = window.innerWidth, height = window.innerHeight;

	var projection = d3.geoAzimuthalEqualArea()
	.rotate([-70, -10, -1]);

	var path = d3.geoPath()
	.projection(projection)
	.pointRadius(2);

	var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
	var g = svg.append("g").attr("width", width).attr("height", height);

	var colors = ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];

	d3.json("india_state.json", (error, data) => {
	var feature = topojson.feature(data, data.objects.polygons);

	projection.fitSize([width, height], feature);

	g.selectAll(".subunit")
	.data(feature.features, d => d.properties.ST_NM)
	.enter().append("path")
	.attr("class", "subunit")
	.attr("d", path)
	.style("fill", (d, i) => colors[i % colors.length])
	.on("mouseover", function(){
	d3.select(this).classed("highlight", true).raise();
	d3.select(".subunit-boundary").raise();
	})
	.on("mouseout", () => {
	d3.selectAll(".subunit").classed("highlight", false);
	});

	g.append("path")
	.datum(topojson.mesh(data, data.objects.polygons, (a, b) => a === b))
	.attr("d", path)
	.attr("class", "subunit-boundary");

	var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([[0, 0], [width, height]]).on("zoom", () => g.attr("transform", d3.event.transform));
	svg.call(zoom);

	window.onresize = () => {
	width = window.innerWidth, height = window.innerHeight;

	svg.attr("width", width).attr("height", height);
	g.attr("width", width).attr("height", height);

	projection.fitSize([width, height], topojson.feature(data, data.objects.polygons));

	g.selectAll("path").attr("d", path);

	zoom.translateExtent([[0, 0], [width, height]]);
	svg.call(zoom);
	}
	});
	</script>
	</body>
	</html>