index.js

'use strict';
var d3 = require('d3');
require('d3-multiaxis-zoom')(d3);
var _ = require('lodash');
var utils = require('lightning-client-utils');
var TooltipPlugin = require('d3-tip');
TooltipPlugin(d3);


var margin = {
    top: 30,
    right: 20,
    bottom: 20,
    left: 45
};



var grid = "                              ME\n               WI          VT NH\nWA ID MT ND MN IL MI    NY MA\nOR NV WY SD IA IN OH PA NJ CT RI\nCA UT CO NE MO KY WV VA MD DE\n   AZ NM KS AR TN NC SC\n         OK LA MS AL GA\nHI AK    TX             FL";




var StateFill = function(selector, data, images, opts) {

    var defaults = {
        tooltips: false
    };

    opts = _.defaults(opts || {}, defaults);
    this.opts = opts;

    this.data = data;
    var selectedStates = this.data.selectedStates;

    var states = [];

    grid.split("\n").forEach(function(line, i) {
      var re = /\w+/g, m;
      while (m = re.exec(line)) states.push({
        name: m[0],
        selected: selectedStates.indexOf(m[0]) >= 0,
        x: m.index / 3,
        y: i
      });
    });
    
    if(_.has(this.data, 'xaxis')) {
        margin.bottom = 57;
    }
    if(_.has(this.data, 'yaxis')) {
        margin.left = 70;
    }

    this.width = (opts.width || $(selector).width()) - margin.left - margin.right;
    this.height = Math.min(($(selector).height() || Infinity), (opts.height || (this.width * 0.6))) - margin.top - margin.bottom;

    
    this.selector = selector;
    this.states = states;
    this._init();
};


StateFill.prototype._init = function() {

    var selector = this.selector;
    var width = this.width;
    var height = this.height;
    var data = this.data;
    var states = this.states;

    var svg = d3.select(selector)
        .append('svg:svg')
        .attr('class', 'state-fill')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('svg:g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


    var gridWidth = d3.max(states, function(d) { return d.x; }) + 1,
        gridHeight = d3.max(states, function(d) { return d.y; }) + 1,
        cellSize = Math.min(width / gridWidth, height / gridHeight);

    var state = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .selectAll(".state")
        .data(states)
      .enter().append("g")
        .attr("class", function(d) { return "state" + (d.selected ? " state--selected" : ""); })
        .attr("transform", function(d) { return "translate(" + (d.x - gridWidth / 2) * cellSize + "," + (d.y - gridHeight / 2) * cellSize + ")"; });

    state.append("rect")
        .attr("x", -cellSize / 2)
        .attr("y", -cellSize / 2)
        .attr("width", cellSize - 1)
        .attr("height", cellSize - 1)
        .style('fill', function(d) {
            console.log(d);
            return (d.selected) ? data.fill : '#ddd';
        });

    state.append("text")
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });
};

module.exports = StateFill;

index.scss

.state-fill {

	text {
	  font: 12px sans-serif;
	  text-anchor: middle;	  
	}

	.state--selected text {
	  fill: white;
	}

}

sample-data.json

[{
    "name": "Sample",
    "data": {"selectedStates": ["NY"], "fill": "#ff0000"}
}]