123

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.

            
              
<body>

  <div id="content">
    <button id="kartknapp" class="kartknappklass">Vad tjänar grannen? Klicka för att se karta!</button>

     <h2>Medellöner för <br>undersköterskor</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">&#10006;<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"> &#9660;</span></button><button id="sortLonStig" class="sortknapp">lön<span class="mindre"> &#9650;</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"> &#9660;</p></span></button><button id="sortLonStig" class="sortknapp"><p class="knapptext">lön<span class="mindre"> &#9650;</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>

            
          
!
            
              /* Använder CSS-filen från "Medelloner2017" som extern resurs */
            
          
!
            
              (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

      // yrke = this.value;
      yrke = "Undersköterska";
      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");
}



})();

            
          
!
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