A Pen by Auke Klumper

Thumbnail
This awesome code was written by aukeee, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aukeee ©
  • HTML
  • CSS
  • JavaScript
    <body>
    <h1>Hoeveel invloed heeft alcohol op mijn drang naar een sigaret?</h1>
    <h2>Over het algemeen rook ik een stuk meer als ik alcohol gedronken heb.
    </h2>
    <div id="grafiek"></div>
    <div id="legenda">
      <p class="sigaretten">AANTAL SIGARETTEN</p>
      <p class="bier">AANTAL GLAZEN BIER</p>
    </div>
</body>
</html>

/*Downloaded from https://www.codeseek.co/aukeee/a-pen-by-auke-klumper-Bjaedw */
    body {
  background: #CCFFE2;
}

h1 {
  font-family: times;
  color: #555555; 
  margin-left: 40px;
  font-size: 28px;
}

h2 {
  font-family: times;
  color: #555555; 
  margin-left: 40px;
  font-size: 16px;
}

.axis path,
.axis line {
  stroke: #4d4d4d;
  fill: none;
  shape-rendering: crispEdges;
}

#grafiek text {
  color: #4d4d4d;
  font-family: 'Helvetica Neue';
  font-size: 11px;
}

#legenda {
  position: absolute;
  right: 20px;
  top: 100px;
  font-family: 'helvetica neue';
  text-align: right;
  line-height: 8px;
  font-size: 14px;
  font-weight: 600;
}

.sigaretten {
  color: #89D1AF; 
}

.bier {
  color: #74B290; 
}


/*Downloaded from https://www.codeseek.co/aukeee/a-pen-by-auke-klumper-Bjaedw */
    /*Data bestandje inladen, welke in een andere codepen staat*/
var data = data;

/*definieren van positie, breedtes en hoogte van de grafiek*/
var margin = {
  top: 20,
  right: 20,
  bottom: 40,
  left: 40
  },
  width = 800 - margin.left - margin.right,
  widthX = 760 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

/*Definieren van de x-as, met breedte 0 tot widthX en 0.05 marge tussen de bars*/
var x = d3.scale.ordinal()
  .rangeBands([0, widthX], 0.05);

/*Definieren van de y-as, met breedte 0 tot widthX en 0.05 marge tussen de bars*/
var y = d3.scale.linear()
  .range([height, 0]);

/*hier ga ik de x en y as een positie geven in mijn svg en de scale van hierboven wordt genomen. orient verteld waar de tekens dus komen te staan ten opzichte van de xaxis en de yaxis.*/
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

/*dit zijn de kleuren voor mijn grafiek, met de range geef ik dus 2 kleuren aan waarmee ik de 'pixel space' vul.*/
var color = d3.scale.ordinal()
  .range(["#74B290", "#89D1AF"]);

/*aanmaken van svg waarin de grafiek wordt getoond*/
var svg = d3.select("#grafiek").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

/*hiermee geef ik de data weer met de juiste kleur. Voor elke d wordt kleuren toegewezen aan de keys: 'aantal sigaretten' en 'aantal glazen bier'*/
color.domain(d3.keys(data[0]).filter(function(key) {
  return key !== "datum";}));

/*data.map maakt een nieuwe array met values aan. De functie(d) looped door alle objecten en geeft voor elk object te d.datum terug. Zo weet je dus hoeveel elementen er op de x-as komen te staan*/
x.domain(data.map(function(d) {
  return d.datum ;}));

/*hier wordt de maximale y waarde bepaald hij telt voor elke 'd' het aantal glazen en sigaretten op en kijk zo hoe hoog de y-as moet worden*/
y.domain([0,d3.max(data, function(d){
  return d['aantal glazen bier'] + d['aantal sigaretten']})]);

/*Deze functie looped door alle data en geeft voor elke 'd' de juiste color aan een specifiek element (aantal glazen bier en aantal sigaretten)*/
data.forEach(function(d) {
  var y0 = 0;
  d.types = color.domain().map(function(name) {
  return {
      name: name,
      y0: y0,
      y1: y0 += d[name]
    };
  });
;});

/*TOEVOEGEN VAN ELEMENTEN AAN SVG*/

/*toevoegen van x axis*/
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

/*toevoegen van y axis*/
svg.append("g")
  .attr("class", "axis")
  .call(yAxis);

/*toevoegen van de bars*/
var datum = svg.selectAll(".datum")
  .data(data)
  .enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) {
    return "translate(" + x(d.datum) + ",0)";
  });

/*alle rectangles worden geselecteerd. De breedte en hoogte worden berekent en de fill wordt opgehaald*/
datum.selectAll("rect")
  .data(function(d) {
    return d.types;
  })
  .enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return y(d.y1);
  })
  .attr("height", function(d) {
    return y(d.y0) - y(d.y1);
  })
  .style("fill", function(d) {
    return color(d.name);
  });

/*Toeveogen van animatie*/
var move = new TimelineMax({repeat: 0});

move
.from(".g", 1, {scaleY:0, delay: 0.5, ease:Elastic.easeOut,     transformOrigin: 'bottom'}); 


Comments