JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<!DOCTYPE html>

<head>
  <meta name="viewport" content='width=device-width, user-scalable=yes'>
  <meta charset="utf-8" />

</head>
<style>
  .active {
    fill: #33adff;
  }

</style>

<body>

</body>

JavaScript

var width = window.screen.width,
  height = window.screen.height,
  centered,
  active;

var feat;
var path;

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .on("zoom", zoomed);

var svgContainer = d3.select("body").append("svg")
  .attr("id", "svg-id")
  .attr("position", "absolute")
  .attr("width", width)
  .attr("height", height)
  .style("border", "2px solid steelblue")
  .call(zoom)
  .append("g").attr("id", "mainGroup");

function zoomed() {
  console.log(d3.event.transform)
  d3.select("#mainGroup").attr("transform", d3.event.transform);
}

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.myjson.com/bins/12uu2w');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
 
  if (xhr.status !== 200) return

  feat = xhr.response;

  var projection = d3.geoIdentity()
    .reflectY(true)
    .fitSize([width, height], feat);

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

  var color = d3.scaleOrdinal()
    .range(d3.schemeCategory10);


  svgContainer.selectAll(null)
    .data(feat.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("stroke", "black")
    .attr("stroke-width", 0.1)
    .attr("fill", "none")
    .style("pointer-events", "visible")
    .on("click", click);


  svgContainer.selectAll(null)
    .data(feat.features.filter(function(d) {
      return d.properties.myID > 0;
    }))
    .enter()
    .append("g").attr("id", "txt")
    .attr("transform", function(a) {
      var centro = path.centroid(a);
      return "translate(" + centro[0] + "," + centro[1] + ")";
    })
    .append("text")
    .attr("text-anchor", "middle")
    .attr("font-size", function(d) {
      var bb = path.bounds(d)
      return ((bb[1][0] - bb[0][0]) / 10) + "px";
    })
    .text("A/10/10/3")
    .attr("pointer-events", "none");


  function click(d) {

    active = d3.select(this).classed("active", true);
    var x, y, k;

    if (d && centered !== d) {
      var centroid =...