CZ 2016: regional and senate elections

<!DOCTYPE html>
<meta charset="utf-8">
<title>Krajské volby 2016 a 2012</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>

.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}

.link:hover {
  stroke-opacity: .5;
}

.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    pointer-events: none;
    max-width: 400px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
    pointer-events: none;
}
/* Northward tooltips */
.d3-tip:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
}
.stronger {
    font-weight: bold;
    color: yellow;
}
</style>
<body>

<div class="container">
    <h1 id="h1"><span id="h1name"></span> <small>2012 → 2016</small></h1>
    <h3>krajské volby 2012 vs. 2016</h3>
    <p>Odhad počtu voličů, kteří volili stranu X a zároveň v 2. kole senátních voleb kandidáta Y. Plocha jednotlivých bodů odpovídá počtu takových voličů (najetím myší na body zjistíte počty; lidé, kteří nevolili ani v jedněch z voleb, nejsou zobrazeni).
    <p id="chart">
    <h3>Kraje</h3>
    <div class="row">
        <div class="col-md-4">
            <ul class="list-group" style="list-style-type: none;">
                <li><a href="bubbles_kraje.html?cc=2">Jihočeský kraj</a>
                <li><a href="bubbles_kraje.html?cc=10">Jihomoravský kraj</a>
                <li><a href="bubbles_kraje.html?cc=4">Karlovarský kraj</a>
                <li><a href="bubbles_kraje.html?cc=7">Královéhradecký kraj</a>
                <li><a href="bubbles_kraje.html?cc=6">Liberecký kraj</a>
                <li><a href="bubbles_kraje.html?cc=13">Moravskoslezský kraj</a>
                <li><a href="bubbles_kraje.html?cc=11">Olomoucký kraj</a>
            </ul>
        </div>
        <div class="col-md-4">
            <ul class="list-group" style="list-style-type: none;">
                <li><a href="bubbles_kraje.html?cc=8">Pardubický kraj</a>
                <li><a href="bubbles_kraje.html?cc=3">Plzeňský kraj</a>
                <li><a href="bubbles_kraje.html?cc=1">Středočeský kraj</a>
                <li><a href="bubbles_kraje.html?cc=5">Ústecký kraj</a>
                <li><a href="bubbles_kraje.html?cc=9">Kraj Vysočina</a>
                <li><a href="bubbles_kraje.html?cc=12">Zlínský kraj</a>
            </ul>
        </div>
        <div class="col-md-4">
            <h4>Všechny analýzy:<h4>
            <ul class="list-group">
                <li><a href="bubbles_kraje.html?cc=1">Krajské volby 2012 → 2016</a>
                <li><a href="bubbles_psp.html?cc=1">Sněmovní volby 2013 → krajské volby 2016</a>
                <li><a href="bubbles_kraje_1.html?cc=1">Krajské volby vs. 1.kolo senátních voleb, 2016</a>
                <li><a href="bubbles_kraje_2.html?cc=1">Krajské volby vs. 2.kolo senátních voleb, 2016</a>
                <li><a href="sankey.html?cc=1">Senátní volby 1. kolo vs. 2. kolo, 2016</a>
            </ul>
        </div>
    </div>
    <p>Odhad pomocí statistické metody ekologické inference z výsledků voleb v jednotlivých volebních místnostech daného kraje s výjimkou některých míst, kde se měnily volební okrsky (např. částečně v Ostravě, Brně, Plzni). Hrubý odhad chyby vypočtených čísel je +-20%.
    <p>CC-BY-SA Michal Škop
</div>

var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"),    // zero decimal places
    format = function(d) { return formatNumber(Math.round(d/50)*50); },
    color = d3.scale.category20();

// append the svg canvas to the page
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

var cc = QueryString.cc;
if (typeof(cc) == 'undefined') {
    cc = 1;
}
var nonvoters = {
    "name": "Nevoliči",
    "party": "Nevoliči",
    "color": "#444444",
    "cc": cc
}
var others = {
    "name": "Ostatní",
    "party": "Ostatní",
    "color": "#999999",
    "cc": cc
}
var plus = {
    "name": "Přibylí",
    "party": "Přibylí",
    "color": "#444444",
    "cc": cc
}
var minus = {
    "name": "Odešlí",
    "party": "Odešlí",
    "color": "#444444",
    "cc": cc
}
cc2name = {
    "2": "Jihočeský kraj",
    "10": "Jihomoravský kraj",
    "4": "Karlovarský kraj",
    "7": "Královéhradecký kraj",
    "6": "Liberecký kraj",
    "13": "Moravskoslezský kraj",
    "11": "Olomoucký kraj",
    "8": "Pardubický kraj",
    "3": "Plzeňský kraj",
    "1": "Středočeský kraj",
    "5": "Ústecký kraj",
    "9": "Kraj Vysočina",
    "12": "Zlínský kraj"
}

d3.select("#h1name")
    .html(cc2name[cc]);

var name2data = {};
// load the data
d3.csv("list_2016_filtered.csv", function (er,da) {

d3.csv("list_2012_filtered.csv", function(err,daa) {

parties = [];
        daa.forEach(function(d) {
            if (d.cc == cc) {
                parties.push(d.party + " 12");
                name2data[d.party + " 12"] = d;
            }
        });
        parties.push(others.name + " 12");
        name2data[others.name + " 12"] = others;
        parties.push(minus.name + " 12");
        name2data[minus.name + " 12"] = minus;
        parties.push(nonvoters.name + " 12");
        name2data[nonvoters.name + " 12"] = nonvoters;

cands = []
        da.forEach(function (d) {
            if ((d.cc == cc)) {
                cands.push(d.party + " 16");
                name2data[d.party + " 16"] = d;
            }
        });
        cands.push(others.name + " 16");
        name2data[others.name + " 16"] = others;
        cands.push(plus.name + " 16");
        name2data[plus.name + " 16"] = plus;
        cands.push(nonvoters.name + " 16");
        name2data[nonvoters.name + " 16"] = nonvoters;

//set up scales
        var x = d3.scale.linear()
		             .domain([-5,parties.length])
		             .range([0, width])
		var y = d3.scale.linear()
		             .domain([-3,cands.length])
		             .range([0, height]);
        var r = d3.scale.linear()
		             .domain([0,Math.sqrt(50000)])
		             .range([0,50]);
        d3.text("matn_" + cc + "_filtered.csv", function(text) {

var dat = d3.csv.parseRows(text).map(function(row) {
                return row.map(function(value) {
                    return +value;
                });
            });

points = [];
            i = 0;
            len = dat.length;
            dat.forEach(function (d) {
                len2 = d.length;
                d.forEach(function (dd,ii) {
                    if (((i + 1) < len) || ((ii + 1) < len2)) {
                        points.push({
                            'i': i,
                            'j': ii,
                            'value': dd,
                            'd1': name2data[cands[ii]],
                            'd2': name2data[parties[i]]
                        })
                    }
                });
                i++;
             });

/* Initialize tooltip */
             function my_round(n) {
                 if (n < 500) {
                     return Math.round(n/50)*50;
                 }
                 return Math.round(n/100)*100;
             }
             tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
               return "<span>zhruba <span class='stronger'>" + my_round(d["value"]) + "</span> lidí volilo zároveň:<br><br><span class='stronger'>" + d.d1.party + "</span> v krajských volbách 2016<br><span class='stronger'>" + d.d2.party + "</span> v krajských volbách 2012<br>";
             });

/* Invoke the tip in the context of your visualization */
             svg.call(tip);

});

});
});

</script>
<iframe src="https://volebnikalkulacka.cz/session/" width="0" height="0" frameborder="0"></iframe>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-8592359-13', 'ocks.org');
  ga('send', 'pageview');

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js