<h1>ABOUT ME</h1>

<p> In deze infographic is weergegeven wat mijn belangrijke stappen zijn geweest in mijn leven. Het geeft een kort maar leuk overzicht weer. </p>

​

<div class="infographic">

  <div id="timeline"></div>

</div>

​

<div id="particles-js"></div>

body { 

  margin: 0; 

  font-family: 'Open Sans', sans-serif;

  font-size: 13px;

  color: black;

} 

​

​

​

canvas { 

  display: block; 

  vertical-align: bottom;

} 

​

h1 {

  left: 11%;

  top: 10%;

  color: black;

  z-index: 3;

  position: absolute;

  font-size: 5em;

  background-color: white;

}

​

p {

    left: 11%;

  top: 25%;

  color: black;

  z-index: 3;

  position: absolute;

  font-size: 1em;

  width: 20%;

  border: 0px solid black;

  background-color: white;

}

​

#particles-js { 

  position: fixed;

  width: 100%;

  height: 100%;

  background-image: url("https://i.imgsafe.org/9b577c7dea.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  top: 0;

  z-index:  2;

}

​

.infographic {

  margin-top: 20%;

  margin-bottom: 20%;

  margin-left: 20%;

  position: absolute;

  z-index:  3;

  text-align: center;

  height: auto;

}

​

line.timeline {

  stroke-width: 20px;

  stroke: black;

}

​

circle.dot {

  fill: #D4F6F0;

}

//PARTICLES JS

​

particlesJS("particles-js", {

  "particles": {

    "number": {

      "value": 400,

      "density": {

        "enable": true,

        "value_area": 100

      }

    },

    "color": {

      "value": "#000000"

    },

    "shape": {

      "type": "circle",

      "stroke": {

        "width": 2,

        "color": "#D4F6F0"

      },

      "polygon": {

        "nb_sides": 400

      },

    },

    "opacity": {

      "value": 1,

      "random": true,

      "anim": {

        "enable": true,

        "speed": 10,

        "opacity_min": 0,

        "sync": false

      }

    },

    "size": {

      "value": 2,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 10,

        "size_min": 1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": false,

      "distance": 150,

      "color": "#D4F6F0",

      "opacity": 0.4,

      "width": 3

    },

    "move": {

      "enable": true,

      "speed": 6,

      "direction": "none",

      "random": true,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 600,

        "rotateY": 600

      }

    }

  },

  "interactivity": {

    "detect_on": "canvas",

    "events": {

      "onhover": {

        "enable": true,

        "mode": "bubble"

      },

      "onclick": {

        "enable": false,

        "mode": "repulse"

      },

      "resize": true

    },

    "modes": {

      "grab": {

        "distance": 400,

        "line_linked": {

          "opacity": 1

        }

      },

      "bubble": {

        "distance": 200,

        "size":5,

        "duration": 10,

        "opacity": 0,

        "speed": 3

      },

      "repulse": {

        "distance": 400,

        "duration": 0.4

      },

      "push": {

        "particles_nb": 4

      },

      "remove": {

        "particles_nb": 2

      }

    }

  },

  "retina_detect": true

}           

);

​

//LABELLA JS

​

var data = [

  {date: new Date(1994, 4,18), 

   name:'Sylvie Petronella Adriana Maria Geboren '},

  {date: new Date(1995, 4,18), 

   name: 'Het eerste woordje van Sylvie - Mama'},

  {date: new Date(1995, 3,12), 

   name: 'Kruipen'},

  {date: new Date(1996, 4,12), 

   name: 'Eerste stapjes'},

  {date: new Date(1997, 5,31), 

   name: 'Peuterspeelzaal'},

    {date: new Date(1998, 5,31), 

     name: 'Basisschool - De Stappen'},

  {date: new Date(2001, 5,31), 

   name: 'Gestart met Handbal - HV Heerle'},

  {date: new Date(2003, 5,31), 

   name: 'Eerste vriendje'},

   {date: new Date(2006, 5,31), 

    name: 'Middelbare school - Bergen Op Zoom, het Rijks'},

     {date: new Date(2007, 5,31), 

      name: 'Handbal - Deel uitmaken van de Brabantse Selectie '},

   {date: new Date(1994, 5,31), 

    name: ''},

    {date: new Date(2008, 5,31), 

     name: 'Grootste Handbaltoernooi in Zweden gespeeld'},

    {date: new Date(2009, 5,31), 

     name: 'NK Handbal gespeeld'},

   {date: new Date(2009, 5,31), 

     name: 'Grootste Handbaltoernooi in Zweden gespeeld'},

    {date: new Date(2010, 5,31), 

     name: 'Keuze vakken Economie & Maatschappij - het Rijks'},

    {date: new Date(2009, 5,31), 

     name: 'Grootste Handbaltoernooi in Denemarken gespeeld'},

    {date: new Date(2011, 5,31), 

     name: 'Examenjaar middelbare - het Rijks '},

     {date: new Date(2011, 10,31), 

     name: 'Bachelor Stad en Streekontwikkeling - Has Hogeschool'},

       {date: new Date(2012, 10,31), 

     name: 'Propedeuse Stad en Streekontwikkeling - Has Hogeschool'},

     {date: new Date(2011, 10,31), 

     name: 'Bijbaantje Keukenpersoneel - Pannenkoekenbakker Heerle'},

      {date: new Date(2012, 10,31), 

     name: 'Stage -  gemeente Roosendaal'},

  {date: new Date(2013, 10,31), 

     name: 'Stage -  SPILL & Kartuizer - Liempde'},

    {date: new Date(2014, 10,31), 

     name: 'Stage - Calamatta Landscapes - Malta'},

     {date: new Date(2014, 10,31), 

     name: 'Afgestudeerd Bachelor Stad en Streekontwikkeling - Has Hogeschool'},

 {date: new Date(2014, 10,31), 

     name: 'Afgestudeerd Bachelor Stad en Streekontwikkeling - Has Hogeschool'},

 {date: new Date(2015, 10,31), 

     name: 'Start Bachelor Grafische & Digitale Media - AP Hogeschool'},

   {date: new Date(2016, 10,31), 

     name: 'Start Bachelor Crossmedia Design - AP Hogeschool'},

];

​

var options =   {

  margin: {left: 20, right: 20, top: 20, bottom: 20},

  initialWidth: 500,

  initialHeight: 1000,

};

​

var innerWidth =  options.initialWidth - options.margin.left - options.margin.right;

var innerHeight = options.initialHeight - options.margin.top - options.margin.bottom;

var colorScale = d3.scale.category10();

​

var vis = d3.select('#timeline')

  .append('svg')

  .attr('width',  options.initialWidth)

  .attr('height', options.initialHeight)

  .append('g')

  .attr('transform', 'translate('+(options.margin.left)+','+(options.margin.top)+')');

​

function labelText(d){

  return d.date.getFullYear() + ' - ' + d.name;

}

​

​

​

var dummyText = vis.append('text');

​

var timeScale = d3.time.scale()

  .domain(d3.extent(data, function(d){return d.date;}))

  .range([0, innerHeight])

  .nice();

​

var nodes = data.map(function(movie){

  var bbox = dummyText.text(labelText(movie))[0][0].getBBox();

  movie.h = bbox.height;

  movie.w = bbox.width;

  return new labella.Node(timeScale(movie.date), movie.h + 4, movie);

});

​

dummyText.remove();

​

vis.append('line')

  .classed('timeline', true)

  .attr('y2', innerHeight);

​

var linkLayer = vis.append('g');

var labelLayer = vis.append('g');

var dotLayer = vis.append('g');

​

dotLayer.selectAll('circle.dot')

  .data(nodes)

  .enter().append('circle')

  .classed('dot', true)

  .attr('r', 3)

  .attr('cy', function(d){return d.getRoot().idealPos;});

​

function color(d,i){

  return '#1D1F20';

}

​

var renderer = new labella.Renderer({

  layerGap: 60,

  nodeHeight: nodes[0].width,

  direction: 'right'

});

​

function draw(nodes){

  renderer.layout(nodes);

​

  var sEnter = labelLayer.selectAll('rect.flag')

    .data(nodes)

    .enter().append('g')

    .attr('transform', function(d){return 'translate('+(d.x)+','+(d.y-d.dy/2)+')';});

​

  sEnter

    .append('rect')

    .classed('flag', true)

    .attr('width', function(d){ return d.data.w + 9; })

    .attr('height', function(d){ return d.dy; })

    .attr('rx', 2)

    .attr('ry', 2)

    .style('fill', color);

​

  sEnter

    .append('text')

    .attr('x', 4)

    .attr('y', 15)

    .style('fill', '#D4F6F0')

    .text(function(d){return labelText(d.data);});

​

  linkLayer.selectAll('path.link')

    .data(nodes)

    .enter().append('path')

    .classed('link', true)

    .attr('d', function(d){return renderer.generatePath(d);})

    .style('stroke', color)

    .style('stroke-width',2)

    .style('opacity', 0.6)

    .style('fill', 'none');

}

​

var force = new labella.Force({

  minPos: -10

})

  .nodes(nodes)

  .compute();

​

draw(force.nodes());