Skip to content

Instantly share code, notes, and snippets.

@mathisonian mathisonian/index.js
Created Apr 27, 2015

Embed
What would you like to do?
'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;
.state-fill {
text {
font: 12px sans-serif;
text-anchor: middle;
}
.state--selected text {
fill: white;
}
}
[{
"name": "Sample",
"data": {"selectedStates": ["NY"], "fill": "#ff0000"}
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.