xxxxxxxxxx<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 margin = {top: 25, right: 140, bottom: 130, left: 50}; var width = 800 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; d3.select("div", "#wrapper") .append("div") .attr("id", "content"); var svg = d3.select("#content") .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 + ")"); d3.csv("woj.csv", function(data) { var headerRow = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna", "Others"]; var stacks = d3.layout.stack()(headerRow.map(function(support) { return data.map(function(d) { return {x: d.woj, y: +d[support]}; }); })); var xScale = d3.scale.ordinal() .domain(stacks[0].map(function(d) { return d.x; })) .rangeRoundBands([10, width-10], 0.1); var yScale = d3.scale.linear() .domain([100, 0]) .range([ 0, height]); var colors = d3.scale.ordinal() .domain(headerRow) .range(["#e41a1c","#377eb8","#4daf4a","#984ea3","#ffff33","#a65628"]); var xAxis = d3.svg.axis() .scale(xScale) .tickSize(0) .orient("bottom"); var yAxisLeft = d3.svg.axis() .scale(yScale) .tickSize(5) .tickFormat(function(d) { return d + "%"; }) .orient("left"); var yAxisRight = d3.svg.axis() .scale(yScale) .tickSize(5) .tickFormat(function(d) { return d + "%"; }) .orient("right"); var stack = svg.selectAll("g") .data(stacks) .enter() .append("g") .attr("class", "bar") .style("fill", function(d, i) { return colors(i); }); var rectGroups = stack.selectAll("g") .data(function(d) { return d; }) .enter() .append("g") .attr("class", "rectGroup"); rectGroups.append("rect") .attr("x", function(d) { return xScale(d.x); }) .attr("y", function(d) { return yScale(d.y0 + d.y); }) .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); }); rectGroups.append("text") .attr("x", function(d) { return xScale(d.x); }) .attr("y", function(d) { return yScale(d.y0 + d.y); }) .attr("dy", "1.25em") .style("text-anchor", "start") .text(function(d) { return d.y + "%"}); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(15,0)") .call(yAxisLeft); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (width - 15) + ", 0)") .call(yAxisRight); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text").style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "rotate(-90)" }); var legend = svg.selectAll(".legend") .data(colors.domain().slice(0, -6).reverse()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; }); legend.append("rect") .attr("x", width + 40) .attr("width", 20) .attr("height", 20) .style("fill", colors); legend.append("text") .attr ("class", "legend_text") .attr("x", width + 70) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d) { return d; }); }); </script> <div class="text"> <p class="source"> Data source: <a href="https://parlament2015.pkw.gov.pl/">PKW</a> </p> </div></div></body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js