D3.js render Vietnam map

Vietnam: area, population and population density in 2011 by province

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div id="wrapper">
  <div class="scatterplot-wrapper"></div>
  <div class="legend-wrapper">
    <h1>Population density</h1>
    <div class="index-level-bar">
      <div class="bar-legend"></div>
      <div class="bar-label">Lower denisty</div>
      <div class="bar-label second">Higher denisty</div>
      <div style="clear: both;"></div>
    </div>
  </div>
  <div id="info">
    <div id="header-info">
      <span>Area, population and population density in 2011 by province (https://www.gso.gov.vn)</span>
      <table id="feature-info">
        <tbody>
          <tr>
            <th class="name" style="width:25%;">Name</th>
            <th class="population" style="width:20%;">Population</th>
            <th class="area" style="width:15%;">Area</th>
            <th class="density" style="width:15%;">Density</th>
            <th class="capital" style="width:25%;">Capital</th>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="loading" class="hidden">
      <a class="fa fa-spinner"></a>
    </div>
  </div>
  <div id="map-canvas"></div>
</div>

CSS

#wrapper {
  padding-top: 15px;
}

.bar-label {
  float: left;
  margin-top: 5px;
  line-height: 12px;
  font-size: 12px;
  font-family: 'Helvetica';
}

.bar-label.second {
  float: right;
}

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  padding: 0px;
}

th {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: normal;
  text-align: left;
}

th.name {
  color: #E7BA52;
}

th.area {
  color: #FC9E27;
}

th.population {
  color: #3A7FA3;
}

th.density {
  color: #B5CF6B;
}

th.capital {
  color: #D6616B;
}

th,
td {
  color: #555;
}

.h2,
h2 {
  font-size: 30px;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #555;
}

.scatterplot-wrapper {
  position: fixed;
  z-index: 2;
  left: 15px;
  bottom: 300px;
  width: 270px;
  text-align: center;
}

.axis path,
.axis line {
  fill: none;
  stroke-width: 1px;
  stroke: #e7e7e7;
  stroke-opacity: .5;
  shape-rendering: crispEdges;
}

.axis text {
  line-height: 12px;
  font-size: 12px;
  font-family: 'Helvetica';
  fill: #666;
}

.label {
  line-height: 12px;
  font-size: 12px;
  font-family: 'Helvetica';
}

.scatterplot-wrapper circle {
  fill-opacity: .75;
}

.scatterplot-wrapper circle:hover {
  fill-opacity: 1;
}

.legend-wrapper {
  position: fixed;
  z-index: 2;
  left: 15px;
  bottom: 150px;
  width: 270px;
  text-align: center;
}

.legend-wrapper h1 {
  font: 22px 'oswaldregular';
}

#map-canvas {
  width: 900px;
  margin-left: 290px;
}

#info {
  height: 90px;
}

#header-info {
  margin-left: 290px;
}

#feature-info {
  width: 650px;
}

#loading {
  width: 50px;
  margin: 0 auto;
}


/* On mouse hover, lighten state color */

.feature:hover {
  fill: yellow;
  fill-opacity: .35;
}

.bubble.highlight {
  stroke: #3A7FA3;
  fill-opacity: .75;
}

.active .feature {
  fill: yellow;
  opacity: 0.75;
}

.city-label {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  pointer-events: none;
  fill: #444;
 ...

JavaScript

var width = 960,
  height = 700;
var active = d3.select(null);
var zoomScale, zoomTranslate;

// We create a quantile scale to categorize the values in 5 groups.
// The domain is static and has a minimum/maximum of population/density.
// The scale returns text values which can be used for the color CSS
// classes (q0-9, q1-9 ... q8-9)
var quantiles = d3.scale.quantile()
  .range(d3.range(9).map(function(i) {
    return 'q' + i + '-9';
  }));

var svg, g, path, zoom, projection, tooltip, scatterplot;

$(document).ready(function() {
  // Area, population and population density in 2011 by province
  // get from https://www.gso.gov.vn
  // Average population (Thous. pers.)/Area (Km2)/Population density (Person/km2)
  // Load in popuplation data with D3 (or jQuery)
  d3.select('#loading').classed('hidden', false);

  tooltip = d3.select('body').append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0)
    .on('click', stopped, true);

  d3.csv('https://raw.githubusercontent.com/gponster/d3tuts/master/vn-population-2011.csv', function(error, rows) {
    if (error) {
      return console.warn(error);
    }

    loadTopoJson(rows);
  });
});

function loadTopoJson(data) {

  // @see http://www.gadm.org/
  // GADM is a spatial database of the location of the world's
  // administrative areas (or adminstrative boundaries) for use in GIS and similar software.
  // @see http://mapshaper.org/ for simplify
  // A tool for topologically aware shape simplification. Reads and
  // writes Shapefile, GeoJSON and TopoJSON formats.
  d3.json('https://raw.githubusercontent.com/gponster/d3tuts/master/vn-states.json', function(error, json) {

    if (error) {
      return console.warn(error);
    }

    d3.select('#loading').classed('hidden', true);

    // While our data can be stored more efficiently in TopoJSON,
    // we must convert back to GeoJSON for display.
    var features = topojson.feature(json, json.objects.states).features;

    // Merge the ag. data and...