xxxxxxxxxx<!--all credit goes to https://dexvis.wordpress.comonly very minor modifications were made to change the behavior or the brush--><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="https://d3js.org/d3.v3.min.js"></script><script src="https://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> Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v0.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v0.min.js