Bring Up State - D3

            
              // adapted from https://bl.ocks.org/mbostock/4699541

var svg = d3.select("svg");

// lookup svg width and height from DOM instead of hard-coding values
var svgWidth = +svg.attr("viewBox").split(" ")[2],
  svgHeight = +svg.attr("viewBox").split(" ")[3];

// get reference to the <rect> node, which is invisible and in the background
// wire up a click listener so that the brought up feature can be "reset" later
var rect = svg.select("rect.background").on("click", reset);

// get reference to the <g> node
// geojson features will be drawn here
var g = svg.select("g");

// the D3 geographic path generator is used for drawing the svg paths of geojson
// and during bounding box calculations
var geoPathGenerator = d3.geoPath();

// transition-related vars
var activeFeature = d3.select(null),
  transitionDuration = 1250,
  featureStrokeWidth = 0.75,
  featureStroke = "#fff",
  featureFill = "#a6bddb",
  // during transition:
  //  - swap stroke and fill colors
  //  - change stroke width
  broughtUpFeatureStrokeWidth = 3,
  broughtUpFeatureStroke = "#a6bddb",
  broughtUpFeatureFill = "#fff";

// load and draw US states topojson
d3
  .json("https://unpkg.com/us-atlas@1/us/10m.json")
  .then(function(loadedTopoJson) {
    var allStatesGeoJsonData = topojson.feature(
      loadedTopoJson,
      loadedTopoJson.objects.states
    );

    g
      .selectAll("path")
      .data(allStatesGeoJsonData.features)
      .enter()
      .append("path")
      .attr("d", geoPathGenerator)
      .attr("class", "feature")
      .on("click", bringUpFeature);
  });

function bringUpFeature(geoJsonDatum) {
  if (activeFeature.node() === this) {
    return reset();
  }

  activeFeature.classed("active-feature", false);

  activeFeature = d3
    .select(this)
    .classed("active-feature", true)
    .raise();

  var t = getGeoBoundsTransform(
    geoJsonDatum,
    geoPathGenerator,
    svgWidth,
    svgHeight
  );

  console.log(t);

  activeFeature
    .transition()
    .duration(transitionDuration)
    .style("stroke-width", broughtUpFeatureStrokeWidth / t.scale + "px")
    .style("stroke", broughtUpFeatureStroke)
    .style("fill", broughtUpFeatureFill)
    .attr("transform", "translate(" + t.translate + ") scale(" + t.scale + ")");

  var otherFeatures = g.selectAll("path.feature:not(.active-feature)");

  // remove the original click listener before transitioning the other features out of view
  otherFeatures.on("click", null);

  otherFeatures
    .transition()
    .duration(transitionDuration)
    .style("opacity", "0")
    .on("end", function(d, idx, nodeList) {
      // completely remove the display of the other features after transition is over
      if (idx === nodeList.length - 1) {
        otherFeatures.style("display", "none");
      }
    });
}

function reset() {
  activeFeature
    .transition()
    .duration(transitionDuration)
    .style("stroke-width", featureStrokeWidth)
    .style("stroke", featureStroke)
    .style("fill", featureFill)
    .attr("transform", "");

  var otherFeatures = g.selectAll("path.feature:not(.active-feature)");

  // reset display of other features before transitioning back into view
  otherFeatures.style("display", "");

  otherFeatures
    .transition()
    .duration(transitionDuration)
    .style("opacity", "1")
    .on("end", function(d, idx, nodeList) {
      // reestablish the original click listener after transition is over
      if (idx === nodeList.length - 1) {
        otherFeatures.on("click", bringUpFeature);
      }
    });

  activeFeature.classed("active-feature", false);
  activeFeature = d3.select(null);
}

function getGeoBoundsTransform(geoJsonDatum, geoPathGenerator, width, height) {
  var bounds = geoPathGenerator.bounds(geoJsonDatum),
    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,
    scale = 0.9 / Math.max(dx / width, dy / height),
    translate = [width / 2 - scale * x, height / 2 - scale * y];

  return {
    translate: translate,
    scale: scale
  };
}