<!--all credit goes to //dexvis.wordpress.com
only very minor modifications were made to change the behavior or the brush-->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#StateMap path {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
}
#StateMap path:hover {
fill: red;
}
#ParChart textarea
{
width:100%;
}
#ParChart .textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:5px;
}
#ParChart path
{
fill: none;
/*stroke: #ccc;*/
stroke-opacity: .9;
shape-rendering: crispEdges;
}
#ParChart .foreground path
{
fill: none;
stroke: steelblue;
stroke-opacity: .9;
}
#ParChart .brush .extent
{
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
#ParChart .axis line, #ParChart .axis path
{
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
#ParChart .axis text
{
text-shadow: 0 1px 0 #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v0.min.js"></script>
<script src="DexUtils.js"></script>
<script src="DexComponent.js"></script>
<script src="VerticalLegend.js"></script>
<script src="ParallelCoordinates.js"></script>
<script src="USStateMap.js"></script>
<center><h1>State Taxes For Q3 2012</h1></center>
<script>
// Create an SVG for our chart.
var svg = d3.select("body").append("svg")
.attr("width", 1500)
.attr("height", 1000)
.append("g")
.attr("transform", "translate(40,20)");
var labels = [
"State", "Property", "Sales", "Alcohol",
"Amuse", "Ins", "Gas", "P-Mut", "Util",
"Tobacco", "Other Sales", "Alc Lic",
"Amuse Lic", "Corp Lic", "Hunt/Fish Lic",
"Vehicle Lic", "Drivers Lic", "Util Lic",
"Biz Lic", "Other Lic", "Income", "Corp", "Death/Gift",
"Doc/Stock", "Severance", "Other", "Total"];
var stateData =
[
["Alabama", 12, 562, 44, 0, 108, 146, 0, 194, 34, 79, 0, 0, 10, 5, 47, 6, 3, 27, 0, 743, 76, 0, 10, 26, 0, 2134],
["Alaska", 0, 0, 9, 0, 14, 10, 0, 0, 19, 2, 0, 0, 0, 10, 28, 0, 0, 5, 3, 0, 242, 0, 0, 744, 0, 1088],
["Arizona", 194, 1193, 15, 0, 109, 199, 0, 5, 81, 25, 1, 0, 17, 6, 44, 8, 5, 30, 0, 893, 176, 0, 0, 7, 0, 3009],
["Arkansas", 109, 713, 12, 8, 23, 120, 1, 0, 61, 59, 1, 0, 2, 8, 38, 4, 19, 31, 0, 659, 96, 0, 8, 16, 6, 1993],
["California", 494, 7431, 68, 0, 528, 1403, 4, 160, 162, 1024, 16, 4, 13, 23, 773, 67, 98, 1055, 1, 11565, 1080, 1, 0, 8, 0, 25977],
["District of Columbia", 934, 261, 1, 0, 2, 6, 0, 36, 10, 16, 0, 0, 0, 0, 9, 2, 0, 7, 12, 369, 84, 10, 99, 0, 0, 1857],
["Florida", 0, 5031, 103, 34, 5, 828, 3, 714, 96, 158, 2, 0, 25, 3, 272, 84, 14, 48, 2, 0, 440, 0, 433, 11, 0, 8308],
// This is a test row...
//["Florida",0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
["Georgia", 2, 1315, 37, 0, 95, 238, 0, 0, 54, 0, 0, 4, 12, 6, 81, 16, 0, 18, 2, 2276, 105, 0, 0, 0, 0, 4262],
["Illinois", 11, 1994, 74, 168, 66, 330, 2, 389, 156, 435, 3, 5, 74, 10, 425, 25, 9, 83, 5, 3620, 562, 97, 13, 0, 0, 8555],
["Indiana", 0, 1726, 12, 168, 56, 203, 1, 5, 111, 3, 3, 1, 2, 3, 24, 44, 0, 8, 2, 1180, 238, 41, 0, 0, 0, 3831],
["Kansas", 5, 729, 30, 0, 4, 113, 0, 0, 25, 10, 1, 0, 5, 3, 38, 6, 1, 0, 1, 704, 64, 1, 0, 29, 0, 1768],
["Kentucky", 66, 761, 30, 0, 31, 207, 1, 17, 66, 164, 2, 0, -2, 7, 39, 4, 0, 2, 1, 902, 160, 9, 1, 74, 0, 2543],
["Louisiana", 12, 689, 14, 176, 175, 175, 1, 2, 47, 17, 0, 0, 25, 8, 7, 2, 2, 17, 1, 697, 78, 0, 0, 201, 0, 2346],
["Maine", 21, 210, 5, 14, 13, 46, 1, 12, 37, 14, 1, 0, 1, 4, 25, 3, 0, 24, 2, 312, 37, 6, 3, 0, 0, 792],
["Maryland", 486, 685, 5, 2, 113, 85, 0, 33, 83, 317, 0, 0, 9, 5, 107, 7, 0, 36, 0, 1109, 245, 48, 34, 0, 10, 3419],
["Massachusetts", 1, 1323, 22, 1, 90, 176, 0, 5, 143, 114, 0, 0, 2, 1, 67, 17, 0, 57, 21, 2908, 495, 73, 40, 0, 28, 5584],
["Michigan", 507, 2923, 44, 39, 137, 439, 1, 12, 330, 350, -2, 0, 4, 18, 224, 16, 3, 58, 48, 2454, 195, 0, 79, 20, 0, 7899],
["Minnesota", 16, 1239, 15, 9, 76, 240, 0, 0, 85, 673, 0, 1, 2, 13, 150, 11, 0, 73, 17, 2015, 251, 38, 26, 10, 0, 4961],
["Mississippi", 0, 645, 11, 33, 26, 108, 0, 3, 39, 26, 1, 4, 24, 2, 36, 8, 9, 19, 9, 361, 67, 0, 0, 25, 0, 1456],
["Missouri", 1, 808, 9, 101, 58, 183, 0, 0, 26, 34, 0, 0, 10, 5, 59, 5, 6, 37, 19, 1206, 70, 0, 1, 0, 0, 2637],
["Montana", 12, 0, 7, 14, 15, 41, 0, 12, 24, 9, 0, 4, 0, 9, 25, 2, 0, 14, 1, 232, 42, 0, 0, 69, 0, 533],
["Nebraska", 0, 379, 8, 1, 18, 90, 0, 14, 17, 43, 0, 0, 0, 3, 18, 1, 0, 3, 0, 475, 50, 0, 2, 1, 0, 1122],
["Nevada", 11, 286, 3, 179, 2, 25, 0, 4, 10, 3, 0, 3, 15, 1, 29, 5, 0, 42, 0, 0, 0, 0, 2, 0, 0, 618],
["New Hampshire", 7, 0, 4, 0, 0, 36, 0, 20, 56, 93, 1, 0, 0, 2, 22, 3, 2, 29, 0, 15, 124, 0, 26, 0, 0, 441],
["New Jersey", 0, 1307, 21, 62, 15, 90, 0, 98, 184, 110, 1, 21, 49, 1, 148, 13, 0, 112, 0, 1807, 443, 137, 56, 0, 0, 4676],
["New Mexico", 17, 152, 7, 5, 3, 17, 0, 3, 8, 25, 0, 0, 4, 6, 3, 1, 0, 5, 19, 78, 3, 0, 0, 106, 1, 463],
["North Dakota", 0, 335, 2, 1, 8, 57, 0, 3, 8, 37, 0, 0, 0, 2, 22, 1, 0, 14, 0, 98, 40, 0, 0, 513, 0, 1142],
["Ohio", 0, 1900, 26, 0, 9, 447, 2, 292, 162, 2, 12, 105, 413, 5, 138, 63, 1, 124, 3, 2492, 47, 2, 0, 4, 0, 6249],
["Oregon", 8, 0, 5, 0, 20, 181, 1, 2, 65, 0, 1, 0, 7, 13, 163, 6, 2, 65, 1, 1518, 114, 26, 1, 2, 0, 2200],
["Pennsylvania", 4, 2327, 79, 365, 5, 539, 3, 36, 287, 30, 4, 6, 129, 31, 198, 16, 23, 218, 3, 2342, 401, 181, 105, 0, 4, 7337],
["Rhode Island", 0, 233, 3, 0, 2, 25, 0, 3, 37, 138, 0, 0, 1, 0, 14, 1, 0, 9, 0, 267, 21, 7, 2, 0, 2, 767],
["South Carolina", 0, 517, 28, 9, 37, 135, 0, 25, 4, 91, 3, 0, 13, 9, 21, 9, 0, 36, 3, 529, 53, 0, 5, 0, 0, 1526],
["Vermont", 10, 88, 6, 0, 8, 27, 0, 0, 20, 91, 0, 0, 0, 1, 17, 2, 0, 2, 0, 147, 24, 7, 2, 0, 1, 456],
["Virginia", 0, 794, 24, 0, 107, 293, 0, 27, 47, 170, 3, 0, 19, 7, 112, 17, 0, 58, 1, 2580, 162, 0, 91, 0, 25, 4535],
["Washington", 575, 2788, 62, 0, 106, 260, 1, 82, 122, 109, 3, 2, 7, 10, 115, 19, 1, 73, 109, 0, 0, 22, 129, 7, 0, 4602],
["West Virginia", 2, 314, 5, 17, 36, 112, 1, 37, 27, 120, 0, 1, 1, 0, 1, 27, 0, 3, 1, 434, 68, 0, 2, 116, 0, 1326],
["Wisconsin", 0, 762, 9, 0, 22, 183, 0, 41, 118, 114, 0, 0, 4, 15, 96, 11, 0, 74, 1, 1535, 236, 0, 8, 0, 2, 3231],
["Wyoming", 14, 191, 1, 0, 4, 16, 0, 2, 7, 0, 0, 0, 3, 20, 20, 1, 0, 6, 0, 0, 0, 0, 0, 0, 1, 287],
["Colorado", 0, 617, 10, 16, 46, 166, 0, 3, 52, 8, 2, 0, 4, 16, 121, 8, 0, 9, 0, 1220, 155, 0, 0, 33, 0, 2489],
["Connecticut", 0, 482, 8, 99, 39, 84, 2, 5, 89, 8, 2, 0, 7, 1, 49, 11, 0, 28, 0, 978, 65, 31, 24, 0, 1, 2014],
["Hawaii", 0, 739, 11, 0, 32, 24, 0, 42, 29, 39, 0, 0, 0, 0, 36, 0, 10, 5, 0, 435, 26, 1, 12, 0, 0, 1443],
["Idaho", 0, 350, 2, 0, 12, 64, 0, 1, 13, 3, 0, 0, 0, 10, 28, 3, 8, 11, 1, 288, 39, 0, 0, 2, 1, 837],
["Iowa", 0, 436, 3, 56, 47, 41, 1, 0, 51, 0, 3, 6, 5, 4, 120, 3, 4, 28, 0, 572, 38, 5, 2, 0, 0, 1428],
["New York", 0, 3055, 67, 0, 285, 420, 6, 214, 409, 1289, 14, 0, 18, 28, 317, 32, 3, 57, 0, 8737, 922, 258, 227, 0, 306, 16666],
["North Carolina", 0, 1446, 86, 4, 8, 496, 0, 104, 74, 163, 1, 0, 74, 5, 143, 29, 0, 45, 2, 2688, 294, 18, 11, 0, 0, 5693],
["Oklahoma", 0, 642, 30, 6, 55, 106, 0, 11, 75, 4, 0, 1, 27, 3, 174, 4, 0, 0, 9, 704, 123, 0, 4, 111, 17, 2105],
["South Dakota", 0, 207, 4, 0, 15, 42, 0, 2, 17, 18, 0, 0, 1, 8, 17, 1, 0, 20, 9, 0, 11, 0, 0, 3, 0, 377],
["Tennessee", 0, 1759, 31, 0, 150, 213, 0, 10, 71, 37, 3, 0, 143, 4, 63, 11, 0, 38, 1, 4, 256, 26, 42, 1, 9, 2874],
["Texas", 0, 6392, 239, 8, 627, 818, 2, 191, 371, 1469, 16, 3, 242, 44, 484, 67, 4, 144, 40, 0, 0, 29, 0, 855, 0, 12044],
["Utah", 0, 494, 10, 0, 26, 86, 0, 6, 32, 42, 0, 0, 0, 7, 41, 4, 0, 12, 0, 592, 68, 0, 0, 20, 0, 1441],
["Delaware", 0, 0, 5, 0, 15, 24, 0, 14, 30, 20, 0, 0, 112, 1, 13, 2, 0, 84, 16, 273, 63, 2, 76, 0, 1, 749]
];
//get each tax as a percent of total
stateData.forEach(function (d) { d.slice(1,d.length).forEach(function (dd,ii) { d[ii+1] = dd/d[d.length-1] } )})
var stateMap = dex.csv.createRowMap(labels, stateData, 0);
// Configure a chart.
var map = new USStateMap(
{
'parent': svg,
'id': 'StateMap',
'xoffset': 150
}
);
var pcChart = new ParallelCoordinates(
{
'parent': svg,
'id': "ParChart",
'columnNames': labels,
'data': [],
'normalize': false,
'opacity': 100,
'xoffset': 20,
'yoffset': 520,
'width': 1200,
'height': 400,
'axisLabels':
{
'stagger': true,
'yoffset': -9,
'staggeredYOffset': -25
}
}
);
var selectedStates = {};
map.addListener("selectState", pcChart, function (chartEvent) {
console.dir("Selected: " + chartEvent.state);
if (stateMap[chartEvent.state] != null) {
d3.selectAll("#ParChart").remove();
selectedStates[chartEvent.state] = true;
var pcData = []
for (var state in selectedStates) {
//pcData.push(stateMap[state]);
//to eliminate Total
pcData.push(stateMap[state].slice(0,stateMap[state].length-1));
}
pcChart
.attr("normalize", true)
.attr("data", pcData)
.attr("height", 200)
.update();
}
});
map.addListener("deselectState", pcChart, function (chartEvent) {
console.log("UNSELECTED: " + chartEvent.state);
console.dir(selectedStates)
delete selectedStates[chartEvent.state];
d3.selectAll("#ParChart").remove();
var pcData = []
for (var state in selectedStates) {
pcData.push(stateMap[state]);
}
pcChart
.attr("normalize", pcData.length <= 1)
.attr("data", pcData)
.attr("height", 200)
.update();
});
pcChart.render();
map.render();
</script>// forked from http://dexvis.com/vis/blog/2013/mar/reusable6/html/ParallelCoordinates3.html
function DexComponent(userConfig, defaultConfig)
{
// This holds our event registry.
this.registry = {};
this.debug = false;
//console.log("Instantiating dex component...");
// Instantiate from another component
if (userConfig instanceof DexComponent)
{
this.config = getConfig(userConfig.config, defaultConfig);
}
else
{
this.config = getConfig(userConfig, defaultConfig);
//console.dir(this.config);
}
}
DexComponent.prototype.attr = function(name, value)
{
if (arguments.length == 1)
{
return this.config[name];
}
else if (arguments.length == 2)
{
this.config[name] = value;
}
return this;
};
DexComponent.prototype.dump = function(message)
{
console.log("========================");
if (arguments.length == 1)
{
console.log(message);
console.log("========================");
}
console.log("=== CONFIG ===");
console.dir(this.config);
console.log("=== REGISTRY ===");
console.dir(this.registry);
};
DexComponent.prototype.addListener = function(eventType, target, method)
{
var targets;
if (this.debug)
{
console.log("REGISTERING TARGET: " + eventType + "="+ target);
}
if (!this.registry.hasOwnProperty(eventType))
{
this.registry[eventType] = [];
}
this.registry[eventType].push({ target : target, method : method });
//console.log("this.registry");
//console.dir(eventthis.registry);
};
DexComponent.prototype.notify = function(event)
{
var targets;
if (this.debug)
{
console.log("notify: " + event.type);
}
if (!this.registry.hasOwnProperty(event.type))
{
return;
}
event.source = this;
targets = this.registry[event.type];
//console.log("TARGETS: " + targets.length);
//console.dir(targets);
for (var i=0; i<targets.length; i++)
{
//console.dir("Calling Target: " + targets[i]["target"]);
targets[i]["method"](event, targets[i]["target"]);
}
};
DexComponent.prototype.render = function()
{
console.log("Rendering component...");
};
DexComponent.prototype.update = function()
{
console.log("Updating component...");
};//http://dexvis.com/vis/blog/2013/mar/reusable6/html/ParallelCoordinates3.html
var dex =
{
version : "0.6",
matrix : {},
datagen : {},
array : {},
csv : {}
};
dex.datagen.randomMatrix = function(spec)
{
//{"rows":10, "columns": 4, "min", 0, "max":100})
var matrix = [];
var range = spec.max - spec.min;
for (var ri = 0; ri<spec.rows; ri++)
{
var row = [];
for (var ci=0; ci<spec.columns;ci++)
{
row.push(Math.random() * range + spec.min);
}
matrix.push(row);
}
return matrix;
}
function getConfig(userConfig, defaultConfig)
{
var config = clone(defaultConfig);
//console.dir(config);
//console.dir(defaultConfig);
// If we have parameters, override the defaults.
if (userConfig !== 'undefined')
{
for (var option in userConfig)
{
config[option] = userConfig[option];
}
}
//console.dir(config);
return config;
}
dex.array.slice = function(array, rows)
{
var slice = [];
for (var i = 0; i<rows.length; i++)
{
slice.push(array[rows[i]]);
}
return slice;
}
dex.matrix.slice = function(matrix, columns, rows)
{
var slice = [];
if (arguments.length === 3)
{
for (var ri=0; ri < rows.length; ri++)
{
slice.push(dex.array.slice(matrix[rows[ri]]));
}
}
else
{
for (var ri=0; ri < matrix.length; ri++)
{
//console.log("RI: " + ri);
//console.dir(dex.array.slice(matrix[ri], columns));
slice.push(dex.array.slice(matrix[ri], columns));
}
}
return slice;
}
dex.matrix.flatten = function(matrix)
{
var array = [];
for (var ri=0; ri<matrix.length; ri++)
{
for (var ci=0; ci<matrix[ri].length;ci++)
{
array.push(matrix[ri][ci]);
}
}
return array;
}
dex.matrix.extent = function(data, indices)
{
var values = data;
if (arguments.length === 2)
{
values = dex.matrix.slice(data, indices);
return d3.extent(dex.matrix.flatten(values));
}
}
// Combine each column in matrix1 with each column in matrix2.
dex.matrix.combine = function(matrix1, matrix2)
{
var result = [];
// Iterate over the rows in matrix1:
for (var ri=0; ri<matrix1.length; ri++)
{
// Iterate over the columns in matrix2:
for (var oci=0; oci<matrix1[ri].length; oci++)
{
// Iterate over the columns in matrix2:
for (var ici=0; ici<matrix2[ri].length; ici++)
{
result.push([matrix1[ri][oci], matrix2[ri][ici], oci, ici]);
}
}
}
return result;
}
dex.csv.createMap = function(header, data, keyIndex)
{
var map = {};
for (var ri=0; ri<data.length; ri++)
{
if (data[ri].length == header.length)
{
var rowMap = {};
for (var ci=0; ci<header.length; ci++)
{
rowMap[header[ci]] = data[ri][ci];
}
map[data[ri][keyIndex]] = rowMap;
}
}
return map;
};
dex.csv.toJson = function(columnNames, data)
{
var jsonData = [];
for (var ri=0; ri<data.length; ri++)
{
var jsonRow = {};
for (var ci=0; ci<data[ri].length; ci++)
{
jsonRow[columnNames[ci]] = data[ri][ci];
}
jsonData.push(jsonRow);
}
return jsonData;
};
dex.csv.createRowMap = function(header, data, keyIndex)
{
var map = {};
for (var ri=0; ri<data.length; ri++)
{
if (data[ri].length == header.length)
{
map[data[ri][keyIndex]] = data[ri];
}
}
return map;
}
function getExtent(array, indices)
{
var values = getArrayValues(array, indices);
var max = Math.max.apply(null, values);
var min = Math.min.apply(null, values);
console.log("EXTENT:");
console.dir(values);
console.dir([min, max]);
return [ min, max ];
}
function clone(obj)
{
if (obj === null || typeof obj !== 'object')
{
return obj;
}
var temp = obj.constructor();
// give temp the original obj's constructor
for (var key in obj)
{
temp[key] = clone(obj[key]);
}
return temp;
}
/* Dex Utilities */
function colorToHex(color)
{
if (color.substr(0, 1) === '#')
{
return color;
}
//console.log("COLOR: " + color)
var digits = /rgb\((\d+),(\d+),(\d+)\)/.exec(color);
//console.log("DIGITS: " + digits);
var red = parseInt(digits[1]);
var green = parseInt(digits[2]);
var blue = parseInt(digits[3]);
var rgb = blue | (green << 8) | (red << 16);
return '#' + rgb.toString(16);
};
function isNumber(n)
{
return !isNaN(parseFloat(n)) && isFinite(n);
}
function getHeader(data)
{
return data[0];
}
function getColumn(data, columnNumber)
{
var values = [];
for (var i=1; i<data.length; i++)
{
values.push(data[i][columnNumber]);
}
return values;
}
dex.csv.getNumericColumnNames = function(columnNames, data)
{
var possibleNumeric = {};
var i, j;
var numericColumns = [];
for (i=0; i<columnNames.length; i++)
{
possibleNumeric[columnNames[i]] = true;
}
// Iterate thru the data, skip the header.
for (ri=0; ri<data.length; ri++)
{
for (ci=0; ci<data[ri].length && ci<columnNames.length; ci++)
{
if (possibleNumeric[columnNames[ci]] && !isNumber(data[ri][ci]))
{
possibleNumeric[columnNames[ci]] = false;
}
}
}
for (ci=0; ci<columnNames.length; ci++)
{
if (possibleNumeric[columnNames[ci]])
{
numericColumns.push(columnNames[ci]);
}
}
return numericColumns;
}
function getNumericIndices(data)
{
var header = getHeader(data);
var possibleNumeric = {};
var i, j;
var numericIndices = [];
for (i=0; i<header.length; i++)
{
possibleNumeric[header[i]] = true;
}
// Iterate thru the data, skip the header.
for (i=1; i<data.length; i++)
{
for (j=0; j<data[i].length && j<header.length; j++)
{
if (possibleNumeric[header[j]] && !isNumber(data[i][j]))
{
possibleNumeric[header[j]] = false;
}
}
}
for (i=0; i<header.length; i++)
{
if (possibleNumeric[header[i]])
{
numericIndices.push(i);
}
}
return numericIndices;
}
function isNumericColumn(data, columnNum)
{
for (var i=1; i<data.length; i++)
{
if (!isNumber(data[i][columnNum]))
{
return false;
}
}
return true;
}
function getMax(data, columnNum)
{
var maxValue = data[1][columnNum];
if (isNumericColumn(data, columnNum))
{
maxValue = parseFloat(data[1][columnNum]);
for (var i=2; i<data.length; i++)
{
if (maxValue < parseFloat(data[i][columnNum]))
{
maxValue = parseFloat(data[i][columnNum]);
}
}
}
else
{
for (var i=2; i<data.length; i++)
{
if (maxValue < data[i][columnNum])
{
maxValue = data[i][columnNum];
}
}
}
return maxValue;
}
function getMin(data, columnNum)
{
var minValue = data[1][columnNum];
if (isNumericColumn(data, columnNum))
{
minValue = parseFloat(data[1][columnNum]);
for (var i=2; i<data.length; i++)
{
if (minValue > parseFloat(data[i][columnNum]))
{
minValue = parseFloat(data[i][columnNum]);
}
}
}
else
{
for (var i=2; i<data.length; i++)
{
if (minValue > data[i][columnNum])
{
minValue = data[i][columnNum];
}
}
}
return minValue;
}
function getJsonFromCsv(data)
{
var header = getHeader(data);
var i,j;
var json = [];
for (i=1;i<data.length;i++)
{
var row = {};
for (j=0;j<data[i].length && j<header.length;j++)
{
row[header[j]] = data[i][j];
}
json.push(row);
}
return json;
}
function getFill(colorScheme, numColors)
{
if (colorScheme == "1")
{
return d3.scale.category10();
}
else if (colorScheme == "2")
{
return d3.scale.category20();
}
else if (colorScheme == "3")
{
return d3.scale.category20b();
}
else if (colorScheme == "4")
{
return d3.scale.category20c();
}
else if (colorScheme == "HiContrast")
{
return d3.scale.ordinal().range(colorbrewer[colorScheme][9]);
}
else if (colorScheme in colorbrewer)
{
//console.log("LENGTH: " + len);
var effColors = Math.pow(2, Math.ceil(Math.log(numColors) / Math.log(2)));
//console.log("EFF LENGTH: " + len);
// Find the best cmap:
if (effColors > 128)
{
effColors = 256;
}
for (var c=effColors; c >= 2; c--)
{
if (colorbrewer[colorScheme][c])
{
return d3.scale.ordinal().range(colorbrewer[colorScheme][c]);
}
}
for (var c=effColors; c <= 256; c++)
{
if (colorbrewer[colorScheme][c])
{
return d3.scale.ordinal().range(colorbrewer[colorScheme][c]);
}
}
return d3.scale.category20();
}
else
{
return d3.scale.category20();
}
}
function OrdinalHorizontalLegend(config)
{
// Default parameters.
var p =
{
labels : [ "A", "B", "C" ],
parent : null,
xoffset : 10,
yoffset : 20,
cellWidth : 30,
cellHeight : 20,
tickLength : 25,
caption : "Legend",
color : d3.scale.category20c(),
captionFontSize : 14,
captionXOffset : 0,
captionYOffset : -6
};
// If we have parameters, override the defaults.
if (config !== 'undefined')
{
for (var prop in config)
{
p[prop] = config[prop];
}
}
function chart()
{
// Create our x scale
var x = d3.scale.ordinal()
.domain(p.labels)
.range(d3.range(p.labels.length).map(function(i) { return i * p.cellWidth; }));
// Create the x axis.
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(p.tickLength)
.tickPadding(10)
.tickValues(p.labels)
.tickFormat(function(d) { return d; });
// Append a graphics node to the supplied svg node.
var g = p.parent.append("g")
.attr("class", "key")
.attr("transform", "translate(" + p.xoffset + "," + p.yoffset + ")");
// Draw a colored rectangle for each ordinal range.
g.selectAll("rect")
.data(p.labels)
.enter().append("rect")
.attr("height", p.cellHeight)
.attr("x", function(d, i) { return x(i); })
.attr("width", function(d) { return p.cellWidth; })
.style("fill", function(d, i)
{
return p.color(i);
});
// Add the caption.
g.call(xAxis).append("text")
.attr("class", "caption")
.attr("y", p.captionYOffset)
.attr("x", p.captionXOffset)
.text(p.caption)
.style("font-size", p.captionFontSize);
};
// Use this routine to retrieve and update attributes.
chart.attr = function(name, value)
{
if (arguments.length == 1)
{
return p[name];
}
else if (arguments.length == 2)
{
p[name] = value;
}
return chart;
}
chart.update = function()
{
}
return chart;
}
function VerticalLegend(config)
{
// Default parameters.
var p =
{
labels : [ "A", "B", "C" ],
parent : null,
xoffset : 50,
yoffset : 30,
cellWidth : 30,
cellHeight : 20,
tickLength : 5,
caption : "Legend",
color : d3.scale.category20c(),
captionFontSize : 14,
captionXOffset : -30,
captionYOffset : -20
};
// If we have parameters, override the defaults.
if (config !== 'undefined')
{
for (var prop in config)
{
p[prop] = config[prop];
}
}
function chart()
{
// Create our x scale
var y = d3.scale.ordinal()
.domain(p.labels)
.range(d3.range(p.labels.length).map(function(i) { return i * p.cellHeight; }));
// Create the x axis.
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(p.tickLength)
.tickPadding(10)
.tickValues(p.labels)
.tickFormat(function(d) { return d; });
// Append a graphics node to the supplied svg node.
var g = p.parent.append("g")
.attr("class", "key")
.attr("transform", "translate(" + p.xoffset + "," + p.yoffset + ")");
// Draw a colored rectangle for each ordinal range.
g.selectAll("rect")
.data(p.labels)
.enter().append("rect")
.attr("height", p.cellHeight)
.attr("y", function(d, i) { return y(i); })
.attr("width", p.cellWidth)
.style("fill", function(d, i)
{
return p.color(i);
});
// Add the caption.
g.call(yAxis).append("text")
.attr("class", "caption")
.attr("y", p.captionYOffset)
.attr("x", p.captionXOffset)
.text(p.caption)
.style("font-size", p.captionFontSize);
};
// Use this routine to retrieve and update attributes.
chart.attr = function(name, value)
{
if (arguments.length == 1)
{
return p[name];
}
else if (arguments.length == 2)
{
p[name] = value;
}
return chart;
}
chart.update = function()
{
}
return chart;
}
function csvToMapArray(header, data)
{
var mapArray = [];
for (var i=0; i<data.length; i++)
{
var row = {};
for (var j=0; j<header.length; j++)
{
row[header[j]] = data[i][j]
}
mapArray.push(row);
}
return mapArray;
}//thanks http://dexvis.com/vis/blog/2013/mar/reusable6/html/ParallelCoordinates3.html and http://syntagmatic.github.com/parallel-coordinates/
ParallelCoordinates.prototype = new DexComponent();
ParallelCoordinates.constructor = ParallelCoordinates;
function ParallelCoordinates(userConfig)
{
DexComponent.call(this, userConfig,
{
'id' : "ParallelCoordinates",
'class' : "ParallelCoordinates",
'parent' : null,
'height' : 400,
'width' : 600,
'opacity' : 100,
'strokeWidth' : 4,
'axisFontSize' : 16,
'fontSize' : 12,
'color' : d3.scale.category20(),
'title' : '',
'columnNames' : [ "X", "Y" ],
'data' : [[0,0],[1,1],[2,4],[3,9],[4,16]],
'rows' : 0,
'columns' : [],
'xoffset' : 0,
'yoffset' : 0,
'normalize' : false,
'axisLabels' :
{
'stagger' : false,
'yoffset' : -9,
'staggeredYOffset' : -18
}
});
// Ugly, but my JavaScript is weak. When in handler functions
// this seems to be the only way to get linked back to the
// this.x variables.
this.chart = this;
}
ParallelCoordinates.prototype.render = function()
{
this.update();
};
ParallelCoordinates.prototype.update = function () {
// If we need to call super:
//DexComponent.prototype.update.call(this);
var chart = this.chart;
var config = this.config;
var numericColumns =
dex.csv.getNumericColumnNames(config.columnNames, config.data);
var jsonData = dex.csv.toJson(config.columnNames, config.data);
var x = d3.scale.ordinal()
.rangePoints([0, config.width], 1);
var y = {};
var line = d3.svg.line();
var axis = d3.svg.axis().orient("left");
var background;
var foreground;
var chartContainer = config.parent.append("g")
.attr("id", config["id"])
.attr("class", config["class"])
.attr("transform",
"translate(" + config.xoffset + "," + config.yoffset + ")");
// Extract the list of dimensions and create a scale for each.
//x.domain(dimensions = d3.keys(cars[0]).filter(function(d)
//{
// return d != "name" && (y[d] = d3.scale.linear()
// .domain(d3.extent(cars, function(p) { return +p[d]; }))
// .range([height, 0]));
//}));
var allExtents = []
numericColumns.forEach(function (d) {
allExtents = allExtents.concat(d3.extent(jsonData, function (p) { return +p[d]; }));
});
var normalizedExtent = d3.extent(allExtents);
//console.log("NE: " + normalizedExtent);
// REM: Figure out how to switch over to consistent extends. Snapping.
x.domain(dimensions = d3.keys(jsonData[0]).filter(function (d) {
if (d === "name") return false;
if (contains(numericColumns, d)) {
var extent = d3.extent(jsonData, function (p) { return +p[d]; });
if (config.normalize) {
extent = normalizedExtent;
}
y[d] = d3.scale.linear()
.domain(extent)
.range([config.height, 0]);
allExtents.concat(extent);
}
else {
y[d] = d3.scale.ordinal()
.domain(jsonData.map(function (p) { return p[d]; }))
.rangePoints([config.height, 0]);
}
return true;
}));
// Add grey background lines for context.
background = chartContainer.append("g")
.attr("class", "background")
.selectAll("path")
.data(jsonData)
.enter().append("path")
.attr("d", path)
.attr("id", "fillpath");
foreground = chartContainer.append("g")
.attr("fill", "none")
.attr("stroke-opacity", config.opacity / 100.0)
.selectAll("path")
.data(jsonData)
.enter().append("path")
.attr("d", path)
.attr("stroke", function (d, i) { return config.color(i); })
.attr("stroke-width", config.strokeWidth)
.attr("title", function (d, i) {
var info = "<table border=\"1\">";
for (var key in jsonData[i]) {
info += "<tr><td><b><i>" + key + "</i></b></td><td>" + jsonData[i][key] + "</td></tr>"
}
return info + "</table>";
})
.on("mouseover", function () {
d3.select(this)
.style("stroke-width", config.strokeWidth + (config.strokeWidth / 3))
.style("stroke-opacity", config.opacity / 100.0);
})
.on("mouseout", function () {
d3.select(this)
.style("stroke-width", config.strokeWidth)
.style("stroke-opacity", config.opacity / 100);
});
// Original random colors:
// .attr("stroke", function(d) { return '#'+Math.floor(Math.random()*16777215).toString(16); });
// Add a group element for each dimension.
var g = chartContainer.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("font-size", config.fontSize)
.attr("class", "dimension")
.attr("transform", function (d) { return "translate(" + x(d) + ")"; });
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function (d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.attr("text-anchor", "middle")
.attr("y", function (d, i) {
if (config.axisLabels.stagger) {
if (i % 2 == 1) {
return config.axisLabels.staggeredYOffset;
}
}
return config.axisLabels.yoffset;
})
.attr("font-size", config.axisFontSize)
.text(String);
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function (d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function (p) { return [x(p), y[p](d[p])]; }));
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function (p) { return !y[p].brush.empty(); }),
extents = actives.map(function (p) { return y[p].brush.extent(); });
foreground.style("display", function (d) {
return actives.every(
function (p, i) {
var displayYesOrNo;
// Categorical
if (!contains(numericColumns, p)) {
displayYesOrNo = extents[i][0] <= y[p](d[p]) && y[p](d[p]) <= extents[i][1];
}
// Numeric
else {
displayYesOrNo = extents[i][0] <= d[p] && d[p] <= extents[i][1];
}
//probably not the best place for it but loop through all the states and change the color to green if selected
allstates = d3.select("#StateMap").selectAll("path")
allstates.data().forEach(function (dd, ii) {
dd.id == d.State ? d3.select(allstates[0][ii]).attr("opacity", displayYesOrNo ? 1 : 0.3) : null
});
return displayYesOrNo;
}) ? null : "none";
});
actives.length == 0 ? d3.select("#StateMap").selectAll("path").attr("opacity",1) : null;
}
};
function contains(a, obj)
{
var i = a.length;
while (i--)
{
if (a[i] === obj)
{
return true;
}
}
return false;
}
VerticalLegend.prototype = new DexComponent();
VerticalLegend.constructor = VerticalLegend;
function VerticalLegend(userConfig)
{
DexComponent.call(this, userConfig,
{
'labels' : [ "A", "B", "C" ],
'id' : "VerticalLegend",
'class' : "VerticalLegend",
'parent' : null,
'xoffset' : 50,
'yoffset' : 30,
'cellWidth' : 30,
'cellHeight' : 20,
'tickLength' : 5,
'caption' : "Legend",
'color' : d3.scale.category20c(),
'captionFontSize' : 14,
'captionXOffset' : -30,
'captionYOffset' : -20,
});
// Ugly, but my JavaScript is weak. When in handler functions
// this seems to be the only way to get linked back to the
// this.x variables.
this.chart = this;
}
VerticalLegend.prototype.render = function()
{
this.update();
};
VerticalLegend.prototype.update = function()
{
// If we need to call super:
//DexComponent.prototype.update.call(this);
var chart = this.chart;
var config = this.config;
// Create our x scale
var y = d3.scale.ordinal()
.domain(config.labels)
.range(d3.range(config.labels.length).map(function(i) { return i * config.cellHeight; }));
// Create the x axis.
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(config.tickLength)
.tickPadding(10)
.tickValues(config.labels)
.tickFormat(function(d) { return d; });
// Append a graphics node to the supplied svg node.
var chartContainer = config.parent.append("g")
.attr("id", config["id"])
.attr("class", config["class"])
.attr("transform",
"translate(" + config.xoffset + "," + config.yoffset + ")");
// Draw a colored rectangle for each ordinal range.
chartContainer.selectAll("rect")
.data(config.labels)
.enter().append("rect")
.attr("height", config.cellHeight)
.attr("y", function(d, i) { return y(i); })
.attr("width", config.cellWidth)
.style("fill", function(d, i)
{
return config.color(i);
});
// Add the caption.
chartContainer.call(yAxis).append("text")
.attr("class", "caption")
.attr("y", config.captionYOffset)
.attr("x", config.captionXOffset)
.text(config.caption)
.style("font-size", config.captionFontSize);
};
topojson=function(){function t(t,e){function n(e){var n=t.arcs[e],r=n[0],o=[0,0];return n.forEach(function(t){o[0]+=t[0],o[1]+=t[1]}),[r,o]}var r={},o={},a={};e.forEach(function(t){var e=n(t);(r[e[0]]||(r[e[0]]=[])).push(t),(r[e[1]]||(r[e[1]]=[])).push(~t)}),e.forEach(function(t){var e,r,i=n(t),c=i[0],s=i[1];if(e=a[c])if(delete a[e.end],e.push(t),e.end=s,r=o[s]){delete o[r.start];var u=r===e?e:e.concat(r);o[u.start=e.start]=a[u.end=r.end]=u}else if(r=a[s]){delete o[r.start],delete a[r.end];var u=e.concat(r.map(function(t){return~t}).reverse());o[u.start=e.start]=a[u.end=r.start]=u}else o[e.start]=a[e.end]=e;else if(e=o[s])if(delete o[e.start],e.unshift(t),e.start=c,r=a[c]){delete a[r.end];var f=r===e?e:r.concat(e);o[f.start=r.start]=a[f.end=e.end]=f}else if(r=o[c]){delete o[r.start],delete a[r.end];var f=r.map(function(t){return~t}).reverse().concat(e);o[f.start=r.end]=a[f.end=e.end]=f}else o[e.start]=a[e.end]=e;else if(e=o[c])if(delete o[e.start],e.unshift(~t),e.start=s,r=a[s]){delete a[r.end];var f=r===e?e:r.concat(e);o[f.start=r.start]=a[f.end=e.end]=f}else if(r=o[s]){delete o[r.start],delete a[r.end];var f=r.map(function(t){return~t}).reverse().concat(e);o[f.start=r.end]=a[f.end=e.end]=f}else o[e.start]=a[e.end]=e;else if(e=a[s])if(delete a[e.end],e.push(~t),e.end=c,r=a[c]){delete o[r.start];var u=r===e?e:e.concat(r);o[u.start=e.start]=a[u.end=r.end]=u}else if(r=o[c]){delete o[r.start],delete a[r.end];var u=e.concat(r.map(function(t){return~t}).reverse());o[u.start=e.start]=a[u.end=r.start]=u}else o[e.start]=a[e.end]=e;else e=[t],o[e.start=c]=a[e.end=s]=e});var i=[];for(var c in a)i.push(a[c]);return i}function e(e,r,o){function a(t){0>t&&(t=~t),(l[t]||(l[t]=[])).push(f)}function i(t){t.forEach(a)}function c(t){t.forEach(i)}function s(t){"GeometryCollection"===t.type?t.geometries.forEach(s):t.type in d&&(f=t,d[t.type](t.arcs))}var u=[];if(arguments.length>1){var f,l=[],d={LineString:i,MultiLineString:c,Polygon:c,MultiPolygon:function(t){t.forEach(c)}};s(r),l.forEach(3>arguments.length?function(t,e){u.push([e])}:function(t,e){o(t[0],t[t.length-1])&&u.push([e])})}else for(var p=0,h=e.arcs.length;h>p;++p)u.push([p]);return n(e,{type:"MultiLineString",arcs:t(e,u)})}function n(t,e){function n(t,e){e.length&&e.pop();for(var n,o=h[0>t?~t:t],a=0,i=o.length,c=0,s=0;i>a;++a)e.push([(c+=(n=o[a])[0])*f+d,(s+=n[1])*l+p]);0>t&&r(e,i)}function o(t){return[t[0]*f+d,t[1]*l+p]}function a(t){for(var e=[],r=0,o=t.length;o>r;++r)n(t[r],e);return 2>e.length&&e.push(e[0]),e}function i(t){for(var e=a(t);4>e.length;)e.push(e[0]);return e}function c(t){return t.map(i)}function s(t){var e=t.type,n="GeometryCollection"===e?{type:e,geometries:t.geometries.map(s)}:e in v?{type:e,coordinates:v[e](t)}:{type:null};return"id"in t&&(n.id=t.id),"properties"in t&&(n.properties=t.properties),n}var u=t.transform,f=u.scale[0],l=u.scale[1],d=u.translate[0],p=u.translate[1],h=t.arcs,v={Point:function(t){return o(t.coordinates)},MultiPoint:function(t){return t.coordinates.map(o)},LineString:function(t){return a(t.arcs)},MultiLineString:function(t){return t.arcs.map(a)},Polygon:function(t){return c(t.arcs)},MultiPolygon:function(t){return t.arcs.map(c)}};return s(e)}function r(t,e){for(var n,r=t.length,o=r-e;--r>o;)n=t[o],t[o++]=t[r],t[r]=n}function o(t,e){for(var n=0,r=t.length;r>n;){var o=n+r>>>1;e>t[o]?n=o+1:r=o}return n}function a(t){function e(t,e){t.forEach(function(t){0>t&&(t=~t);var n=a[t]||(a[t]=[]);n[e]||(n.forEach(function(t){var n,r;r=o(n=i[e],t),n[r]!==t&&n.splice(r,0,t),r=o(n=i[t],e),n[r]!==e&&n.splice(r,0,e)}),n[e]=e)})}function n(t,n){t.forEach(function(t){e(t,n)})}function r(t,e){"GeometryCollection"===t.type?t.geometries.forEach(function(t){r(t,e)}):t.type in c&&c[t.type](t.arcs,e)}var a=[],i=t.map(function(){return[]}),c={LineString:e,MultiLineString:n,Polygon:n,MultiPolygon:function(t,e){t.forEach(function(t){n(t,e)})}};return t.forEach(r),i}return{version:"0.0.32",mesh:e,object:n,neighbors:a}}();