D3 Examples - Results of last parliamentary elections in Poland

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Parliamentary elections</title>
</head>
​
<body>
<div id="wrapper">
    
    <div class="text">
        <h1>Polish Parliamentary Elections<br />2015</h1>
    </div>
​
    <div class="text">
        <p>
        Results of parliamentary elections in Poland by <a href="https://en.wikipedia.org/wiki/Voivodeships_of_Poland">voivodeship</a>.
        </p>
    </div>
    
    <script type="text/javascript">
        
        var w = 800;
        var h = 600;
        var padding = [20, 30, 20, 175];
​
        var widthScale = d3.scale.linear()
            .range([ 0, w - padding[1] - padding[3] ])
            .domain([0, 60]);
​
​
        var heightScale = d3.scale.ordinal()
            .rangeRoundBands([ padding[0], h - padding[2] ], 0.15);
​
​
        var xAxis = d3.svg.axis()
            .scale(widthScale)
            .tickFormat(function(d) { return d + "%"; })
            .orient("bottom");
​
        var yAxis = d3.svg.axis()
            .scale(heightScale)
            .orient("left");
​
        d3.select("div", "#wrapper")
            .append("div")
            .attr("id", "buttons");
​
        d3.select("div", "#wrapper")
            .append("div")
            .attr("id", "content");
​
        var svg = d3.select("#content")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
​
        var parties = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna"],
            currentParty = parties[0],
            transitionDuration = 1000,
            textTransitionDuration = 1500;          
​
        function setChart() {
            d3.csv("woj.csv", function(data) {
                
                data.sort(function(a, b) {
                            return d3.ascending(+a.kod, +b.kod);
                        })          
​
                heightScale.domain(data.map(function(d) { return d.woj; } ));
​
                var groups = svg.selectAll("g")
                        .data(data)
                        .enter()
                        .append("g")
                        .attr("class", "bar");
            
​
                var rects = groups.append("rect")
​
                rects.attr("x", padding[3])
                    .attr("y", function(d) {
                        return heightScale(d.woj);
                    })
                    .attr("width", 0)
                    .attr("height", heightScale.rangeBand());
​
                groups.append("text")
                
​
​
                updateBarChart(currentParty);
​
                updateText(currentParty);
​
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
                    .call(xAxis)
                    .selectAll("text")
                    .attr("x", 1)
                    .attr("y", 6)
                    .style("text-anchor", "start");
​
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3] - 5) + ",0)")
                    .call(yAxis);
            });
        }
​
​
        function setButtons() {
            var btn = d3.select("#buttons")
                    .append("div");
            
                btn.selectAll("div")
                    .data(parties)
                    .enter()
                    .append("button")
                    .attr("type", "button")
                    .attr("class", function(d){
                        var className="click";
​
                        if (d === currentParty) {
                            className += " active";
                        }
                        return className;
                    })
                    .text(function(d){ return d; })
                    .on("click", function(d) {
                        d3.select(".click.active").classed("active", false);
                        d3.select(this).classed("active", true);
                        updateBarChart(d);
                        updateText(d);
                    })
        }
​
​
​
        function updateBarChart(currentParty) {
            svg.selectAll("rect")
                .transition()
                .duration(transitionDuration)
                .attr("width", function(d) {
                    return widthScale(d[currentParty]);
                });
        }
​
        function updateText(currentParty) {
            svg.selectAll(".bar text")
                .attr("fill-opacity", 0)
                .attr("x", function(d) {
                    return padding[3] + widthScale(d[currentParty]) + 50;
                })
                .attr("y", function(d) {
                    return heightScale(d.woj) + 20;
                })
                .text(function(d) {
                    return d[currentParty] + "%";
                })
                .transition()
                .duration(textTransitionDuration)
                .attr("fill-opacity", 1);
            }
​
        setChart();
​
        setButtons();
​
    </script>
​
    <div class="text">
        <p class="source">
        Data source: <a href="https://parlament2015.pkw.gov.pl/">PKW</a>
        </p>
    </div>
​
​
</div>
</body>
</html>
    