Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Lon17</title>

  <script src="d3.v3.min.js"></script>


  <div id="content">
      <h1>Löner i olika yrken</h1>
    <!-- <h2> -->
      <select id="valjyrke">
        <option value="Väljyrke">Välj yrke</option>
        <option value="Ambulanssjukvårdare">Ambulanssjukvårdare (landsting)</option>
        <option value="Anläggningsarbetare">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/landsting)</option>
        <option value="Laboratoriebiträde">Laboratoriebiträde(landsting)</option>
        <option value="Måltidspersonal">Måltidspersonal (kommun/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="overlay"></div>
    <div id="kartdiv">

      <div id="lansdiv">
        <p class="psmal">Välj yrke i menyn ovan, klicka sen 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">&#10006;<span></div>
          <table id="karttabell" class="karttabell"></table>
        </div>
      </div>

    </div>



    <div id="lonlista">
      <p class="pstor" id=valtyrkep>Välj yrke för att se lönelista.</p>

      <input type="radio" name="alt" value="listKommuner" class="yrkesbutton" id="listKommuner"><label>kommuner</label>
      <input type="radio" name="alt" value="listLandsting" class="yrkesbutton" id="listLandsting"><label >landsting</label>
      <br>

      <div id="sortknapp" class="knapprad">
          <button class = sortknapp><p class="knapptext">Sortera på: </p></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"> &#9660;</p></span></button><button id="sortLonStig" class="sortknapp"><p class="knapptext">lön<span class="mindre"> &#9650;</p></span></button>

      </div>
      <div id="mintabelldiv" style="width:100%">
        <table id="mintabell" class="tabellstil"></table>
      </div>

      <div id="showmore"></div>

      </div>


      <div></div>

    <div id="jamforyrkediv">

        <h1>Jämför yrken</h1>
        <input type="radio" name="alt" value="kommuner" class="yrkesbutton"><label id="kommuner">kommuner</label>
        <input type="radio" name="alt" value="landsting" class="yrkesbutton"><label id="landsting">landsting</label>
        <p class="pstor" id="yrkep">Visar <span id="yrkesspan">genomsnitt för alla kommuner.</span></p>
        <p class="input pstor" id="sokkommun">Sök kommun</h2>
        <input type="text" name="search" placeholder="Kommun" id="searchfield"></p>

          <select id="valjlandsting">
          <option value="RIKSSNITT">Välj landsting</option>
          <option value="Landstinget Blekinge">Landstinget Blekinge</option>
          <option value="Landstinget Dalarna">Landstinget Dalarna</option>

          <option value="Landstinget i Kalmar län">Landstinget i Kalmar län</option>
          <option value="Landstinget i Värmland">Landstinget i Värmland</option>
          <option value="Landstinget Sörmland">Landstinget Sörmland</option>
          <option value="Landstinget Västernorrland">Landstinget Västernorrland</option>
          <option value="Region Gotland">Region Gotland</option>
          <option value="Region Gävleborg">Region Gävleborg</option>
          <option value="Region Halland">Region Halland</option>
          <option value="Region Jämtland Härjedalen">Region Jämtland Härjedalen</option>
          <option value="Region Jönköpings län">Region Jönköpings län</option>
          <option value="Region Kronoberg">Region Kronoberg</option>
          <option value="Region Norrbotten">Region Norrbotten</option>
          <option value="Region Skåne">Region Skåne</option>
          <option value="Region Uppsala">Region Uppsala</option>
          <option value="Region Västmanland">Region Västmanland</option>
          <option value="Region Örebro län">Region Örebro län</option>
          <option value="Region Östergötland">Region Östergötland</option>
          <option value="Stockholms läns landsting">Stockholms läns landsting</option>
          <option value="Västerbottens läns landsting">Västerbottens läns landsting</option>
          <option value="Västra Götalandsregionen">Västra Götalandsregionen</option>
        </select>

        <div id="yrken">
          <table id="yrkestabell" class="tabellstil"></table>
          <svg class="chart" id="chart"></svg>
        </div>
      </div>
</div>



<script type="text/javascript">
    var sokvagYrkeslon = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/kommunloner18.json";
    var sokvagYrkesLandsting = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/landstingsloner18.json"
    var sokvagGeografi = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/SverigesLan.geojson"
</script>


<script src="lon17.js"></script>




            
          
!
            
              
* {
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;

}

body {
  font: 12px sans-serif;
  padding: 0px;
  background-color: #f5f7f7;
}

h1 {
  background-color: #1c3448;
  color: white;
  padding: 4px;
}

h3 {
  text-transform: uppercase;
  font-size: 1.5em;
  padding: 0 5px 0 5px;
}

h4 {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  font-size: 1.4em;
}

h2 {
}

select {
  width: 100%;
  font-weight: 600;
  font-size: 1.7em;
  letter-spacing: 0px;
}


path {
  stroke-width: 1px;
  stroke: white;
  fill: steelblue;
  cursor: pointer;
}

path:hover, path.highlighted {
  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 {
  width: auto;
  text-align: left;
  font-family: sans-serif;
}

label {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 1.4em;
}



#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* pointer-events: none; */
}

#jamforyrkediv {
}

#valjlandsting {
  display: none;
  margin-bottom: 10px;
}

#mintabell {
  width: 100%;
  overflow-x: auto;
}

#mintabelldiv {
  max-height: 225px;
  overflow: auto;
  position: relative;
}


#showmore {
  position: relative;
  bottom: 20px;

  background: linear-gradient(rgba(10,10,10,0),rgba(10,10,10,1));

  height: 20px;
  line-height: 70px;
  width: 100%;
  pointer-events: none;
  }


input {
  display: inline-block;
}

table.tabellstil th {
  vertical-align: text-top;
  padding: 5px 0px 0px 5px;
  font-size: 1.4em;
  text-transform: uppercase;
  line-height: 26px;
  background-color: steelblue;

  color: white;
  overflow: auto;
}


table.tabellstil td {
  vertical-align: text-top;
  font-size: 1.5em;
  padding: 0 0px 0 5px;
  line-height: 28px;
  overflow: auto;
}


table.karttabell {
  width: 100%;
  text-align: left;
  font-family: sans-serif;
  font-size: 1.5em;
  line-height: 25px;
}


.karttabell td {
  white-space: normal;
  font-size:1em;
  padding: 0 5px 0 5px;
  line-height: 25px;
  color: black;
}


tr:nth-child(odd) {
  background-color: #b5cde1;
}

.bubbla:hover {
  background-color: grey;
}


.bubblatext {
    visibility: hidden;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    width: 130px;
    background-color: yellow;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    text-align: left;
    position: absolute;
    left: 30px;
    padding: 10px;
    z-index: 1;
}

#lansdiv {
  position: relative;
}

#kartpopup {
  display: none;
  width: 50%;
  min-width: 250px;
  max-width: 450px;
  float: right;
  background-color: white;
  opacity: 0.9;
  border: 2px solid black;
  position: absolute;
  left: 20%;
  top: 80px;
  z-index: 10;
}

#kartpopuprubbe {
  width: 90%;
}

#kartpopup2 {
  display: none;
  width: 50%;
  min-width: 215px;
  float: right;
  background-color: white;
  opacity: 0.9;
  border: 2px solid black;
  position: absolute;
  left: 20%;
  top: 680px;
  z-index: 10;
}

#kartpopup p {
  padding: 0px 10px 0px 10px;
}

span.closex {
  font-size: 3em;
  }

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: 60%;
  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;
}



.knapprad {
  width: 100%;
  padding-bottom: 10px;
  padding-left: 1px;
  padding-top: 10px;
  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 {
  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;
}

#sortknapp button:first-child:hover {
  background-color: #660000;

}


.mindre {
  font-size: 80%;
}



#content {
  width: 100%;
  max-width: 732px;
  padding: 0px;
  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;mintabell
}

.pstor {
  font-size: 1.5em;
}

table {
    width: 400px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

#searchfield {
font-size: 20px;
}

/* #valjlandsting {
  font-size: 20px;
} */

/* SVG stuff for the bar chart */
.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  fill: #f5f7f7;
  font: 14px sans-serif;
  text-anchor: end;
}

            
          
!
            
              (function () {
    'use strict';


var kdata = null;
var rdata = null;
var html = '';
var rad, cell1, cell2;
var count = 1;
var landsting;
var yrkesarray = [];
//Variable for table tooltip
var bubbla = document.createElement('span');
bubbla.className = 'bubblatext';
var yrke = "Väljyrke";

//variables for elements from html document
var lonlista = document.getElementById("lonlista");
var tabell = document.getElementById('mintabell');
var yrken = document.getElementById("yrken");
var yrkestabell = document.getElementById('yrkestabell')
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 close = document.getElementById("closex");
var yrkesspan = document.getElementById('yrkesspan');
var mintabelldiv = document.getElementById('mintabelldiv');
var overlay = document.getElementById('overlay');
var yrkesbuttons = document.getElementsByClassName('yrkesbutton');
var valjlandsting = document.getElementById('valjlandsting');
var sokyrke = document.getElementById('sokyrke');
var listLandstingKnapp = document.getElementById('listLandsting');
var listKommunKnapp = document.getElementById('listKommuner');
var valtyrkep = document.getElementById('valtyrkep');
var selectlista = document.getElementsByTagName('OPTION');
var valjyrke = document.getElementById("valjyrke");



//Wait for document ready
$(document).ready(function() {

    //choose yrke in list
    valjyrke.addEventListener("change", function() {

      yrke = this.value;
      kartpopup.style.display = "none";
      //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)) {
          listKommunKnapp.disabled = false;
          listKommunKnapp.checked = true;
          listLandstingKnapp.disabled = true;
          tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2017</th>";
          maketable(kdata, tabell, 1);
          //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)) {
              listLandstingKnapp.disabled = false;
              break;
              }
            }
          break;
        }
        //Executes if yrke is present only in file "rdata"
        else {

          listLandstingKnapp.disabled = false;
          listKommunKnapp.disabled = true;
          listLandstingKnapp.checked = true;
          tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2017</th>";
          maketable(rdata, tabell, 1);

          }
        }
      }

      //Make the text grey in the label for a disabled button
      for (var i = 0; i < yrkesbuttons.length; i++) {
        if (yrkesbuttons[i].disabled) {

          yrkesbuttons[i].nextSibling.style.color = "#E8E8E8";
        }
        else {
          yrkesbuttons[i].nextSibling.style.color = "black";
        }
      }

      //put the right text in the p element above the lönlista
      valtyrkep.textContent = "Visar lönelista för ";
      //create variable with the choosen profession, replacing underscores with spaces
      var yrkestext = document.createTextNode(yrke.toLowerCase().replace(/_/g, ' ') + '.');
      valtyrkep.appendChild(yrkestext);
      if (yrke === "Väljyrke") {
        valtyrkep.innerHTML = 'Välj yrke för att visa lönelista.';
      }

    });


});



//Always start with first item in list selected
Object.keys(selectlista).forEach(function(key) {
    selectlista[0].setAttribute("selected", "selected");
});



//Give "x" in kartpopup closing function
close.addEventListener("click", function() {
  kartpopup.style.display = "none";
  overlay.style.display = "none";
})


//load the file of kommuner into variable kdata and draw the table
$.ajax({
        url: window.sokvagYrkeslon,
        dataType: "json",
        mimeType: "application/json",
        success: function (data) {
            kdata = data;
            kdata.reverse();
            tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2017</th>"
            maketable(kdata, tabell, 1);
            jamforyrke(kdata, 'RIKSSNITT', 4);
            },
        error: function (/* request, error */) {
            console.log('Network error has occurred please try again!');
        }
})

// load the file of regioner and landsting into variable rdata
$.ajax({

        url: window.sokvagYrkesLandsting,
        dataType: "json",
        mimeType: "application/json",
        success: function (data) {
            rdata = data;
            rdata.reverse();
            },
        error: function (/* request, error */) {
            console.log('Network error has occurred please try again!');
        }
})





//Add click to button, sort by kommun/landsting 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 (getvalue(yrkesbuttons) === "listKommuner") {
  // 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 if (getvalue(yrkesbuttons) === "listLandsting") {
    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 by salary (ascending) and create the table
sortLonStig.addEventListener('click', function() {
  if (yrke != "Väljyrke") {

  tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
  if (getvalue(yrkesbuttons) === "listKommuner") {
    kdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
    kdata.reverse();
    maketable(kdata, tabell, 1);
  }
  else if (getvalue(yrkesbuttons) === "listLandsting") {
    rdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
    rdata.reverse();
    maketable(rdata, tabell, 1);
    }
  }
});

//Add click to button, sort by salary (descending) and create the table
sortLonFall.addEventListener('click', function() {
  if (yrke != "Väljyrke") {

  tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
  if (getvalue(yrkesbuttons) === "listKommuner") {
    kdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
    maketable(kdata, tabell, 1);
  }
  else if (getvalue(yrkesbuttons) === "listLandsting") {
    rdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
      maketable(rdata, tabell, 1);
    }

  }
});


// Function for comparing proffessions
// @params 'data' = array of objects loaded from json file with ajax
//         'valdkommun' = kommun or landsting, will be given or chosen from search field or select list
//          index = number indicating at which index to start displaying the proffessions. Needed because the kommun- and landsting files are differently structured
function jamforyrke(data, valdkommun, index) {
  //start with emptying the chart element
  $("#chart").empty();

  //empty array that will collect the chosen proffessions
  yrkesarray = [];
  //empty object for yrke
  var yrke;

  //Building the array 'yrkessarray'
  data.forEach(function(row) {

    if (row.Kommun === valdkommun) {
      for (var x = index; x < Object.keys(row).length; x++) {
        //start with emptying the object
        yrke = {};
        //Build an object with properties 'lön' and yrke
        yrke['yrke'] = Object.keys(row)[x];
        yrke['lön'] = Object.values(row)[x];
        //put the object in an array
        yrkesarray.push(yrke);
        }
      }
    });
    //make a bar chart with d3
    makeGraph(yrkesarray);
};

// make a bar chart with d3
function makeGraph(data1) {
  //sort the data
  data1.sort(function(x, y){
     return d3.descending(x.lön, y.lön);
  })


  var width = 300,
      barHeight = 25;

  var x = d3.scale.linear()
      .range([0, width])

  var chart = d3.select(".chart")
      .attr("width", width);


  //Using inline json works if you leave file name blank, and then refer directly to the variable name instead of "data", in this case "data1"
  d3.json('', function(error, data) {
      data1.forEach(function(d) {
             d.lön = +d.lön;
     });

    x.domain([0, d3.max(data1, function(d) { return d.lön; })]);

    chart.attr("height", barHeight * data1.length);

    var bar = chart.selectAll("g")
        .data(data1)
      .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

    bar.append("rect")
        .attr("width", function(d) { return x(d.lön); })
        .attr("height", barHeight - 1);

    bar.append("text")
        .attr("x", function(d) { return x(d.lön) - 3; })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) {
          //using jqery number to put a space as thousands delimiter
          d.lön = $.number(d.lön, 0, ',', ' ');

          return d.lön; });

    bar.append("text")
        .attr("x", 5)
        .style("text-anchor", "start")
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) {
          //using regex to replace underscore with space
          d.yrke = d.yrke.replace(/_/g, ' ');
          return d.yrke; });
  });
}




//handling input in search field
$("input").on("keydown",function search(e) {
  console.log('hanterar input');
    var data = kdata;
    //index for kommun is 4, because that is the position of the first proffession in the array
    var index = 4;
    //key 13 is "enter"
    if(e.keyCode == 13) {
      var sokt = $(this).val();
      //traverse the data file
      data.forEach(function(row) {
        //find i match, in lowercase
        if (row.Kommun.toLowerCase() === sokt.toLowerCase()){
          //build the array and make the graph
          jamforyrke(data, row.Kommun, index);
          //Show the name of the chosen kommun
          yrkesspan.innerHTML = 'löner för ' + row.Kommun + '.';
          $('#yrkep').hide().fadeIn();
        }
      })
    }
});

//Check the third radiobutton on loading page, to make the Kommun choice default
function checkfromstart(radiobuttons) {
  radiobuttons[2].checked = true;
}

checkfromstart(yrkesbuttons);


//Getting the value of the checked radiobutton
function getvalue(radiobuttons) {
  for (var i = 0; i < radiobuttons.length; i++) {
    if (radiobuttons[i].checked === true) {
      return radiobuttons[i].value;
      }
  }
}

//Action for the radiobuttons yrkesbuttons, choose Kommun or Landsting
$('.yrkesbutton').on('click', function(e) {
  //testa i flera browsers om det räcker med 'click', testa annars
  // $('.yrkesbutton').on('click change', function(e) {

    //first two conditionals are for the Jämför yrken graph
    if (getvalue(yrkesbuttons) === "kommuner") {
      //index for kdata is 4 because that is the position of the first proffesion in that array
      jamforyrke(kdata, 'RIKSSNITT', 4);
      //Show which data is chosen
      yrkesspan.innerHTML = 'genomsnitt för alla kommuner.';
      $('#yrkep').hide().fadeIn();
      //Show the search field for kommun
      sokkommun.style.display = "block";
      //hide the select list for landsting
      valjlandsting.style.display = 'none';

    }
    else if (getvalue(yrkesbuttons) === "landsting") {
        //index for rdata is 1 because that is the position of the first proffesion in that array
        jamforyrke(rdata, 'RIKSSNITT', 1);
        //show which data is chosen
        yrkesspan.innerHTML = 'genomsnitt för alla landsting.<p></p>Välj ett landsting i listan:';
        //hide the search filed for kommun
        sokkommun.style.display = "none";
        //show the select list for landsting
        valjlandsting.style.display = 'block';
        $('#yrkep').hide().fadeIn();
    }
    //Third and fourth conditionals are for the Lönlista table
    else if (getvalue(yrkesbuttons) === 'listKommuner') {
      tabell.innerHTML = "<tr><th>kommuner</th><th>Lön 2017</th>";
            maketable(kdata, tabell, 1);
    }
    else if (getvalue(yrkesbuttons) === 'listLandsting') {
      tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
        tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2017</th>";
      maketable(rdata, tabell, 1);
    }

});

//Event vor the select list of landsting
valjlandsting.addEventListener("change", function() {

  landsting = this.value;
  //Build the array (and make the graph) from the chosen data
  //argument 'this.value' = the chosen lansdting,
  jamforyrke(rdata, this.value, 1);
  if (this.value === "RIKSSNITT") {
    //show which value is chosen
    yrkesspan.innerHTML = 'genomsnitt för alla landsting.<br>Välj ett landsting i listan:';
    $('#yrkep').hide().fadeIn();

  }
  else {
    //show which value is chosen
    yrkesspan.innerHTML = 'löner för ' + this.value + '.';
    // yrkesspan.style.opacity = "0";
    $('#yrkep').hide().fadeIn();
  }

});



//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 = '';
        }
    else {
      var yrkeform = $.number(row[yrke], 0, ',', '&nbsp;')
      if (yrkeform === '0') {
        yrkeform = '';
      }
      cell2.innerHTML = yrkeform;

      }

    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 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 = '';
  if (yrke === 'Väljyrke') {

    karttabell.innerHTML = "<p>Du måste välja ett yrke i listan först</p>";
  }







  var lan = d.properties.lan_namn;
  var landsting = d.properties.landsting;
  //Show kartpopup on click
  kartpopup.style.display = "block";
  //show semitransparent overlay under kartpopup, to make everything under kartpopup look faded
  overlay.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 {

            var yrkeform = $.number(row[yrke], 0, ',', '&nbsp;');
            if (yrkeform === '0') {
              yrkeform = '';
            }
            cell2.innerHTML = yrkeform;
            // 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';
          //formatted variable for lön with space as thousand separator, will be a string
          var yrkeform = $.number(row[yrke], 0, ',', '&nbsp;');
          //changing zero to blanks
          if (yrkeform === '0') {
            yrkeform = '';
          }
          cell2.innerHTML = yrkeform;
          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);
  if (karttabell.innerHTML === '') {
    karttabell.innerHTML = '<p>Uppgift saknas då det finns för få eller inga anställda i yrkeskategorin.</p>';
  }
}


//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");
}



})();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console