Last active
August 3, 2016 20:57
-
-
Save michalskop/ba56b4f6c4df364f9a47 to your computer and use it in GitHub Desktop.
SK: referendum 2015
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| cd /home/michal/project/gist/ba56b4f6c4df364f9a47 | |
| git add -A | |
| git commit -m "update" | |
| # needed to be authentized | |
| # using git config --global credential.helper 'cache --timeout 3600' | |
| # also good for security | |
| git push | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="sk"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Referendum 2015: sever a juh, vidiek a mestá</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="WPCA scatter plot"> | |
| <meta name="author" content="Michal Škop"> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.scatterplot.js"></script> | |
| <script src="./d3.tip.js"></script> | |
| <style type="text/css"> | |
| /* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */ | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| circle { | |
| fill-opacity: .5; | |
| fill:#080; | |
| stroke:#080; | |
| stroke-opacity: 0.99; | |
| stroke-width: 1; | |
| } | |
| circle:hover { | |
| fill-opacity: 1; | |
| } | |
| .label { | |
| font-family: sans-serif; | |
| font-size: 15px; | |
| } | |
| .stronger { | |
| color: yellow; | |
| font-weight: bold; | |
| } | |
| .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; | |
| } | |
| line { | |
| stroke:gray; | |
| stroke-width:1; | |
| opacity: .15; | |
| } | |
| .centerline { | |
| stroke: #b00; | |
| stroke-width: 3; | |
| stroke-opacity: 1; | |
| } | |
| .averageline { | |
| stroke: #080; | |
| stroke-width: 2; | |
| stroke-opacity: 1; | |
| stroke-dasharray: 10, 5; | |
| } | |
| #chart { | |
| /*margin-top:100px;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Slovensko: referendum 2015 <small>sever a juh, vidiek a mestá</small></h1> | |
| <div id="chart"></div> | |
| <p class="bg-info"><span class="glyphicon glyphicon-info-sign" aria-hidden="false"> </span> Každý bod je jedna obec. Veľkosť bodu reprezentuje počet obyvateľov. Účasť v referende bola väčšia <strong>na severe</strong> ako na juhu a <strong>na vidieku</strong> ako vo väčších mestách. | |
| <footer><small>CC-BY Michal Škop, <a href="http://kohovolit.eu">KohoVolit.eu</a>, <a href="http://uhk.cz">UHK</a> | dáta Štatistický úrad SR</small></footer> | |
| <script type="text/javascript"> | |
| d3.csv('sk.csv', function(data) { | |
| d3.json("sk_referendum.json", function(data2) { | |
| points = []; | |
| data.forEach(function(d) { | |
| if (typeof(data2[d.id]) != 'undefined') { | |
| d2 = data2[d.id]; | |
| points.push({ | |
| 'r' : Math.sqrt(parseInt(d2["turnout"]) / parseFloat(d2.turnout_perc.replace(",","."))*100), | |
| 'x': parseFloat(d.lat), | |
| 'y': parseFloat(d2.turnout_perc.replace(",",".")), | |
| 'name': d.name | |
| }); | |
| } | |
| }); | |
| var scatterplot = [{ | |
| "data": points, | |
| "margin": {top: 10, right: 10, bottom: 30, left: 30}, | |
| "axes": {"labels":{"y":"Účasť (%)", "x":"← Juh - Sever → (zem.šírka)"}}, | |
| "minmax":{ | |
| "y":{'min':0,'max':100}, | |
| "x":{'min':47.7,'max':49.6}, | |
| "r":{'min':0,'max':Math.sqrt(400000)}, | |
| "rrange":{'min':0,'max':33} | |
| }, | |
| "size":{"width":700,"height":400}, | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width",scatterplot[0]['size']['width']) | |
| .attr("height",scatterplot[0]['size']['height']); | |
| /* Initialize tooltip */ | |
| tip = d3.tip().attr('class', 'd3-tip').html( | |
| function(d) { | |
| return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + | |
| 'Účasť: '+d.y+'%'; | |
| }); | |
| /* Invoke the tip in the context of your visualization */ | |
| svg.call(tip) | |
| var sp = d3.scatterplot() | |
| .data(function(d) {return d.data}) | |
| .margin(function(d) {return d.margin}) | |
| .axes(function(d) {return d.axes}) | |
| .minmax(function(d) {return d.minmax}) | |
| .size(function(d) {return d.size}) | |
| var scatter = svg.selectAll(".scatterplot") | |
| .data(scatterplot) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")") | |
| .call(sp); | |
| var line = d3.svg.line() | |
| .x( | |
| function(d) { | |
| return d[0]; }) | |
| .y(function(d) { return d[1]; }); | |
| var width = scatterplot[0].size['width'] - scatterplot[0].margin.left - scatterplot[0].margin.right, | |
| height = scatterplot[0].size['height'] - scatterplot[0].margin.top - scatterplot[0].margin.bottom; | |
| var xScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['x']['min'], scatterplot[0].minmax['x']['max']]) | |
| .range([0, width]) | |
| var yScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['y']['min'], scatterplot[0].minmax['y']['max']]) | |
| .range([height, 0]) | |
| centerline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(50)],[xScale(scatterplot[0].minmax['x']['max']),yScale(50)]); | |
| svg.append("path") | |
| .datum(centerline) | |
| .attr("class", "centerline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| averageline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(21.4)],[xScale(scatterplot[0].minmax['x']['max']),yScale(21.4)]); | |
| svg.append("path") | |
| .datum(averageline) | |
| .attr("class", "averageline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="sk"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Referendum 2015: sever a juh, vidiek a mestá</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="WPCA scatter plot"> | |
| <meta name="author" content="Michal Škop"> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.scatterplot.js"></script> | |
| <script src="./d3.tip.js"></script> | |
| <style type="text/css"> | |
| /* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */ | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| circle { | |
| fill-opacity: .5; | |
| fill:#080; | |
| stroke:#080; | |
| stroke-opacity: 0.99; | |
| stroke-width: 1; | |
| } | |
| circle:hover { | |
| fill-opacity: 1; | |
| } | |
| .label { | |
| font-family: sans-serif; | |
| font-size: 15px; | |
| } | |
| .stronger { | |
| color: yellow; | |
| font-weight: bold; | |
| } | |
| .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; | |
| } | |
| line { | |
| stroke:gray; | |
| stroke-width:1; | |
| opacity: .15; | |
| } | |
| .centerline { | |
| stroke: #b00; | |
| stroke-width: 3; | |
| stroke-opacity: 1; | |
| } | |
| .averageline { | |
| stroke: #080; | |
| stroke-width: 2; | |
| stroke-opacity: 1; | |
| stroke-dasharray: 10, 5; | |
| } | |
| #chart { | |
| /*margin-top:100px;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3>Slovensko: referendum 2015 <small>sever a juh, vidiek a mestá</small></h3> | |
| <div id="chart"></div> | |
| <p class="bg-info"><small><span class="glyphicon glyphicon-info-sign" aria-hidden="false"> </span> Každý bod je jedna obec. Veľkosť bodu reprezentuje počet obyvateľov. Účasť v referende bola väčšia <strong>na severe</strong> ako na juhu a <strong>na vidieku</strong> ako vo väčších mestách.</small> | |
| <footer><small>CC-BY Michal Škop, <a href="http://kohovolit.eu">KohoVolit.eu</a>, <a href="http://uhk.cz">UHK</a> | dáta Štatistický úrad SR</small></footer> | |
| <script type="text/javascript"> | |
| d3.csv('sk.csv', function(data) { | |
| d3.json("sk_referendum.json", function(data2) { | |
| points = []; | |
| data.forEach(function(d) { | |
| if (typeof(data2[d.id]) != 'undefined') { | |
| d2 = data2[d.id]; | |
| points.push({ | |
| 'r' : Math.sqrt(parseInt(d2["turnout"]) / parseFloat(d2.turnout_perc.replace(",","."))*100), | |
| 'x': parseFloat(d.lat), | |
| 'y': parseFloat(d2.turnout_perc.replace(",",".")), | |
| 'name': d.name | |
| }); | |
| } | |
| }); | |
| var scatterplot = [{ | |
| "data": points, | |
| "margin": {top: 10, right: 10, bottom: 30, left: 30}, | |
| "axes": {"labels":{"y":"Účasť (%)", "x":"← Juh - Sever → (zem.šírka)"}}, | |
| "minmax":{ | |
| "y":{'min':0,'max':100}, | |
| "x":{'min':47.7,'max':49.6}, | |
| "r":{'min':0,'max':Math.sqrt(400000)}, | |
| "rrange":{'min':0,'max':25} | |
| }, | |
| "size":{"width":650,"height":250}, | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width",scatterplot[0]['size']['width']) | |
| .attr("height",scatterplot[0]['size']['height']); | |
| /* Initialize tooltip */ | |
| tip = d3.tip().attr('class', 'd3-tip').html( | |
| function(d) { | |
| return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + | |
| 'Účasť: '+d.y+'%'; | |
| }); | |
| /* Invoke the tip in the context of your visualization */ | |
| svg.call(tip) | |
| var sp = d3.scatterplot() | |
| .data(function(d) {return d.data}) | |
| .margin(function(d) {return d.margin}) | |
| .axes(function(d) {return d.axes}) | |
| .minmax(function(d) {return d.minmax}) | |
| .size(function(d) {return d.size}) | |
| var scatter = svg.selectAll(".scatterplot") | |
| .data(scatterplot) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")") | |
| .call(sp); | |
| var line = d3.svg.line() | |
| .x( | |
| function(d) { | |
| return d[0]; }) | |
| .y(function(d) { return d[1]; }); | |
| var width = scatterplot[0].size['width'] - scatterplot[0].margin.left - scatterplot[0].margin.right, | |
| height = scatterplot[0].size['height'] - scatterplot[0].margin.top - scatterplot[0].margin.bottom; | |
| var xScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['x']['min'], scatterplot[0].minmax['x']['max']]) | |
| .range([0, width]) | |
| var yScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['y']['min'], scatterplot[0].minmax['y']['max']]) | |
| .range([height, 0]) | |
| centerline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(50)],[xScale(scatterplot[0].minmax['x']['max']),yScale(50)]); | |
| svg.append("path") | |
| .datum(centerline) | |
| .attr("class", "centerline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| averageline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(21.4)],[xScale(scatterplot[0].minmax['x']['max']),yScale(21.4)]); | |
| svg.append("path") | |
| .datum(averageline) | |
| .attr("class", "averageline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="sk"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>W-PCA Scatterplot Chart</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="WPCA scatter plot"> | |
| <meta name="author" content="Michal Škop"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.scatterplot.js"></script> | |
| <script src="./d3.tip.js"></script> | |
| <style type="text/css"> | |
| /* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */ | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| circle { | |
| fill-opacity: .5; | |
| fill:#080; | |
| stroke:#080; | |
| stroke-opacity: 0.99; | |
| stroke-width: 1; | |
| } | |
| circle:hover { | |
| fill-opacity: 1; | |
| } | |
| .label { | |
| font-family: sans-serif; | |
| font-size: 15px; | |
| } | |
| .stronger { | |
| color: yellow; | |
| font-weight: bold; | |
| } | |
| .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; | |
| } | |
| line { | |
| stroke:gray; | |
| stroke-width:1; | |
| opacity: .15; | |
| } | |
| .centerline { | |
| stroke: #b00; | |
| stroke-width: 3; | |
| stroke-opacity: 1; | |
| } | |
| .averageline { | |
| stroke: #080; | |
| stroke-width: 2; | |
| stroke-opacity: 1; | |
| stroke-dasharray: 10, 5; | |
| } | |
| #chart { | |
| /*margin-top:100px;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script type="text/javascript"> | |
| d3.csv('sk.csv', function(data) { | |
| d3.json("sk_referendum.json", function(data2) { | |
| points = []; | |
| data.forEach(function(d) { | |
| if (typeof(data2[d.id]) != 'undefined') { | |
| d2 = data2[d.id]; | |
| points.push({ | |
| 'r' : Math.sqrt(parseInt(d2["turnout"]) / parseFloat(d2.turnout_perc.replace(",","."))*100), | |
| 'x': parseInt(d2["turnout"]) / parseFloat(d2.turnout_perc.replace(",","."))*100, | |
| 'y': parseFloat(d2.turnout_perc.replace(",",".")), | |
| 'name': d.name | |
| }); | |
| } | |
| }); | |
| var scatterplot = [{ | |
| "data": points, | |
| "margin": {top: 10, right: 10, bottom: 30, left: 30}, | |
| "axes": {"labels":{"y":"Účasť (%)", "x":"← Juh - Sever → (zem.šírka)"}}, | |
| "minmax":{ | |
| "y":{'min':0,'max':100}, | |
| "x":{'min':20,'max':600000}, | |
| "r":{'min':0,'max':Math.sqrt(400000)}, | |
| "rrange":{'min':0,'max':33} | |
| }, | |
| "size":{"width":700,"height":500}, | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width",scatterplot[0]['size']['width']) | |
| .attr("height",scatterplot[0]['size']['height']); | |
| /* Initialize tooltip */ | |
| tip = d3.tip().attr('class', 'd3-tip').html( | |
| function(d) { | |
| return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + | |
| 'Účasť: '+d.y+'%'; | |
| }); | |
| /* Invoke the tip in the context of your visualization */ | |
| svg.call(tip) | |
| var sp = d3.scatterplot() | |
| .data(function(d) {return d.data}) | |
| .margin(function(d) {return d.margin}) | |
| .axes(function(d) {return d.axes}) | |
| .minmax(function(d) {return d.minmax}) | |
| .size(function(d) {return d.size}) | |
| var scatter = svg.selectAll(".scatterplot") | |
| .data(scatterplot) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")") | |
| .call(sp); | |
| var line = d3.svg.line() | |
| .x( | |
| function(d) { | |
| return d[0]; }) | |
| .y(function(d) { return d[1]; }); | |
| var width = scatterplot[0].size['width'] - scatterplot[0].margin.left - scatterplot[0].margin.right, | |
| height = scatterplot[0].size['height'] - scatterplot[0].margin.top - scatterplot[0].margin.bottom; | |
| var xScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['x']['min'], scatterplot[0].minmax['x']['max']]) | |
| .range([0, width]) | |
| var yScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['y']['min'], scatterplot[0].minmax['y']['max']]) | |
| .range([height, 0]) | |
| centerline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(50)],[xScale(scatterplot[0].minmax['x']['max']),yScale(50)]); | |
| svg.append("path") | |
| .datum(centerline) | |
| .attr("class", "centerline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| averageline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(21.4)],[xScale(scatterplot[0].minmax['x']['max']),yScale(21.4)]); | |
| svg.append("path") | |
| .datum(averageline) | |
| .attr("class", "averageline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="sk"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Referendum 2015: sever a juh, vidiek a mestá</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="WPCA scatter plot"> | |
| <meta name="author" content="Michal Škop"> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.scatterplot.js"></script> | |
| <script src="./d3.tip.js"></script> | |
| <style type="text/css"> | |
| /* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */ | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| circle { | |
| fill-opacity: .5; | |
| fill:#080; | |
| stroke:#080; | |
| stroke-opacity: 0.99; | |
| stroke-width: 1; | |
| } | |
| circle:hover { | |
| fill-opacity: 1; | |
| } | |
| .label { | |
| font-family: sans-serif; | |
| font-size: 15px; | |
| } | |
| .stronger { | |
| color: yellow; | |
| font-weight: bold; | |
| } | |
| .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; | |
| } | |
| line { | |
| stroke:gray; | |
| stroke-width:1; | |
| opacity: .15; | |
| } | |
| .centerline { | |
| stroke: #b00; | |
| stroke-width: 3; | |
| stroke-opacity: 1; | |
| } | |
| .averageline { | |
| stroke: #080; | |
| stroke-width: 2; | |
| stroke-opacity: 1; | |
| stroke-dasharray: 10, 5; | |
| } | |
| #chart { | |
| /*margin-top:100px;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Slovensko: referendum 2015 <small>východ a západ, vidiek a mestá</small></h1> | |
| <div id="chart"></div> | |
| <p class="bg-info"><span class="glyphicon glyphicon-info-sign" aria-hidden="false"> </span> Každý bod je jedna obec. Veľkosť bodu reprezentuje počet obyvateľov. Účasť v referende bola väčšia <strong>na vidieku</strong> ako vo väčších mestách. | |
| <footer><small>CC-BY Michal Škop, <a href="http://kohovolit.eu">KohoVolit.eu</a>, <a href="http://uhk.cz">UHK</a> | dáta Štatistický úrad SR</small></footer> | |
| <script type="text/javascript"> | |
| d3.csv('sk.csv', function(data) { | |
| d3.json("sk_referendum.json", function(data2) { | |
| points = []; | |
| data.forEach(function(d) { | |
| if (typeof(data2[d.id]) != 'undefined') { | |
| d2 = data2[d.id]; | |
| points.push({ | |
| 'r' : Math.sqrt(parseInt(d2["turnout"]) / parseFloat(d2.turnout_perc.replace(",","."))*100), | |
| 'x': parseFloat(d.long), | |
| 'y': parseFloat(d2.turnout_perc.replace(",",".")), | |
| 'name': d.name | |
| }); | |
| } | |
| }); | |
| var scatterplot = [{ | |
| "data": points, | |
| "margin": {top: 10, right: 10, bottom: 30, left: 30}, | |
| "axes": {"labels":{"y":"Účasť (%)", "x":"← Západ - Východ → (zem.délka)"}}, | |
| "minmax":{ | |
| "y":{'min':0,'max':100}, | |
| "x":{'min':16.8,'max':22.6}, | |
| "r":{'min':0,'max':Math.sqrt(400000)}, | |
| "rrange":{'min':0,'max':33} | |
| }, | |
| "size":{"width":700,"height":400}, | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width",scatterplot[0]['size']['width']) | |
| .attr("height",scatterplot[0]['size']['height']); | |
| /* Initialize tooltip */ | |
| tip = d3.tip().attr('class', 'd3-tip').html( | |
| function(d) { | |
| return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + | |
| 'Účasť: '+d.y+'%'; | |
| }); | |
| /* Invoke the tip in the context of your visualization */ | |
| svg.call(tip) | |
| var sp = d3.scatterplot() | |
| .data(function(d) {return d.data}) | |
| .margin(function(d) {return d.margin}) | |
| .axes(function(d) {return d.axes}) | |
| .minmax(function(d) {return d.minmax}) | |
| .size(function(d) {return d.size}) | |
| var scatter = svg.selectAll(".scatterplot") | |
| .data(scatterplot) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")") | |
| .call(sp); | |
| var line = d3.svg.line() | |
| .x( | |
| function(d) { | |
| return d[0]; }) | |
| .y(function(d) { return d[1]; }); | |
| var width = scatterplot[0].size['width'] - scatterplot[0].margin.left - scatterplot[0].margin.right, | |
| height = scatterplot[0].size['height'] - scatterplot[0].margin.top - scatterplot[0].margin.bottom; | |
| var xScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['x']['min'], scatterplot[0].minmax['x']['max']]) | |
| .range([0, width]) | |
| var yScale = d3.scale.linear() | |
| .domain([scatterplot[0].minmax['y']['min'], scatterplot[0].minmax['y']['max']]) | |
| .range([height, 0]) | |
| centerline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(50)],[xScale(scatterplot[0].minmax['x']['max']),yScale(50)]); | |
| svg.append("path") | |
| .datum(centerline) | |
| .attr("class", "centerline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| averageline = Array([xScale(scatterplot[0].minmax['x']['min']),yScale(21.4)],[xScale(scatterplot[0].minmax['x']['max']),yScale(21.4)]); | |
| svg.append("path") | |
| .datum(averageline) | |
| .attr("class", "averageline") | |
| .attr("d", line) | |
| .attr("transform", "translate(" + scatterplot[0].margin.left + "," + scatterplot[0].margin.top + ")"); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* requires D3 + https://github.com/Caged/d3-tip */ | |
| d3.scatterplot = function() { | |
| function scatterplot(selection) { | |
| selection.each(function(d, i) { | |
| //options | |
| var data = (typeof(data) === "function" ? data(d) : d.data), | |
| margin = (typeof(margin) === "function" ? margin(d) : d.margin), | |
| axes = (typeof(axes) === "function" ? axes(d) : d.axes), | |
| minmax = (typeof(minmax) === "function" ? minmax(d) : d.minmax), | |
| size = (typeof(size) === "function" ? size(d) : d.size); | |
| // chart sizes | |
| var width = size['width'] - margin.left - margin.right, | |
| height = size['height'] - margin.top - margin.bottom; | |
| //scales | |
| var xScale = d3.scale.linear() | |
| .domain([minmax['x']['min'], minmax['x']['max']]) | |
| .range([0, width]) | |
| var yScale = d3.scale.linear() | |
| .domain([minmax['y']['min'], minmax['y']['max']]) | |
| .range([height, 0]) | |
| var rScale = d3.scale.linear() | |
| .domain([minmax['r']['min'],minmax['r']['max']]) | |
| .range([minmax['rrange']['min'],minmax['rrange']['max']]); | |
| //axes | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom"); | |
| //.ticks(5); | |
| //.tickSize(16, 0); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left"); | |
| //.ticks(5); | |
| var element = d3.select(this); | |
| //Create X axis | |
| element.append("g") | |
| .attr("class", "axis x-axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| //Create Y axis | |
| element.append("g") | |
| .attr("class", "axis y-axis") | |
| .call(yAxis); | |
| element.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return xScale(d.x); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.y); | |
| }) | |
| .attr("r", function(d) { | |
| return rScale(d.r); | |
| }) | |
| .attr("class", function(d) { | |
| if (typeof(d['class'] != 'undefined')) return d['class']; | |
| else return 'circle'; | |
| }) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide); | |
| //axis labels | |
| element.append("text") | |
| .attr("class", "x-label label") | |
| .attr("text-anchor", "end") | |
| .attr("x", width) | |
| .attr("y", height-5) | |
| .text(axes['labels']['x']); | |
| element.append("text") | |
| .attr("class", "y label") | |
| .attr("text-anchor", "end") | |
| .attr("y", 5) | |
| .attr("x", 0) | |
| .attr("dy", ".75em") | |
| .attr("transform", "rotate(-90)") | |
| .text(axes['labels']['y']); | |
| }); | |
| } | |
| scatterplot.data = function(value) { | |
| if (!arguments.length) return value; | |
| data = value; | |
| return scatterplot; | |
| }; | |
| scatterplot.margin = function(value) { | |
| if (!arguments.length) return value; | |
| margin = value; | |
| return scatterplot; | |
| }; | |
| scatterplot.axes = function(value) { | |
| if (!arguments.length) return value; | |
| axes = value; | |
| return scatterplot; | |
| }; | |
| scatterplot.minmax = function(value) { | |
| if (!arguments.length) return value; | |
| minmax = value; | |
| return scatterplot; | |
| }; | |
| scatterplot.size = function(value) { | |
| if (!arguments.length) return value; | |
| size = value; | |
| return scatterplot; | |
| }; | |
| return scatterplot; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // d3.tip | |
| // Copyright (c) 2013 Justin Palmer | |
| // | |
| // Tooltips for d3.js SVG visualizations | |
| (function (root, factory) { | |
| if (typeof define === 'function' && define.amd) { | |
| // AMD. Register as an anonymous module with d3 as a dependency. | |
| define(['d3'], factory) | |
| } else { | |
| // Browser global. | |
| root.d3.tip = factory(root.d3) | |
| } | |
| }(this, function (d3) { | |
| // Public - contructs a new tooltip | |
| // | |
| // Returns a tip | |
| return function() { | |
| var direction = d3_tip_direction, | |
| offset = d3_tip_offset, | |
| html = d3_tip_html, | |
| node = initNode(), | |
| svg = null, | |
| point = null, | |
| target = null | |
| function tip(vis) { | |
| svg = getSVGNode(vis) | |
| point = svg.createSVGPoint() | |
| document.body.appendChild(node) | |
| } | |
| // Public - show the tooltip on the screen | |
| // | |
| // Returns a tip | |
| tip.show = function() { | |
| var args = Array.prototype.slice.call(arguments) | |
| if(args[args.length - 1] instanceof SVGElement) target = args.pop() | |
| var content = html.apply(this, args), | |
| poffset = offset.apply(this, args), | |
| dir = direction.apply(this, args), | |
| nodel = d3.select(node), | |
| i = directions.length, | |
| coords, | |
| scrollTop = document.documentElement.scrollTop || document.body.scrollTop, | |
| scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft | |
| nodel.html(content) | |
| .style({ opacity: 1, 'pointer-events': 'all' }) | |
| while(i--) nodel.classed(directions[i], false) | |
| coords = direction_callbacks.get(dir).apply(this) | |
| nodel.classed(dir, true).style({ | |
| top: (coords.top + poffset[0]) + scrollTop + 'px', | |
| left: (coords.left + poffset[1]) + scrollLeft + 'px' | |
| }) | |
| return tip | |
| } | |
| // Public - hide the tooltip | |
| // | |
| // Returns a tip | |
| tip.hide = function() { | |
| nodel = d3.select(node) | |
| nodel.style({ opacity: 0, 'pointer-events': 'none' }) | |
| return tip | |
| } | |
| // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. | |
| // | |
| // n - name of the attribute | |
| // v - value of the attribute | |
| // | |
| // Returns tip or attribute value | |
| tip.attr = function(n, v) { | |
| if (arguments.length < 2 && typeof n === 'string') { | |
| return d3.select(node).attr(n) | |
| } else { | |
| var args = Array.prototype.slice.call(arguments) | |
| d3.selection.prototype.attr.apply(d3.select(node), args) | |
| } | |
| return tip | |
| } | |
| // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. | |
| // | |
| // n - name of the property | |
| // v - value of the property | |
| // | |
| // Returns tip or style property value | |
| tip.style = function(n, v) { | |
| if (arguments.length < 2 && typeof n === 'string') { | |
| return d3.select(node).style(n) | |
| } else { | |
| var args = Array.prototype.slice.call(arguments) | |
| d3.selection.prototype.style.apply(d3.select(node), args) | |
| } | |
| return tip | |
| } | |
| // Public: Set or get the direction of the tooltip | |
| // | |
| // v - One of n(north), s(south), e(east), or w(west), nw(northwest), | |
| // sw(southwest), ne(northeast) or se(southeast) | |
| // | |
| // Returns tip or direction | |
| tip.direction = function(v) { | |
| if (!arguments.length) return direction | |
| direction = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| // Public: Sets or gets the offset of the tip | |
| // | |
| // v - Array of [x, y] offset | |
| // | |
| // Returns offset or | |
| tip.offset = function(v) { | |
| if (!arguments.length) return offset | |
| offset = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| // Public: sets or gets the html value of the tooltip | |
| // | |
| // v - String value of the tip | |
| // | |
| // Returns html value or tip | |
| tip.html = function(v) { | |
| if (!arguments.length) return html | |
| html = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| function d3_tip_direction() { return 'n' } | |
| function d3_tip_offset() { return [0, 0] } | |
| function d3_tip_html() { return ' ' } | |
| var direction_callbacks = d3.map({ | |
| n: direction_n, | |
| s: direction_s, | |
| e: direction_e, | |
| w: direction_w, | |
| nw: direction_nw, | |
| ne: direction_ne, | |
| sw: direction_sw, | |
| se: direction_se | |
| }), | |
| directions = direction_callbacks.keys() | |
| function direction_n() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.n.y - node.offsetHeight, | |
| left: bbox.n.x - node.offsetWidth / 2 | |
| } | |
| } | |
| function direction_s() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.s.y, | |
| left: bbox.s.x - node.offsetWidth / 2 | |
| } | |
| } | |
| function direction_e() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.e.y - node.offsetHeight / 2, | |
| left: bbox.e.x | |
| } | |
| } | |
| function direction_w() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.w.y - node.offsetHeight / 2, | |
| left: bbox.w.x - node.offsetWidth | |
| } | |
| } | |
| function direction_nw() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.nw.y - node.offsetHeight, | |
| left: bbox.nw.x - node.offsetWidth | |
| } | |
| } | |
| function direction_ne() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.ne.y - node.offsetHeight, | |
| left: bbox.ne.x | |
| } | |
| } | |
| function direction_sw() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.sw.y, | |
| left: bbox.sw.x - node.offsetWidth | |
| } | |
| } | |
| function direction_se() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.se.y, | |
| left: bbox.e.x | |
| } | |
| } | |
| function initNode() { | |
| var node = d3.select(document.createElement('div')) | |
| node.style({ | |
| position: 'absolute', | |
| top: 0, | |
| opacity: 0, | |
| 'pointer-events': 'none', | |
| 'box-sizing': 'border-box' | |
| }) | |
| return node.node() | |
| } | |
| function getSVGNode(el) { | |
| el = el.node() | |
| if(el.tagName.toLowerCase() == 'svg') | |
| return el | |
| return el.ownerSVGElement | |
| } | |
| // Private - gets the screen coordinates of a shape | |
| // | |
| // Given a shape on the screen, will return an SVGPoint for the directions | |
| // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), | |
| // sw(southwest). | |
| // | |
| // +-+-+ | |
| // | | | |
| // + + | |
| // | | | |
| // +-+-+ | |
| // | |
| // Returns an Object {n, s, e, w, nw, sw, ne, se} | |
| function getScreenBBox() { | |
| var targetel = target || d3.event.target, | |
| bbox = {}, | |
| matrix = targetel.getScreenCTM(), | |
| tbbox = targetel.getBBox(), | |
| width = tbbox.width, | |
| height = tbbox.height, | |
| x = tbbox.x, | |
| y = tbbox.y | |
| point.x = x | |
| point.y = y | |
| bbox.nw = point.matrixTransform(matrix) | |
| point.x += width | |
| bbox.ne = point.matrixTransform(matrix) | |
| point.y += height | |
| bbox.se = point.matrixTransform(matrix) | |
| point.x -= width | |
| bbox.sw = point.matrixTransform(matrix) | |
| point.y -= height / 2 | |
| bbox.w = point.matrixTransform(matrix) | |
| point.x += width | |
| bbox.e = point.matrixTransform(matrix) | |
| point.x -= width / 2 | |
| point.y -= height / 2 | |
| bbox.n = point.matrixTransform(matrix) | |
| point.y += height | |
| bbox.s = point.matrixTransform(matrix) | |
| return bbox | |
| } | |
| return tip | |
| }; | |
| })); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Slovensko - referendum 2015</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="d3.tip.js"></script> | |
| <style type="text/css"> | |
| .leaflet-tile-pane { | |
| opacity: .4 | |
| } | |
| .leaflet-container { | |
| background-color: #fff; | |
| } | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| /*margin: 0; | |
| padding: 0;*/ | |
| } | |
| #map { | |
| width: 100%; | |
| height: 90%; | |
| } | |
| circle { | |
| /*fill: #040; | |
| stroke: #040;*/ | |
| cursor: pointer; | |
| fill-opacity: 0.8; | |
| stroke-opacity: 0.01; | |
| } | |
| circle:hover { | |
| stroke-opacity: 1; | |
| } | |
| .towns { | |
| width: 100000px; | |
| height: 100000px; | |
| } | |
| /* this is because of Bootstrap - very important! */ | |
| svg:not(:root) { | |
| overflow: visible; | |
| } | |
| /* D3 tips */ | |
| .d3-tip { | |
| line-height: 1; | |
| /*font-weight: bold;*/ | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| .d3-tip small { | |
| font-size: 0.5em; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| .stronger { | |
| color: yellow; | |
| font-weight: bold; | |
| } | |
| /*overwrite bootstrap*/ | |
| .navbar { | |
| margin-bottom: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="navbar navbar-default" role=navigation"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand">Slovensko - referendum 2015</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="position:fixed;top:125px;z-index:1000;"> | |
| <div class="alert alert-info" style="float:left;" id="legend"> | |
| <h3>Účasť</h3> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="blue"></svg> 100 %<br/> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green"></svg> 50 %<br/> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="yellow"></svg> 21.4 %<br/> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="red"></svg> 0 %<br/> | |
| </div> | |
| </div> | |
| <div id="map"></div> | |
| <script type="text/javascript"> | |
| // Create the map | |
| var map = L.map('map', {'zoomControl':false}).setView([48.55,19.467773], 8); | |
| // add an OpenStreetMap tile layer | |
| // also see http://wiki.openstreetmap.org/wiki/Tiles | |
| L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', { | |
| attribution: 'CC-BY Michal Škop | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR' | |
| }).addTo(map); | |
| L.control.zoom({"position":"topright"}).addTo(map); | |
| //svg | |
| var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns"); | |
| //scale | |
| var radiusScale = d3.scale.sqrt().domain([0, 400000]).range([0, 120]); | |
| var color = colorscale([0,0.214,0.5,1],["red", "yellow", "green", "blue"]); | |
| /* Initialize tooltip */ | |
| var tip = changetooltip(); | |
| /* Invoke the tip in the context of your visualization */ | |
| svg.call(tip); | |
| // Add tooltip div | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 1e-6); | |
| d3.csv('sk.csv', function(data) { | |
| d3.json('sk_referendum.json',function(mayors) { | |
| //mapping | |
| nodes = data | |
| .map(function(d) { | |
| mpoint = projectPoint(d.lat,d.long); | |
| ret = { | |
| x: mpoint.x, | |
| y: mpoint.y, | |
| //r: radiusScale(d.size), //radiusScale(mayors[d.id]["turnout"]), | |
| name: d.name, | |
| value: d //including whole d | |
| }; | |
| if (typeof(mayors[d.id]) != 'undefined') { | |
| ret['mayor'] = mayors[d.id]; | |
| ret['r'] = radiusScale(mayors[d.id]["turnout"]); | |
| } | |
| return ret; | |
| }); | |
| //adding circles | |
| var circle = svg.selectAll("svg") | |
| .data(nodes) | |
| .enter().append("svg:svg") | |
| .append("svg:circle") | |
| .attr("class","town") | |
| .attr("cx", function (d) {return d.x}) | |
| .attr("cy", function (d) {return d.y}) | |
| .attr("r", function (d) {return d.r}) | |
| .attr("fill", function (d) { | |
| if (typeof(d.mayor) != 'undefined') { | |
| return color(parseFloat(d.mayor.turnout_perc.replace(",","."))/100); | |
| } else { | |
| return '#ccf'; | |
| } | |
| }) | |
| .on("mouseover", tip.show) | |
| .on("mouseout", tip.hide); | |
| //on zoom or map movement, http://leafletjs.com/reference.html#events | |
| map.on("viewreset", changeit); | |
| map.on("moveend", changeit); | |
| //map.on("move", hidepoints); //not needed | |
| map.on("zoomstart", hidepoints); | |
| $(".towns").show(100); | |
| }); | |
| }); | |
| //helper function matrix to values | |
| function matrixVal(s) { | |
| return s.split('(')[1].split(')')[0].split(','); | |
| } | |
| function hidepoints() { | |
| $(".towns").hide(); | |
| } | |
| // adjust points after map change (zoom, move) | |
| function changeit() { | |
| //Chromium/Chrome does not support well changes, so: | |
| var s = $(".leaflet-map-pane").css("-webkit-transform"); //chromium, opera | |
| if (typeof(s) == 'undefined') | |
| var s = $(".leaflet-map-pane").css("transform"); //ff | |
| var sar = matrixVal(s); | |
| //if towns in svg: (not used if it is div) | |
| $(".towns").css('left',-1*parseFloat(sar[4])); | |
| $(".towns").css('top',-1*parseFloat(sar[5])); | |
| d3.selectAll(".town").each(function(d,i) { | |
| //set correct x,y | |
| mpoint = projectPoint(d.value.lat,d.value.long,d.value.id); | |
| $(this) | |
| .attr("r", | |
| function() { | |
| if (typeof(d.mayor) != 'undefined') | |
| return radiusScale(d.mayor["turnout"]) * Math.pow(map.getZoom(),3) / 512; //power of 3 to show the results better in small scale | |
| else | |
| return 0; | |
| } | |
| ) | |
| /*.attr("stroke-width", | |
| Math.abs(radiusScale(d.value.population.p9)-radiusScale(d.value.population.p6)) * Math.pow(map.getZoom(),3) / 729 //power of 3 to show the results better in small scale | |
| )*/ | |
| .attr("cx", mpoint.x) | |
| .attr("cy", mpoint.y); | |
| //Reposition the SVG to cover the features. | |
| //note: if towns is div, next lines are needed; if it is svg, it is different: | |
| $(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")"); | |
| /*$(this).parent().css('left',-1*parseFloat(sar[4])); | |
| $(this).parent().css('top',-1*parseFloat(sar[5]));*/ | |
| }); | |
| $(".towns").show(300); | |
| } | |
| // Use Leaflet to implement a D3 geometric transformation. | |
| function projectPoint(x, y, id) { | |
| var point = map.latLngToLayerPoint(new L.LatLng(x, y)); | |
| if (!isNumeric(point.x)) alert(id); | |
| return point; | |
| } | |
| function changetooltip() { | |
| tip = d3.tip().attr('class', 'd3-tip').html(function(d) { | |
| html = '<span class="stronger">' + d.name + "</span><br>"; | |
| if (typeof(d.mayor) != 'undefined') { | |
| html += 'Účasť: '+d.mayor.turnout+ ' ('+d.mayor.turnout_perc+'%)<br>'; | |
| html += 'Otázka 1 (manželstvo): '+d.mayor.q1+'%<br>'; | |
| html += 'Otázka 2 (adopcie): '+d.mayor.q2+'%<br>'; | |
| html += 'Otázka 3 (sex.výchova): '+d.mayor.q3+'%<br>'; | |
| } | |
| /*if (typeof(d.value.description) != 'undefined') { | |
| html += d.value.description; | |
| }*/ | |
| /*else | |
| html += 'Ešte nie je rozhodnuté';*/ | |
| return html; | |
| }); | |
| return tip; | |
| } | |
| function isNumeric(n) { | |
| return !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| //set color scale | |
| function colorscale(domain,range) { | |
| return d3.scale.linear() | |
| .domain(domain) | |
| .range(range); | |
| } | |
| </script> | |
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Slovensko - referendum 2015</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="d3.tip.js"></script> | |
| <style type="text/css"> | |
| .leaflet-tile-pane { | |
| opacity: .4 | |
| } | |
| .leaflet-container { | |
| background-color: #fff; | |
| } | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| /*margin: 0; | |
| padding: 0;*/ | |
| } | |
| #map { | |
| width: 100%; | |
| height: 90%; | |
| } | |
| circle { | |
| /*fill: #040; | |
| stroke: #040;*/ | |
| cursor: pointer; | |
| fill-opacity: 0.8; | |
| stroke-opacity: 0.01; | |
| } | |
| circle:hover { | |
| stroke-opacity: 1; | |
| } | |
| .towns { | |
| width: 100000px; | |
| height: 100000px; | |
| } | |
| /* this is because of Bootstrap - very important! */ | |
| svg:not(:root) { | |
| overflow: visible; | |
| } | |
| /* D3 tips */ | |
| .d3-tip { | |
| line-height: 1; | |
| /*font-weight: bold;*/ | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| .d3-tip small { | |
| font-size: 0.5em; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| .stronger { | |
| color: yellow; | |
| font-weight: bold; | |
| } | |
| /*overwrite bootstrap*/ | |
| .navbar { | |
| margin-bottom: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="navbar navbar-default" role=navigation"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand">Slovensko - referendum 2015</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="position:fixed;top:125px;z-index:1000;"> | |
| <div class="alert alert-info" style="float:left;" id="legend"> | |
| <h3>Účasť</h3> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="blue"></svg> 100 %<br/> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green"></svg> 50 %<br/> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="yellow"></svg> 21.4 %<br/> | |
| <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="red"></svg> 0 %<br/> | |
| </div> | |
| </div> | |
| <div id="map"></div> | |
| <script type="text/javascript"> | |
| // Create the map | |
| var map = L.map('map', {'zoomControl':false}).setView([48.55,19.467773], 7); | |
| // add an OpenStreetMap tile layer | |
| // also see http://wiki.openstreetmap.org/wiki/Tiles | |
| L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', { | |
| attribution: 'CC-BY Michal Škop | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR' | |
| }).addTo(map); | |
| L.control.zoom({"position":"topright"}).addTo(map); | |
| //svg | |
| var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns"); | |
| //scale | |
| var radiusScale = d3.scale.sqrt().domain([0, 400000]).range([0, 120]); | |
| var color = colorscale([0,0.214,0.5,1],["red", "yellow", "green", "blue"]); | |
| /* Initialize tooltip */ | |
| var tip = changetooltip(); | |
| /* Invoke the tip in the context of your visualization */ | |
| svg.call(tip); | |
| // Add tooltip div | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 1e-6); | |
| d3.csv('sk.csv', function(data) { | |
| d3.json('sk_referendum.json',function(mayors) { | |
| //mapping | |
| nodes = data | |
| .map(function(d) { | |
| mpoint = projectPoint(d.lat,d.long); | |
| ret = { | |
| x: mpoint.x, | |
| y: mpoint.y, | |
| //r: radiusScale(d.size), //radiusScale(mayors[d.id]["turnout"]), | |
| name: d.name, | |
| value: d //including whole d | |
| }; | |
| if (typeof(mayors[d.id]) != 'undefined') { | |
| ret['mayor'] = mayors[d.id]; | |
| ret['r'] = radiusScale(mayors[d.id]["turnout"]) * Math.pow(7,3) / 512; | |
| } | |
| return ret; | |
| }); | |
| //adding circles | |
| var circle = svg.selectAll("svg") | |
| .data(nodes) | |
| .enter().append("svg:svg") | |
| .append("svg:circle") | |
| .attr("class","town") | |
| .attr("cx", function (d) {return d.x}) | |
| .attr("cy", function (d) {return d.y}) | |
| .attr("r", function (d) {return d.r}) | |
| .attr("fill", function (d) { | |
| if (typeof(d.mayor) != 'undefined') { | |
| return color(parseFloat(d.mayor.turnout_perc.replace(",","."))/100); | |
| } else { | |
| return '#ccf'; | |
| } | |
| }) | |
| .on("mouseover", tip.show) | |
| .on("mouseout", tip.hide); | |
| //on zoom or map movement, http://leafletjs.com/reference.html#events | |
| map.on("viewreset", changeit); | |
| map.on("moveend", changeit); | |
| //map.on("move", hidepoints); //not needed | |
| map.on("zoomstart", hidepoints); | |
| $(".towns").show(100); | |
| }); | |
| }); | |
| //helper function matrix to values | |
| function matrixVal(s) { | |
| return s.split('(')[1].split(')')[0].split(','); | |
| } | |
| function hidepoints() { | |
| $(".towns").hide(); | |
| } | |
| // adjust points after map change (zoom, move) | |
| function changeit() { | |
| //Chromium/Chrome does not support well changes, so: | |
| var s = $(".leaflet-map-pane").css("-webkit-transform"); //chromium, opera | |
| if (typeof(s) == 'undefined') | |
| var s = $(".leaflet-map-pane").css("transform"); //ff | |
| var sar = matrixVal(s); | |
| //if towns in svg: (not used if it is div) | |
| $(".towns").css('left',-1*parseFloat(sar[4])); | |
| $(".towns").css('top',-1*parseFloat(sar[5])); | |
| d3.selectAll(".town").each(function(d,i) { | |
| //set correct x,y | |
| mpoint = projectPoint(d.value.lat,d.value.long,d.value.id); | |
| $(this) | |
| .attr("r", | |
| function() { | |
| if (typeof(d.mayor) != 'undefined') | |
| return radiusScale(d.mayor["turnout"]) * Math.pow(map.getZoom(),3) / 512; //power of 3 to show the results better in small scale | |
| else | |
| return 0; | |
| } | |
| ) | |
| /*.attr("stroke-width", | |
| Math.abs(radiusScale(d.value.population.p9)-radiusScale(d.value.population.p6)) * Math.pow(map.getZoom(),3) / 729 //power of 3 to show the results better in small scale | |
| )*/ | |
| .attr("cx", mpoint.x) | |
| .attr("cy", mpoint.y); | |
| //Reposition the SVG to cover the features. | |
| //note: if towns is div, next lines are needed; if it is svg, it is different: | |
| $(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")"); | |
| /*$(this).parent().css('left',-1*parseFloat(sar[4])); | |
| $(this).parent().css('top',-1*parseFloat(sar[5]));*/ | |
| }); | |
| $(".towns").show(300); | |
| } | |
| // Use Leaflet to implement a D3 geometric transformation. | |
| function projectPoint(x, y, id) { | |
| var point = map.latLngToLayerPoint(new L.LatLng(x, y)); | |
| if (!isNumeric(point.x)) alert(id); | |
| return point; | |
| } | |
| function changetooltip() { | |
| tip = d3.tip().attr('class', 'd3-tip').html(function(d) { | |
| html = '<span class="stronger">' + d.name + "</span><br>"; | |
| if (typeof(d.mayor) != 'undefined') { | |
| html += 'Účasť: '+d.mayor.turnout+ ' ('+d.mayor.turnout_perc+'%)<br>'; | |
| html += 'Otázka 1 (manželstvo): '+d.mayor.q1+'%<br>'; | |
| html += 'Otázka 2 (adopcie): '+d.mayor.q2+'%<br>'; | |
| html += 'Otázka 3 (sex.výchova): '+d.mayor.q3+'%<br>'; | |
| } | |
| /*if (typeof(d.value.description) != 'undefined') { | |
| html += d.value.description; | |
| }*/ | |
| /*else | |
| html += 'Ešte nie je rozhodnuté';*/ | |
| return html; | |
| }); | |
| return tip; | |
| } | |
| function isNumeric(n) { | |
| return !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| //set color scale | |
| function colorscale(domain,range) { | |
| return d3.scale.linear() | |
| .domain(domain) | |
| .range(range); | |
| } | |
| </script> | |
| <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> |
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment