D3 Examples - dexvis map experiment

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}
​
path:hover {
  fill: red;
}
​
<link href="nv.d3.css" rel="stylesheet" type="text/css">
​
</style>
<body>
<script src="https://d3js.org/d3.v2.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="BarChart.js"></script>
<script src="USStateMap.js"></script>
<script src="nv.d3.js"/></script>
<script src="src/utils.js"></script>
<script src="src/tooltip.js"></script>
<script src="src/models/legend.js"></script>
<script src="src/models/axis.js"></script>
<script src="src/models/multiBarHorizontal.js"></script>
<script src="src/models/multiBarHorizontalChart.js"></script>
<script src="stream_layers.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", 800)
          .append("g")
          .attr("transform", "translate(40,20)");
​
    // Configure a chart.
    var map = new USStateMap(
          {
              'parent': svg,
              'xoffset': 200
          }
        );
​
​
​
    var labels = [
        "State", "Property Tax", "Sales Tax", "Alcohol", "Amusement", "Insurance", "Gas", "Pari-Mutuels", "Utilities",
        "Tobacco", "Other Sales", "Alcoholic Lic", "Amusement Lic", "Corp Lic", "Hunt/Fish Lic", "Vehicle Lic", "Drivers Lic", "Util Lic",
        "Occ/Biz Lic", "Other Lic", "Income Tax", "Corp Net Inc Tax", "Death/Gift Tax",
        "Doc/Stock Txfer Tax", "Severance Taxes", "Other Taxes", "Total Taxes"];
​
    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]
        ];
​
    stateMap = dex.csv.createRowMap(labels, stateData, 0);
​
    //now get totals for each type of tax
    var taxTotals = [];
    labels.slice(1, labels.length - 1).forEach(function (d, i) { taxTotals.push(d3.sum(stateData, function (dd) { return dd[i] })) })
​
​
    //get the data from dexvis in format similar to the nvd3 example
    //this is an intermediate step to get structure
    //key: State
    //values: array
    stateNest = d3.nest()
                .key(function (d) { return d[0]; })
                .rollup(function (d) { return d; })
                .entries(stateData);
    //now get the values in proper structure
    //label : labels[i] from labels array
    //value : amount of taxes
    //eliminate State Name at 0 and Total at last
    stateNest.forEach(function (d) {
        var oldvalues = d.values[0].slice(1, d.values[0].length - 1);
        oldvalues.forEach(function (dd, ii) { d.values[ii] = { "label": labels[ii + 1], "value": dd, "pcttotal": dd / d3.sum(oldvalues) - taxTotals[ii + 1] / d3.sum(taxTotals) }; })
    })
    //end of replacement
​
​
    var barChart = new BarChart(
          {
              'parent': svg,
              'height': 200,
              'width': 900,
              'id': "StateStatisticsBarChart",
              'yaxisLabel': "",
              'labels': labels,
              'data': [],
              'xi': 0,
              'yi': d3.range(26).map(function (i) { return i + 1; }),
              'yaxisLabelFontSize': 18,
              'yaxisLabel': 'Taxes',
              'yaxisFormat': ",d",
              'xoffset': 220,
              'yoffset': 500
          }
        );
​
    //---------------------------------------------------------
    var chart;
    nv.addGraph(function () {
        chart = nv.models.multiBarHorizontalChart()
                .x(function (d) { return d.label })
                .y(function (d) { return d.value })
                .margin({ top: 30, right: 20, bottom: 50, left: 175 })
                .height(500)
                .width(400)
        .showValues(true)
        //.tooltips(true)
        //.barColor(d3.scale.category20().range())
                .showControls(false)
                .showLegend(false)
                .stacked(true);
​
        chart.yAxis
                .tickFormat(d3.format(',.2f'));
​
        d3.select('svg').append('g')
                .datum(stateNest)
                .attr("class", "horizontalbar")
            .transition().duration(500)
                .call(chart);
​
        nv.utils.windowResize(chart.update);
​
        chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
​
        return chart;
    });
    //------------------------------------------------------------
​
​
    map.addListener("click", barChart, function (chartEvent) {
        if (stateMap[chartEvent.state] != null) {
            d3.selectAll("#StateStatisticsBarChart").remove();
            var bcData = [stateMap[chartEvent.state]];
            barChart.attr("data", bcData)
            barChart.update();
​
            d3.selectAll('.horizontalbar').remove();
            nv.addGraph(function () {
                chart = nv.models.multiBarHorizontalChart()
                    .x(function (d) { return d.label })
                    .y(function (d) { return d.pcttotal })
                    .margin({ top: 30, right: 20, bottom: 50, left: 175 })
                    .height(500)
                    .width(400)
                //.showValues(true)
                //.tooltips(true)
                    .barColor(d3.scale.category20())
                    .showControls(false)
                    .showLegend(false)
                    .stacked(false);
​
                chart.yAxis
                    .tickFormat(d3.format(',.2f'));
​
                d3.select('svg').append('g')
                    .datum(stateNest.filter(function (d) { return d.key == chartEvent.state }))
                    .attr("class", "horizontalbar")
                .transition().duration(500)
                    .call(chart);
​
                nv.utils.windowResize(chart.update);
​
                chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
​
                return chart;
            });
        }
​
​
    });
​
​
    var legend = new VerticalLegend(
          {
              parent: svg,
              labels: labels.slice(1),
              caption: "",
              xoffset: 120,
              yoffset: 0,
              cellHeight: 25
          });
​
​
​
​
    barChart.render();
    map.render();
</script>
​
    