D3 Examples - NSW electoral boundaries by party

xxxxxxxxxx
 
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>2013 Federal Election Visualisation</title>
    <meta name="description" content="Data visualization of NSW Electoral Boundaries by Parties">
    <meta name="viewport" content="width=device-width, initial-scale=1">
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        body {
            padding-bottom: 20px;
        }
        
        #party-chart g.row text {
            fill: black;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css">
    <link rel="stylesheet" href="leaflet-legend.css">
​
    <script src="modernizr-2.8.3-respond-1.4.2.min.js"></script>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.3.14/crossfilter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
    <script src="colorbrewer.min.js"></script>
    <script src="dc.leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/filesaver.js/1.3.3/filesaver.min.js"></script>
</head>
​
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    
    <div class="container">       
        <div class="row">
            <h2>Visualised 2013 Federal Election results for New South Wales electoral divisions.</h2>
        </div>
        
        <div class="row">
            <div id="nsw-chart" class="col-xs-12 col-md-6">
                <h3>Votes by electorate. <small>Filter data by electorate by selecting an electorate on the map below.</small> </h3> 
                <h3><small>Electorates currently selected: <span class="reset" style="display: none;"><b><span class="filter"></span></b></span></small></h3>
                <a class="reset" href="javascript:nswChart.filterAll();dc.redrawAll();" style="display: none;">Clear electorate selection.</a>
                <div class="clearfix"></div>
            </div>
​
            <div id="party-chart" class="col-xs-12 col-md-6">
                <h3>Votes by political party. <small>Filter data by party by selecting a party on the chart below.</small> </h3> 
                <h3><small>Parties currently selected: <span class="reset" style="display: none;">
                <b><span class="filter"></span></b></span></small></h3>
                <a class="reset" href="javascript:partyChart.filterAll();dc.redrawAll();" style="display: none;">Clear party selection.</a>
​
                <div class="clearfix"></div>
            </div>
        </div>
        
        <br/>
        <h3>Export voting data to CSV file</h3>
        <table class="table table-borderless table-condensed table-hover">
            <tr>
                <td><button type="button" class="btn btn-primary" id="download"><span class="glyphicon glyphicon-download"></span> All data</button></td>
                <td>Download all voting data.</td>
            </tr>
            <tr>
                <td><button type="button" class="btn btn-primary" id="downloadCurrent"><span class="glyphicon glyphicon-download"></span> Filtered data</button></td>
                <td>Download data based on your current selection of filters.</td>
            </tr>
        </table>
        
        Voting data sourced from the <a href="https://results.aec.gov.au/17496/Website/Downloads/HouseStateFirstPrefsByPollingPlaceDownload-17496-NSW.txt"> Australian Electoral Commission</a>.
        <hr>
    </div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
​
    <script type="text/javascript">
        var nswChart = dc_leaflet.choroplethChart("#nsw-chart");
        var partyChart = dc.rowChart("#party-chart");
 
        d3.csv("votingData.csv", function(csv) {
            var data = crossfilter(csv);
​
            var divisions = data.dimension(function(d) {
                return d["DivisionNm"];
            });
​
            var votesSum = divisions.group().reduceSum(function(d) {
                return d["OrdinaryVotes"];
            });
​
            var parties = data.dimension(function(d) {
                return d["PartyNm"];
            });
​
            var voteByParties = parties.group().reduceSum(function(d) {
                return d["OrdinaryVotes"];
            });
​
            d3.json("NSW_electoral_boundaries_25-02-2016_min.json", function(statesJson) {
                nswChart
                    .height($("#nsw-chart").width())
                    .center([-33.5, 150])
                    .zoom(5)
                    .dimension(divisions)
                    .group(votesSum)
                    .geojson(statesJson.features)
                    .colors(colorbrewer.Blues[9])
                    .colorDomain([
                        0,
                        d3.max(votesSum.all(), dc.pluck('value'))
                    ])
                    .colorAccessor(function(d, i) {
                        return d.value;
                    })
                    .featureKeyAccessor(function(feature) {
                        return feature.properties.Sortname
                    })
                    .legend(dc_leaflet.legend().position('bottomright'))
                    .tiles(function(map) {
                        L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
                            maxZoom: 18,
                            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
                        }).addTo(map);
                    
                        L.geoJson(statesJson, {}).addTo(map);
                    });
​
                function politicalPartyColours(party) {
                    if (party === 'Labor' || party === 'Country Labor') {
                        return '#DE2C34';
                    } else if (party === 'Liberal') {
                        return '#0047AB';
                    } else if (party === 'The Greens') {
                        return '#39B54A';
                    } else if (party === 'Informal') {
                        return '#FBBA72';
                    } else if (party === 'The Nationals') {
                        return '#FEF032';
                    } else if (party === 'Others') {
                        return '#848C8E';
                    } else {
                        return 0;
                    }
                }
                
                partyChart
                    .height($("#party-chart").width())
                    .x(d3.scale.linear())
                    .elasticX(true)
                    .rowsCap(5)
                    .dimension(parties)
                    .group(voteByParties)
                    .colors((function(d) {
                        return politicalPartyColours(d)
                    }))
                    .ordering(function(d) {
                        return -d.value
                    })
                    .render();
​
​
                function getCurrentDataFileName() {
                    var fileName = 'federal_election_2013_voting_data';
                    for (var i = 0; i < nswChart.filters().length; i++) {
                        if (i === 0) {
                            fileName += "_ELECTORATES_";
                        }
                        fileName += nswChart.filters()[i];
                    }
​
                    for (var i = 0; i < partyChart.filters().length; i++) {
                        if (i === 0) {
                            fileName += "_PARTIES_";
                        }
                        fileName += partyChart.filters()[i];
                    }
​
                    fileName += '.csv';
                    return fileName;        
                }
​
                d3.select('#download')
                    .on('click', function() {
                        nswChart.filterAll();
                        dc.redrawAll();
                        var data = divisions.top(Infinity);
                        var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
                        saveAs(blob, 'federal_election_2013_voting_data.csv');
                    });
​
                d3.select('#downloadCurrent')
                    .on('click', function() {
                        var data = divisions.top(Infinity);
                        var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
                        saveAs(blob, getCurrentDataFileName());
                    });
​
                dc.renderAll();
            });
        });
    </script>
</body>
​
</html>
    