<body>
<div id="content">
<button id="kartknapp" class="kartknappklass">Vad tjänar grannen? Klicka för att se karta!</button>
<h2>
<select id="valjyrke">
<option value="Väljyrke">Välj yrke</option>
<option value="Ambulanssjukvårdare">Ambulanssjukvårdare (landsting)</option>
<option value="Anläggningsarbetare-fordonsförare">Anläggningsarbetare (kommun)</option>
<option value="Barnskötare">Barnskötare (kommun)</option>
<option value="Barnsköterska">Barnsköterska (landsting)</option>
<option value="Biträde">Biträde (landsting)</option>
<option value="Elevassistent">Elevassistent (kommun)</option>
<option value="Fastighetsskötare">Fastighetsskötare (kommun)</option>
<option value="Fordonsförare">Fordonsförare (kommun/landsting)</option>
<option value="Fotvårdsspecialist">Fotvårdsspecialist (landsting)</option>
<option value="Fritidsledare">Fritidsledare (kommun)</option>
<option value="Förrådsarbetare">Förrådsarbetare (landsting)</option>
<option value="Kock_kokerska">Kock-kokerska (kommun)</option>
<option value="Laboratoriebiträde">Laboratoriebiträde(landsting)</option>
<option value="Måltidspersonal">Måltidspersonal (landsting)</option>
<option value="Park_och_trädgårdsarbetare">Park och trädgårdsarbetare (kommun)</option>
<option value="Personlig_assistent">Personlig assistent (kommun)</option>
<option value="Skötare">Skötare (kommun/landsting)</option>
<option value="Städare">Städare (kommun/landsting)</option>
<option value="Undersköterska">Undersköterska (kommun/landsting)</option>
<option value="Vaktmästare">Vaktmästare (kommun/landsting)</option>
<option value="Vårdare">Vårdare (kommun)</option>
<option value="Vårdbiträde">Vårdbiträde (kommun)</option>
</select></h2>
<div id="kartdiv">
<div id="lansdiv">
<p class="psmal">Klicka på ett län för att se lönerna i kommunerna och/eller landstinget-regionen.</p>
<div id="kartpopup">
<div id="kartpopuprubbe"></div>
<div class="close"><span id="closex" class="closex">✖<span></div>
<table id="karttabell" class="karttabell"></table>
</div>
</div>
</div>
<div id="lonlista">
<h4 class="knapprad">Sortera på:</h4>
<div id="sortknapp" class="knapprad">
<!-- <button class="sortknapp">Sortera på:</button><button id="sortKommun" class="sortknapp">namn</button><button id="sortLonFall" class="sortknapp">lön<span class="mindre"> ▼</span></button><button id="sortLonStig" class="sortknapp">lön<span class="mindre"> ▲</span></button><button id="visaLandsting" class="sortknapp">Visa landsting</button> -->
<button id="sortKommun" class="sortknapp"><p class="knapptext">namn</p></button><button id="sortLonFall" class="sortknapp"><p class="knapptext">lön<span class="mindre"> ▼</p></span></button><button id="sortLonStig" class="sortknapp"><p class="knapptext">lön<span class="mindre"> ▲</p></span></button>
<!-- <button id="visaLandsting" style="display:inline">Visa landsting</button> -->
</div>
<div class="knapprad">
<button id="visaLandsting" class="sortknapp"><p class="knapptext">Visa landsting</p></button>
</div>
<div id="mintabelldiv" style="width:100%">
<table id="mintabell" class="tabellstil">
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var sokvagYrkeslon = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/kommunloner17.json";
var sokvagYrkesLandsting = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/landstingsloner17.json"
// var yrke = 'Elevassistent';
var sokvagGeografi = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/SverigesLan.geojson"
</script>
</body>
* {
padding: 0px;
}
body {
font: 12px sans-serif;
padding: 0px;
background-color: #f5f7f7;
}
h1 {
font-size: 3em;
}
h3 {
text-transform: uppercase;
font-size: 1.5em;
padding: 0 5px 0 5px;
/*padding: 0px;
margin: 0px;*/
}
h4 {
padding: 0px 0px 0px 0px;
margin: 0px;
font-size: 1.4em;
}
h2 {
/*text-transform: uppercase;*/
}
select {
width: 65%;
/*max-width: 65%;*/
font-weight: 600;
font-size: 1em;
letter-spacing: 0px;
/*height: 100px;*/
}
/*option {
font-size: 20px;
font-weight: 600;
}*/
path {
stroke-width: 1px;
stroke: white;
fill: steelblue;
cursor: pointer;
}
path:hover, path.highlighted {
fill: tomato;
}
/*path:hover {
fill: tomato;
}*/
div.tooltip {
position: absolute;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
padding: 4px 8px;
display: none;
}
button:active {
background-color: black;
}
table.tabellstil {
/*table-lay out: fixed;*/
width: auto;
text-align: left;
font-family: sans-serif;
/*table-layout:fixed;*/
/*width: 400px;*/
}
#mintabell {
width: 100%;
max-width: 460px;
overflow-x: auto;
}
table.tabellstil th {
vertical-align: text-top;
padding: 5px 0px 0px 5px;
font-size: 1.5em;
text-transform: uppercase;
line-height: 30px;
background-color: #005578;
color: white;
overflow: auto;
}
table.tabellstil td {
vertical-align: text-top;
/*white-space: nowrap;*/
font-size: 1.5em;
padding: 0 0px 0 5px;
line-height: 40px;
overflow: auto;
/*max-width: 0;*/
}
table.karttabell {
/*table-lay out: fixed;*/
width: 100%;
text-align: left;
font-family: sans-serif;
font-size: 1.5em;
line-height: 25px;
/*width: 400px;*/
}
.karttabell td {
white-space: normal;
font-size:1em;
padding: 0 5px 0 5px;
line-height: 25px;
color: black;
/*line-height: 100px;*/
}
tr:nth-child(odd) {
background-color: #B5d3e7;
}
tr:nth-child(even) {
background-color: white;
}
.bubbla:hover {
background-color: grey;
}
.bubblatext {
visibility: hidden;
font-size: 18px;
line-height: 22px;
font-weight: normal;
width: 130px;
/*font-size: 1.2em;*/
/*height: 500px;*/
/*background-color: #dcdcdc;*/
background-color: yellow;
color: black;
text-align: center;
padding: 5px 0;
border-radius: 6px;
text-align: left;
/* Position the tooltip text - see examples below! */
position: absolute;
left: 30px;
padding: 10px;
z-index: 1;
}
#kartpopup {
display: none;
/*float: left;*/
width: 50%;
min-width: 250px;
/*height: 500px;*/
float: right;
background-color: white;
opacity: 0.9;
border: 2px solid black;
position: absolute;
/*right: 0px;*/
left: 20%;
top: 80px;
z-index: 10;
}
#kartpopuprubbe {
width: 90%;
}
#kartpopup2 {
display: none;
/*float: left;*/
width: 50%;
min-width: 215px;
/*height: 500px;*/
float: right;
background-color: white;
opacity: 0.9;
border: 2px solid black;
/*position: absolute;*/
position: absolute;
/*right: 0px;*/
left: 20%;
top: 680px;
z-index: 10;
}
span.closex {
font-size: 3em;
/*color: steelblue;*/
}
span.closex:hover {
color: steelblue;
}
div.close {
float: right;
position: absolute;
top: 5px;
right: 5px;
}
.bold {
font-weight: bold;
}
.kartknappklass {
position: absolute;
top: 0px;
left: 80%;
border: 0;
box-shadow: 3px 3px 5px;
right: 10px;
width: 127px;
height: 127px;
border-radius: 65px;
background-color: yellow;
font-weight: bold;
font-size: 1.1em;
z-index: 5;
}
.kartknappklass:hover {
background-color: #cccc00;
}
#visaLandsting {
/*font-size: 1.5em;
height: 25px;
padding: 0px;
margin: 0px;
background-color: #660000;
color: white;
padding: 0 5px 0 5px;
border: 0;*/
border-radius: 5px 5px 5px 5px;
}
#visaLandsting:hover {
background-color: #cc0000;
}
.knapprad {
width: 100%;
padding-bottom: 10px;
padding-left: 1px;
left: 3px;
display: inline-block;
vertical-align: bottom;
}
p.knapptext {
padding: 0px 3px 0px 3px;
margin: 0px;
}
#sortknapp button:first-child {
border-radius: 5px 0 0 5px;
}
#sortknapp button:last-child {
/*width: 33%;*/
border-radius: 0 5px 5px 0;
}
.sortknapp {
font-size: 1.5em;
height: 25px;
padding: 10px;
margin: 10px;
background-color: #660000;
color: white;
/*font-weight: bold;*/
padding: 0 5px 0 5px;
border: 0;
margin: 0px;
text-align: left;
/*vertical-align: bottom;*/
}
.sortknapp:hover {
background-color: #cc0000;
}
.disableknapp {
pointer-events: none;
background-color: #a8a8a8;
color: #d3d3d3;
}
.mindre {
font-size: 80%;
}
#content {
/*width: 450px;*/
width: 100%;
max-width: 732px;
/*position: relative;*/
padding: 0px;
position: relative;
background-color: #f5f7f7;
}
#lonlista {
width: 100%;
}
.psmal {
width: 40%;
position: absolute;
float: left;
font-size: 1.5em;
font-weight: 550;
background-color: white;
opacity: 0.8;
padding: 2px;
}
(function () {
'use strict';
var kdata = null;
var rdata = null;
var html = '';
var lonlista = document.getElementById("lonlista");
var tabell = document.getElementById('mintabell');
var rad, cell1, cell2;
var count = 1;
var sortKommun = document.getElementById('sortKommun');
var sortLonFall = document.getElementById('sortLonFall');
var sortLonStig = document.getElementById('sortLonStig');
var lonlista = document.getElementById('lonlista');
var visaLista = document. getElementById('visaLista');
var kartdiv = document.getElementById('kartdiv');
var kartpopup = document.getElementById('kartpopup');
var kartpopuprubbe = document.getElementById('kartpopuprubbe');
var kartknapp = document.getElementById('kartknapp');
var close = document.getElementById("closex");
//Variable for table tooltip
var bubbla = document.createElement('span');
bubbla.className = 'bubblatext';
//nya för yrkeslöner
var yrke = "Väljyrke";
// var yrke = "undersköterska";
var valjyrke = document.getElementById("valjyrke");
//Wait for document ready
$(document).ready(function() {
// put your page initialization code here
valjyrke.addEventListener("change", function() {
yrke = this.value;
console.log(yrke);
kartpopup.style.display = "none";
visaLandsting.classList.add("disableknapp");
//If "Välj yrke" is chosen, make table with kommuner (and no numbers, which is stated in "maketable" function)
if (yrke === 'Väljyrke') {
tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
maketable(kdata, tabell, 1);
}
else {
//Check if yrke is present in file "kdata", if it is, make table from "kdata"
for (var i = 0; i < kdata.length; i++) {
if (kdata[i].hasOwnProperty(yrke)) {
tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2016</th>"
maketable(kdata, tabell, 1);
visaLandsting.innerHTML = "Visa landsting";
//Check if yrke is also present in "rdata", if it is, enable the visaLandsting button
for (var i = 0; i < rdata.length; i++) {
if (rdata[i].hasOwnProperty(yrke)) {
visaLandsting.classList.remove("disableknapp");
break;
}
}
break;
}
//Executes if yrke is present only in file "rdata"
else {
tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2016</th>"
maketable(rdata, tabell, 1);
visaLandsting.innerHTML = "Visa kommuner";
}
}
}
})
});
var selectlista = document.getElementsByTagName('OPTION');
//Always start with first item in list selected
Object.keys(selectlista).forEach(function(key) {
selectlista[0].setAttribute("selected", "selected");
});
//Hide map from start
kartdiv.style.display = "none";
//To give "x" in kartpopup closing function
close.addEventListener("click", function() {
kartpopup.style.display = "none";
})
//load the file of kommuner into variable kdata and draw the table
$.ajax({
//testing consid url
url: window.sokvagYrkeslon,
// url: "kommunlan.json",
dataType: "json",
mimeType: "application/json",
success: function (data) {
kdata = data;
kdata.reverse();
tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2016</th>"
maketable(kdata, tabell, 1);
},
error: function (/* request, error */) {
console.log('Network error has occurred please try again!');
}
})
// load the file of regioner and landsting into variable kdata and draw the table
$.ajax({
url: window.sokvagYrkesLandsting,
dataType: "json",
mimeType: "application/json",
success: function (data) {
rdata = data;
},
error: function (/* request, error */) {
console.log('Network error has occurred please try again!');
}
})
//Add click to kartknapp and toggle visibility
kartknapp.addEventListener('click', function() {
if (lonlista.style.display !== 'none') {
lonlista.style.display = "none";
kartdiv.style.display = "block";
kartpopup.style.display = "none";
kartknapp.innerHTML = 'Visa alla löner på en lista'
}
else {
kartdiv.style.display = "none";
lonlista.style.display = "block";
kartknapp.innerHTML = 'Vad tjänar grannen? Klicka för att se karta!'
}
})
// add click to visaLandsting-knapp and change innerHTML
visaLandsting.addEventListener('click', function() {
tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
if (visaLandsting.innerHTML === "Visa landsting") {
tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2016</th>"
maketable(rdata, tabell, 1);
visaLandsting.innerHTML = "Visa kommuner"
}
else {
tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2016</th>"
maketable(kdata, tabell, 1);
visaLandsting.innerHTML = "Visa landsting"
}
})
//Add click to button, sort and create the table
sortKommun.addEventListener('click', function() {
if (yrke != "Väljyrke") {
tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
//check if landsting or kommun is chosen
if (visaLandsting.innerHTML === "Visa landsting") {
kdata.sort(function(a, b){
var kommunA=a.Kommun.toLowerCase(), kommunB=b.Kommun.toLowerCase();
if (kommunA < kommunB) //sort string ascending
return -1;
if (kommunA > kommunB)
return 1;
return 0; //default return value (no sorting)
})
//reverse sorting order to ascending
kdata.reverse();
maketable(kdata, tabell, 1);
}
else {
rdata.sort(function(a, b){
var kommunA=a.Kommun.toLowerCase(), kommunB=b.Kommun.toLowerCase();
if (kommunA < kommunB) //sort string ascending
return -1;
if (kommunA > kommunB)
return 1;
return 0 ;//default return value (no sorting)
})
//reverse sorting order to ascending
rdata.reverse();
maketable(rdata, tabell, 1);
}
}
});
//Add click to button, sort and create the table
sortLonStig.addEventListener('click', function() {
if (yrke != "Väljyrke") {
tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
if (visaLandsting.innerHTML === "Visa landsting") {
kdata.sort(function(a, b){
return a[yrke]-b[yrke];
})
kdata.reverse();
maketable(kdata, tabell, 1);
}
else {
rdata.sort(function(a, b){
return a[yrke]-b[yrke];
})
rdata.reverse();
maketable(rdata, tabell, 1);
}
}
});
//Add click to button, sort and create the table
sortLonFall.addEventListener('click', function() {
if (yrke != "Väljyrke") {
tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
if (visaLandsting.innerHTML === "Visa landsting") {
kdata.sort(function(a, b){
return a[yrke]-b[yrke];
})
maketable(kdata, tabell, 1);
}
else {
rdata.sort(function(a, b){
return a[yrke]-b[yrke];
})
maketable(rdata, tabell, 1);
}
}
});
//Add table rows of sorted data
function maketable(data, tabell, index) {
data.forEach(function(row) {
count = index;
rad = tabell.insertRow(count);
cell1 = rad.insertCell(0);
cell2 = rad.insertCell(1);
cell1.innerHTML = row.Kommun;
//To show blanks instead of "undefined" iv "Välj yrke" is selected
if (yrke === 'Väljyrke') {
cell2.innerHTML = '';
visaLandsting.classList.add("disableknapp");
}
else {
cell2.innerHTML = row[yrke];
}
if (row.Kommun === 'RIKSSNITT') {
cell1.style.fontWeight = "bold";
cell2.style.fontWeight = "bold";
}
//When to show the yellow bubbles
bubbelvillkor(row);
count++;
})
};
//function to show and hide bubbla
function showhide(row, bubble) {
var bubblor = document.getElementsByClassName('bubblatext');
rad.addEventListener("click", function() {
//hide the active bubble if it's visible
if (bubble.style.visibility === "visible") {
bubble.style.visibility = "hidden";
}
//First hide other bubbles that may be visible, then show the active bubble
else {
for (var i = 0; i < bubblor.length; i++) {
bubblor[i].style.visibility = "hidden";
bubble.style.visibility = "visible";
}
}
})
}
function bubbelvillkor(row) {
if (row[yrke] === '') {
rad.classList.add('bubbla');
var cl2 = bubbla.cloneNode(true);
rad.appendChild(cl2);
cl2.style.left = '50px';
cl2.innerHTML = "Uppgift saknas då det finns få eller inga anställda i yrkeskategorin.";
// hide(rad);
showhide(rad, cl2);
if (row.Kommun === 'Norrtälje Tiohundra AB*') {
cl2.innerHTML += " Bolaget Tiohundra AB ägs av Norrtälje Kommun och Stockholms Läns Landsting.";
}
if (row.Kommun === 'Sollentuna AB SOLOM*') {
cl2.innerHTML += " Sollentuna driver omsorg i egen regi genom kommunägda bolaget AB SOLOM.";
}
}
else if (row.Kommun === 'Norrtälje Tiohundra AB') {
rad.classList.add('bubbla');
rad.appendChild(bubbla);
bubbla.innerHTML = "Bolaget Tiohundra AB ägs av Norrtälje Kommun och Stockholms Läns Landsting.";
showhide(rad, bubbla);
}
else if (row.Kommun === 'Sollentuna AB SOLOM') {
rad.classList.add('bubbla');
var cl1 = bubbla.cloneNode(true);
rad.appendChild(cl1);
cl1.innerHTML = "Sollentuna driver omsorg i egen regi genom kommunägda bolaget AB SOLOM.";
showhide(rad, cl1);
}
}
//Nedan kommer allt som har med kartan att göra
//Map dimensions (in pixels)
var width = 264,
height = 600;
//Map projection
var projection = d3.geo.conicEqualArea()
.scale(2365.51882004263)
.center([16.382656313727672,62.34103687152436]) //projection center
.parallels([55.327583999999995,69.059967]) //parallels for conic projection
.rotate([343.6173436862723]) //rotation for conic projection
.translate([432.31469742010825,256.8639471506867]) //translate to center the map in view
//Generate paths based on projection
var path = d3.geo.path()
.projection(projection);
//Create an SVG
var svg = d3.select("#lansdiv").append("svg")
// var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//Group for the map features
var features = svg.append("g")
.attr("class","features");
//Create zoom/pan listener //disabled becuase it messes up in mobile devices
//Change [1,Infinity] to adjust the min/max zoom scale
// var zoom = d3.behavior.zoom()
// .scaleExtent([1, Infinity])
// .on("zoom",zoomed);
// svg.call(zoom);
//Create a tooltip, hidden at the start
var tooltip = d3.select("body").append("div").attr("class","tooltip");
d3.json(window.sokvagGeografi,function(error,geodata) {
if (error) return console.log(error); //unknown error, check the console
//Create a path for each map feature in the data
features.selectAll("path")
.data(geodata.features)
.enter()
.append("path")
.attr("d",path)
.on("mouseover",showTooltip)
.on("mousemove",moveTooltip)
.on("mouseout",hideTooltip)
.on("click",clicked);
});
// Click-function for kartpopup
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {
hideTooltip;
karttabell.innerHTML = '';
kartpopuprubbe.innerHTML = '';
var lan = d.properties.lan_namn;
var landsting = d.properties.landsting;
//Show kartpopup on click
kartpopup.style.display = "block";
//Sort by lön, ascending
kdata.sort(function(a, b){
return a[yrke]-b[yrke]
})
//Check if yrke is present in file "kdata" and "rdata", one round is enough to know
for (var i = 0; i < 1; i++) {
if (kdata[i].hasOwnProperty(yrke)) {
//Add rows from file "kdata"
kdata.forEach(function(row) {
if (d.properties.landsting === row.Landsting) {
rad = karttabell.insertRow(0);
cell1 = rad.insertCell(0);
cell2 = rad.insertCell(1);
cell1.innerHTML = row.Kommun;
if (typeof row[yrke] === 'undefined'){
cell2.innerHTML = '';
}
else {
cell2.innerHTML = row[yrke];
}
bubbelvillkor(row);
}
})
}
if (rdata[i].hasOwnProperty(yrke)) {
rdata.forEach(function(row) {
if (landsting === row.Kommun) {
rad = karttabell.insertRow(karttabell.rows.length);
cell1 = rad.insertCell(0);
cell2 = rad.insertCell(1);
cell1.innerHTML = 'Landstinget';
cell2.innerHTML = row[yrke];
var cl4 = bubbla.cloneNode(true);
rad.appendChild(cl4);
cl4.innerHTML = "En del landsting kallar sig Regioner.";
if (row[yrke] === '') {
cl4.innerHTML = ' Uppgift om lön saknas då det finns få eller inga anställda i yrket. (En del landsting kallar sig Regioner.)'
}
showhide(rad, cl4);
rad.classList.add('bold', 'bubbla');
}
})
}
}
//Create the headline
var rub = document.createElement('H3');
var rubtext = document.createTextNode(lan);
rub.appendChild(rubtext);
kartpopuprubbe.appendChild(rub);
}
//Update map on zoom/pan // zoom is disabled because it messes up in mobile devices
// function zoomed() {
// features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
// .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
// }
//Position of the tooltip relative to the cursor
var tooltipOffset = {x: 5, y: -25};
//Create a tooltip, hidden at the start
function showTooltip(d) {
moveTooltip();
tooltip.style("display","block")
.text(d.properties.lan_namn);
}
//Move the tooltip to track the mouse
function moveTooltip() {
tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px")
.style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}
//Create a tooltip, hidden at the start
function hideTooltip() {
tooltip.style("display","none");
}
})();
External CSS
This Pen doesn't use any external CSS resources.