Container width test on d3 map

d3map.js

/* global pym, d3, topojson */

(function() {
  'use strict';

  var pymChild;

  function render(containerWidth) {

    d3.selectAll('svg').remove();
    d3.selectAll('.tooltip').remove();
    d3.selectAll('.legend').remove();

    console.log(containerWidth);

    var width, height, scale, mapPosX, mapPosY;

    if(window.innerWidth > 500) {
      width = 620;
      height = 400;
      scale = 3000;
      mapPosX = 5590;
      mapPosY = 1775;
    } else {
      width = 320;
      height = 250;
      scale = 1820;
      mapPosX = 3390;
      mapPosY = 1080;
    }
    //more breakpoints?

    var svg = d3.select('#map').append('svg')
      .attr('width', width)
      .attr('height', height);

    var tooltip = d3.select('#map').append('div')
      .attr('class', 'tooltip')
      .style('opacity', 0);

    var legend = d3.select('#map').append('div')
      .attr('class', 'legend');

    var projection = d3.geo.mercator()
      .scale(scale)
      .translate([mapPosX, mapPosY]);

    var path = d3.geo.path()
      .projection(projection);

    d3.json('assets/borders.json', function(error, borders) {
      if (error) {
        return console.error(error);
      }

      var counties = topojson.feature(borders, borders.objects.counties);

      svg.append('path')
          .datum(counties)
          .attr('class', 'state')
          .attr('d', path);

      svg.selectAll('.county')
        .data(counties.features)
      .enter().append('path')
        .attr('class', function(d) { return 'county ' + d.id; })
        .attr('fill', function(d) {
          return getColor(d.properties.total);
        })
        .attr('d', path)
        .on('mouseover', function(d) {
          var policeYrs = (d.properties.pdTime === 0 ? 'N/A' : d.properties.pdTime + ' years');
          if(d.properties.ctyTime !== undefined) {
            d3.select('.tooltip').transition().duration(300)
              .style('opacity', 1);
            tooltip.html('<h4>' + d.properties.county + ' County</h4>' +
            '<b>County:</b> ' + d.properties.ctyTime + ' years<br>' +
            '<b>Police:</b> ' + policeYrs + '<br>' +
            '<b>All:</b> ' + d.properties.total + ' years');
            d3.select(this.parentNode.appendChild(this)).transition().duration(100)
              .style({'stroke': '#444', 'stroke-width': 2.5});
          }
        })
        .on('mouseout', function() {
          d3.select('.tooltip').transition().duration(300)
            .style('opacity', 0);
          d3.select(this.parentNode.appendChild(this)).transition().duration(100)
            .style({'stroke': '#ccc', 'stroke-width': 1});
        });

        legend.html('<h4>Average years employed at all local departments</h4><ul>' +
        '<li><i class="q6"></i>10 +</li>' +
        '<li><i class="q5"></i>8 - 10</li>' +
        '<li><i class="q4"></i>6 - 8</li>' +
        '<li><i class="q3"></i>4 - 6</li>' +
        '<li><i class="q2"></i>2 - 4</li>' +
        '<li><i class="q1"></i>< 2 years</li>' +
        '</ul>');


    });

    function getColor(ctyNum) {
      var dRange = [0,2,4,6,8,10];
      return ctyNum >= dRange[5]  ? 'rgb(8,81,156)' :
             ctyNum >= dRange[4]  ? 'rgb(49,130,189)' :
             ctyNum >= dRange[3]  ? 'rgb(107,174,214)' :
             ctyNum >= dRange[2]  ? 'rgb(158,202,225)' :
             ctyNum >= dRange[1]  ? 'rgb(198,219,239)' :
             ctyNum >= dRange[0]  ? 'rgb(239,243,255)' :
                                    '#ccc';
    }

    if (pymChild) {
      pymChild.sendHeight();
    }
  }

  function load() {
    pymChild = new pym.Child({
      renderCallback: render
    });
  }

  window.onload = load;
  window.onresize = load;
})();