Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div>
  <div id="plaatje">
    <h1>Uitgaven per dag</h1>
    <ul class="legenda">
      <li><section></section>
        <p>Uitgegeven aan Eten</p>
      </li>
      <li><section></section>
        <p>Uitgegeven aan overige</p>
      </li>
    </ul>
    <div id="tooltip" class="hidden">
      <p><span id="value"></span></p>
    </div>
  </div>
</div>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
              
            
!

CSS

              
                svg {
  padding-top: 20px;
  padding-bottom: 100px;
}

h1 {
  font: 50px 'Amatic SC', cursive;
  text-align: center;
}

p {
  font-family: arial;
  font-size: 1em;
  color: black;
  margin: 0px;
}

ul {
  margin: 0 auto;
  display: block;
  width: 600px;
  text-align: center;
}

li {
  text-decoration: none;
  list-style-type: none;
  margin-bottom: 3%;
  margin-right: 15%;
  float: left;
  width: 200px;
}

li:first-of-type section {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  border: 5px solid #203659;
  background-color: #08FBFF;
}

li:nth-of-type(2) section {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  border: 5px solid pink;
  background-color: #08FBFF;
}

section {
  width: 15px;
  height: 5px;
  text-anchor: middle;
  background-color: #45a4af;
  float: left;
  margin-right: 4%;
}

path {
  fill: none;
  /*de lijn in mijn grafiek wil ik geen fill geven*/
  stroke: black;
  /*de x en y as lijn geef ik een zwarte kleur*/
  stroke-width: 2px;
  /*de x en y as lijn geef een dikte eme van 2 px*/
}

text {
  font-family: sans-serif;
  font-size: 0.7em;
  color: black;
  text-anchor: end !important;
  /*hiermee zet ik de tekst schuin*/
}

.tick line {
  opacity: 10;
  stroke: #919191;
  /*achtergrond lijnen*/
}

.x text {
  transform: rotate(-60deg);
  /*draai de tekst */
  transform-origin: 20% 80%;
}

svg > path {
  /* stroke: #0B2F70; */
  /*kleur van de doorgetrokken lijn*/
  stroke-width: 6px;
  /*de dikte van de doorgetrokken streep*/
}

circle {
  stroke: #203659;
  /*kleur van de buiten circle*/
  stroke-width: 4px;
  /*omtrek circle*/
  r: 5px;
  /*binnenkant circle*/
  fill: #08FBFF;
  height: 2px;
  width: 2px;
}

circle:hover {
  r: 10px;
  /*binnenkant circle*/
  stroke-width: 10px;
}

#tooltip {
  position: absolute;
  /*het vakje*/
  text-align: center;
  margin-left: 2%;
  padding: 1% 2%;
  background-color: #00628C;
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
  /*deze roep je aan als je over de bolletjes hovert*/
}

#tooltip p {
  color: white;
  /*tekst opmaken*/
  margin: 0;
  font-family: sans-serif;
  font-size: 1em;
  line-height: 20px;
}
              
            
!

JS

              
                //margins voor de hele grafiek
var margin = {top: 20, right: 30, bottom: 30, left: 60},
    width = 700,
    height = 400;

//scale is niet linear, haalt data verder op uit jsonbestand. data komt naast elkaar en wordt niet bij elkaar opgeteld zoals linear op de Y as
// een schaal is een functie die kaart van input tot output bereik
var x = d3.scale.ordinal()
          // RangeBands stelt minimum en Maximum en padding
          // met een ordinal scale gebruik je geen getallen maar stukjes uit             // een array
          .rangeRoundBands([0, width], 0.1);

//scale is linear (optellen van 0 tot 12)
//range is geeft aan wat de grote is van je scherm aantal pixels waarin je grafiek moet komen
var y = d3.scale.linear()
          .range([height, 0]);

var plaatje = d3.select("#plaatje").append("svg")
                .attr("width", width + margin.left + margin.right)
                //hoogte krijgt een links en rechtse margin
                .attr("height", height + margin.top + margin.bottom);
                //breedte krijgt een links en rechtse margin

var xAs = d3.svg.axis()
            .scale(x)
            .innerTickSize(-height) //de lijnen op de achtergrond horizontaal
            .tickPadding(10) // de datums op de x as krijgen padding
            .orient("bottom"); //xas onder de horizontale lijn

var yAs = d3.svg.axis()
            .scale(y)
            .innerTickSize(-width) //de lijnen op de achtergrond verticaal
            .tickPadding(10) // de cijvers op de x as krijgen padding
            .ticks(6) //hoe wil je de schaal verdeling
            .orient("left"); //yas links van verticale lijn

//aanroepen json data
d3.json("https://codepen.io/lauwibeetz/pen/vNoNJw.js", function(data) {
  x.domain(data.map(function(d) {return d.Date}));
  //Domain is input, data op xas, met data.map krijg ik alle values van de key   //date  
  y.domain([0, d3.max(data, function(d) {return 120})]);
  //aantallen op yas, tot 120

  //xas en yxas aanroepen
  plaatje.append("g")
          //g is to group a set of SVG elements that share the same attribute 
          .attr("class", "x axis")
          //class om de x axis op te pakken en er iets mee te kunnen doen
          .attr("transform", "translate(" + margin.left + ",0" + height + ")")
          //transform om elementen te kunnen bewegen. translate 60 naar links             //en 700 naar benden. xas onderaan  
          .call(xAs);
  
  plaatje.append("g")
         //g is to group a set of SVG elements that share the same attribute
         .attr("class", "y axis") //opmaak voor xas
         .attr("transform", "translate(" + margin.left + ",0)")
         //transform om het element te kunnen bewegen. translate 60 naar links          //en waar begint de x as Om een nieuwe assenstelsel voor een set van            //SVG-elementen te definiëren door toepassing van een transformatie            //naar elk coördinaat in deze set van SVG-elementen
         .call(yAs)
         .append("text")
         //voeg tekst toe aan de y as
         .text("Euro")
         // welke tekst wil je bij de y as
         .attr("transform", "rotate(-90)")
         //draai de tekst zodat het naast de y as komt
         .attr("y", -35);
         //geef de tekst padding mee

  //Data ophalen voor de lijn
  var line = d3.svg.line()
               .x(function(d) {return x(d.Date);})//data op xas
               .y(function(d) {return y(d.Overige);}); //Data van overige                      //invullen in grafiek

  //lijn tekenen 
  plaatje.append("path")
         //path zijn lijnen en punten die een vormen maken
         .attr("class", "Overige") //zo kunnen we de lijn animeren in greensock
         .attr("d", line(data)) //haal de data op uit de functie hierboven
         .attr("transform", "translate(" + 77 + ",0)")
         .style("stroke", "pink");
         //ruimte links overlaten, lijn niet tegen de yas aan transform zo kun          //je de element animeren

  //Data ophalen voor de lijn
  var line1 = d3.svg.line()
                .x(function(d) {return x(d.Date);}) //data op xas
                .y(function(d) {return y(d.Eten);}); //euro's op yas

  //lijn tekenen euro
  plaatje.append("path")
         //path zijn lijnen en punten die een vorm vormt
         .attr("class", "Eten") //zo kunnen we de lijn animeren in greensock
         .attr("d", line1(data)) //haal de data op uit de functie hierboven
         .attr("transform", "translate(" + 77 + ",0)");
         //ruimte links overlaten, lijn niet tegen de yas aan, transform zo kun          //je de element animeren

  //cirkels toevoegen op de datapunten
  var dots = plaatje.selectAll("circle") //selecteer alle cirkels
                    .data(data)
                    .enter()
                    .append("g");

  dots.append("circle") //cirkels toevoegen 
      .attr("class", "datadotEten") //hiermee kun je annimeren
      //index is de positie van de array
      .attr("cx", function(d, i) {return x(d.Date)}) //versprijden over de x
      .attr("cy", function(d, i) {return y(d.Eten)}) // hoeveel euro heb je per       //dag uitgegeven aan eten
      .attr("transform", "translate(" + 77 + ",0)")
      //ruimte linksoverlaten, niet tegen yas aan
      //hieronder een tooltip maken
      .on("mouseover", function(d, i) {
          d3.select("#tooltip")
          .style("left", d3.event.pageX + "px")//het vakje komt rechts van je             //muis
          .style("top", d3.event.pageY + "px")
          //zet het vak je bij je muis en niet bovenaan de pagina
          .select("#value") //opmaken van tekst
          .text(d.Eten + " euro") //tekst die op tooltip komt te staan
          d3.select("#tooltip").classed("hidden", false);
       }) //hover op cirkel               //laat tooltip zien
       .on("mouseout", function(d) {
          d3.select("#tooltip").classed("hidden", true)
       });//muis weg van cirkel verbergt tooltip

  dots.append("circle") //cirkels toevoegen 
      .attr("class", "datadotOverige") //hiermee kun je annimeren
      .attr("cx", function(d, i) {return x(d.Date)}) //versprijden over de x
      .attr("cy", function(d, i) {return y(d.Overige)})// hoeveel euro heb je         //per dag uitgegeven aan kleding
      .style("stroke", "pink")
      .attr("transform", "translate(" + 77 + ",0)")
      .on("mouseover", function(d, i) {
          d3.select("#tooltip")
          .style("left", d3.event.pageX + "px")
          //het vakje komt rechts van je muis
          .style("top", d3.event.pageY + "px")
          //zet het vak je bij je muis en niet bovenaan de pagina
          .select("#value") //opmaken van tekst
          .text(d.Overige + " euro")
          //tekst die op tooltip komt te staan
          d3.select("#tooltip").classed("hidden", false);
      }) //hover op cirkel laat tooltip zien
      .on("mouseout", function(d) {
          d3.select("#tooltip").classed("hidden", true)
      });//muis weg van cirkel verbergt tooltip

    //animatie
    TweenLite.from("h1",2,{y:-300, opacity:0});
    TweenLite.from(".legenda",3,{x:-300, opacity:0, delay:1});
    //teken lijn begin vanaf 0
    TweenLite.from(".Overige,.Eten",9,{
      drawSVG:"0% 0%", 
      ease:Linear.easeNone,
      delay:10
    },4);
    TweenMax.staggerFrom(".datadotOverige",0.5, { 
      opacity:0, 
      y:-400, 
      ease:Bounce.easeOut
    },1);
    TweenMax.staggerFrom(".datadotEten",0.5,{
      opacity:0, 
      y:-400, 
      ease:Bounce.easeOut
    },1);
});
              
            
!
999px

Console