Noelfish6/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## emotion.csv

          
            situation
            job
            order
            emotion
            weather
            people1
            people2
            people3

            
              1
              1
              1
              3
              
              1
              0

            
              1
              1
              2
              2
              
              1
              0

            
              1
              1
              3
              7
              
              1
              0

            
              1
              1
              4
              10
              
              1
              0

            
              1
              1
              5
              10
              
              1
              0

            
              1
              1
              6
              10
              
              1
              0

            
              1
              1
              7
              11
              
              1
              0

            
              1
              1
              8
              11
              
              1
              0

            
              1
              1
              9
              1
              
              1
              0

            
              1
              1
              10
              10
              
              1
              0

            
              1
              2
              1
              2
              
              1
              0

            
              1
              2
              2
              2
              
              1
              0

            
              1
              2
              3
              2
              
              1
              0

            
              1
              2
              4
              3
              1
              4
              0

            
              1
              2
              5
              3
              1
              4
              0

            
              1
              2
              6
              4
              
              4
              0

            
              1
              2
              7
              4
              
              4
              0

            
              1
              2
              8
              4
              
              2
              4

            
              1
              2
              9
              4
              
              2
              4

            
              1
              2
              10
              4
              
              4
              0

            
              1
              2
              11
              4
              
              2
              4

            
              1
              2
              12
              2
              
              2
              0

            
              1
              2
              13
              2
              
              1
              0

            
              1
              2
              14
              7
              
              1
              0

            
              1
              2
              15
              10
              
              1
              0

            
              1
              2
              16
              2
              
              1
              0

            
              1
              2
              17
              7
              1
              1
              0

            
              1
              2
              18
              10
              1
              1
              0

            
              1
              2
              19
              10
              1
              1
              0

            
              1
              2
              20
              2
              1
              1
              0

            
              1
              2
              21
              10
              1
              1
              0

            
              1
              2
              22
              10
              1
              2
              4

            
              1
              2
              23
              10
              
              2
              0

            
              1
              2
              24
              10
              
              1
              0

            
              1
              2
              25
              7
              
              1
              0

            
              1
              2
              26
              10
              
              1
              0

            
              1
              2
              27
              10
              
              1
              0

            
              1
              2
              28
              10
              
              1
              0

            
              1
              2
              29
              11
              
              2
              0

            
              1
              2
              30
              11
              
              1
              0

            
              1
              2
              31
              1
              
              4
              0

            
              1
              2
              32
              10
              
              1
              0

            
              1
              2
              33
              10
              
              1
              0

            
              1
              2
              34
              7
              
              1
              0

            
              1
              2
              35
              10
              
              1
              0

            
              1
              2
              36
              11
              
              1
              0

            
              1
              2
              37
              11
              
              1
              0

            
              1
              2
              38
              1
              
              4
              0

            
              1
              2
              39
              10
              
              1
              0

            
              1
              2
              40
              10
              
              1
              0

            
              1
              2
              41
              11
              
              1
              0

            
              1
              2
              42
              11
              
              1
              0

            
              1
              2
              43
              10
              
              1
              0

            
              1
              3
              1
              2
              
              2
              0

            
              1
              3
              2
              3
              1
              2
              0

            
              1
              3
              3
              2
              1
              2
              0

            
              1
              3
              4
              2
              1
              2
              0

            
              1
              3
              5
              2
              
              2
              0

            
              1
              3
              6
              4
              
              2
              0

            
              1
              3
              7
              4
              
              2
              0

            
              1
              3
              8
              2
              
              2
              0

            
              1
              3
              9
              2
              
              2
              0

            
              1
              4
              1
              3
              
              1
              0

            
              1
              4
              2
              2
              
              1
              0

            
              1
              4
              3
              2
              
              1
              0

            
              1
              4
              4
              10
              
              1
              0

            
              1
              4
              5
              11
              
              1
              0

            
              1
              4
              6
              11
              
              1
              0

            
              1
              4
              7
              10
              
              1
              0

            
              1
              4
              8
              10
              
              1
              0

            
              1
              4
              9
              11
              
              1
              0

            
              1
              4
              10
              11
              
              1
              0

            
              1
              4
              11
              1
              
              1
              0

            
              1
              5
              1
              3
              
              4
              0

            
              1
              5
              2
              3
              
              4
              0

            
              1
              5
              3
              3
              
              4
              0

            
              1
              5
              4
              3
              1
              4
              0

            
              1
              5
              5
              3
              1
              4
              0

            
              1
              5
              6
              3
              1
              2
              4

            
              1
              5
              7
              3
              1
              2
              4

            
              1
              5
              8
              2
              
              2
              4

            
              1
              5
              9
              7
              
              2
              4

            
              1
              5
              10
              10
              
              4
              0

            
              1
              5
              11
              10
              
              4
              0

            
              1
              5
              12
              11
              
              4
              0

            
              1
              5
              13
              7
              
              4
              0

            
              1
              5
              14
              10
              
              4
              0

            
              1
              5
              15
              10
              
              4
              0

            
              1
              5
              16
              10
              
              4
              0

            
              1
              5
              17
              10
              
              4
              0

            
              1
              5
              18
              11
              
              4
              0

            
              1
              5
              19
              10
              
              4
              0

            
              1
              5
              20
              1
              
              4
              0

            
              2
              6
              1
              9
              
              1
              0

            
              2
              6
              2
              2
              
              1
              0

            
              2
              6
              3
              6
              
              1
              0

            
              2
              6
              4
              3
              1
              1
              0

            
              2
              6
              5
              3
              1
              1
              0

            
              2
              6
              6
              3
              1
              2
              0

            
              2
              6
              7
              2
              1
              2
              0

            
              2
              6
              8
              2
              
              1

            
              2
              6
              9
              3
              
              1

            
              2
              6
              10
              3
              
              1

            
              2
              6
              11
              3
              
              1

            
              2
              6
              12
              2
              
              2

            
              2
              6
              13
              3
              
              1

            
              2
              6
              14
              3
              
              1

            
              2
              6
              15
              3
              
              1

            
              2
              6
              16
              2
              
              1

            
              2
              6
              17
              3
              
              1

            
              2
              6
              18
              3
              
              1

            
              2
              7
              1
              3
              
              2

            
              2
              7
              2
              4
              1
              2

            
              2
              7
              3
              9
              1
              1

            
              2
              7
              4
              9
              1
              1

            
              2
              7
              5
              2
              
              2

            
              2
              7
              6
              2
              
              1

            
              2
              7
              7
              8
              
              1

            
              2
              7
              8
              6
              
              3

            
              2
              7
              9
              7
              
              1

            
              2
              7
              10
              7
              
              1

            
              2
              7
              11
              10
              
              1

            
              2
              7
              12
              7
              
              3

            
              2
              7
              13
              7
              
              3

            
              2
              7
              14
              7
              
              2

            
              2
              7
              15
              7
              
              1

            
              2
              7
              16
              8
              
              1

            
              2
              7
              17
              8
              
              1

            
              2
              7
              18
              6
              
              1

            
              2
              7
              19
              11
              
              1

            
              2
              7
              20
              10
              
              1

            
              2
              7
              21
              7
              
              1

            
              2
              7
              22
              7
              
              1

            
              2
              7
              23
              1
              
              2

            
              2
              7
              24
              6
              
              1

            
              2
              7
              25
              11
              
              1

            
              2
              7
              26
              1
              
              1

            
              2
              7
              27
              6
              
              1

            
              2
              7
              28
              11
              
              1

            
              2
              7
              29
              7
              
              1

            
              2
              7
              30
              1
              
              1

            
              2
              7
              31
              11
              
              1

            
              2
              7
              32
              10
              
              1

            
              2
              7
              33
              7
              
              1

            
              2
              7
              34
              7
              
              1

            
              2
              7
              35
              7
              
              1

            
              3
              8
              1
              3
              1
              1

            
              3
              8
              2
              9
              
              1

            
              3
              8
              3
              2
              
              1

            
              3
              8
              4
              6
              
              1

            
              3
              8
              5
              11
              
              1

            
              3
              8
              6
              12
              
              1

            
              3
              8
              7
              2
              
              1

            
              3
              9
              1
              4
              
              2

            
              3
              9
              2
              9
              
              2

            
              3
              9
              3
              9
              
              2

            
              3
              9
              4
              9
              
              2
              3

            
              3
              9
              5
              9
              
              2
              3

            
              3
              9
              6
              2
              
              2

            
              3
              9
              7
              2
              
              2

            
              3
              9
              8
              6
              1
              2

            
              3
              9
              9
              9
              1
              2

            
              3
              9
              10
              9
              1
              2

            
              3
              9
              11
              6
              
              3

            
              3
              9
              12
              2
              
              3

            
              3
              9
              13
              7
              
              3

            
              3
              9
              14
              9
              
              2

            
              3
              9
              15
              9
              
              2
              3

            
              3
              9
              16
              8
              
              2
              3
              3

            
              3
              9
              17
              6
              
              2

            
              3
              9
              18
              7
              
              2

            
              3
              9
              19
              11
              
              2

            
              3
              9
              20
              11
              
              2

            
              3
              9
              21
              9
              
              2

            
              3
              9
              22
              9
              
              2

            
              3
              9
              23
              8
              
              3
              3

            
              3
              9
              24
              6
              
              2

            
              3
              9
              25
              7
              
              2
              3

            
              3
              9
              26
              11
              1
              2

            
              3
              9
              27
              11
              1
              2

            
              3
              9
              28
              1
              1
              2

            
              3
              9
              29
              7
              
              3
              3

            
              3
              9
              30
              12
              
              2

            
              3
              10
              1
              4
              
              2

            
              3
              10
              2
              8
              
              3

            
              3
              10
              3
              5
              
              2

            
              3
              10
              4
              10
              
              1

            
              3
              10
              5
              10
              1
              3

            
              3
              10
              6
              10
              1
              3

            
              3
              10
              7
              7
              
              3

            
              3
              10
              8
              7
              
              3

            
              3
              11
              1
              5
              
              1

            
              3
              11
              2
              8
              
              1

            
              3
              11
              3
              6
              
              1

            
              3
              11
              4
              6
              
              1

            
              3
              11
              5
              6
              
              1

            
              3
              11
              6
              6
              
              1

            
              3
              12
              1
              5
              
              2
              3

            
              3
              12
              2
              8
              
              2
              3

            
              3
              12
              3
              6
              
              2
              3

            
              3
              12
              4
              6
              
              2

            
              3
              12
              5
              11
              
              2

            
              3
              12
              6
              10
              
              2

            
              3
              12
              7
              7
              
              2

            
              3
              12
              8
              10
              1
              2

            
              3
              12
              9
              6
              1
              2
              3

            
              3
              12
              10
              11
              1
              2
              3

            
              3
              12
              11
              10
              
              1

            
              3
              12
              12
              10
              
              1

            
              3
              13
              1
              4
              
              2

            
              3
              13
              2
              9
              
              2

            
              3
              13
              3
              5
              
              2

            
              3
              13
              4
              6
              
              2

            
              3
              13
              5
              7
              
              2

            
              3
              13
              6
              9
              
              2

            
              3
              13
              7
              9
              
              2

            
              3
              13
              8
              6
              
              2

            
              3
              13
              9
              12
              
              2

            
              3
              13
              10
              12
              
              2

            
              3
              13
              11
              12
              
              2

            
              3
              13
              12
              9
              
              1

            
              3
              13
              13
              2
              
              1

            
              3
              13
              14
              2
              
              2

            
              3
              13
              15
              6
              1
              2

            
              3
              13
              16
              7
              1
              2

            
              3
              13
              17
              12
              1
              2

            
              3
              13
              18
              12
              1
              2

            
              3
              13
              19
              6
              
              1

            
              3
              13
              20
              6
              
              2

            
              3
              13
              21
              12
              
              2

            
              3
              13
              22
              12
              
              2

            
              3
              14
              1
              3
              
              2

            
              3
              14
              2
              3
              
              2

            
              3
              14
              3
              3
              
              2

            
              3
              14
              4
              3
              1
              2

            
              3
              14
              5
              4
              1
              2

            
              3
              14
              6
              9
              1
              2

            
              3
              14
              7
              1
              
              2

            
              3
              14
              8
              1
              
              2

            
              3
              14
              9
              4
              
              1

            
              3
              14
              10
              1
              
              2

            
              3
              14
              11
              1
              
              2

            
              3
              14
              12
              4
              
              1

            
              3
              14
              13
              4
              1
              2

            
              3
              14
              14
              4
              1
              2

            
              3
              14
              15
              4
              
              2

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
     margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
     background-color: #F4F4F4;
    }

#canvas{
    width:800;
    min-height:800px;
    height:800;
    position: relative;
}

.container {
  position:relative;
	height:800;
}
  </style>
</head>

<body>
  <div class="container">
  	<div class="canvas" id="canvas"></div>
  </div>
  <script>
   var margin = {t:50,r:50,b:50,l:50};


var w = document.getElementById('canvas').clientWidth - margin.l - margin.r,
    h = document.getElementById('canvas').clientHeight - margin.t - margin.b;


var scaleColor = d3.scaleOrdinal()
      .range(["#F6EB9A", "#fda135", "#f9201f", "#c51124", "#fc715d", "#9673b9", "#7753d4", "#f769e2", "#5e7c7f", "#2ebec2", "#1979dc", "#a4e435"])
      .domain(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]);

var emotionct=document.querySelector('#emotion');
var thingct=document.querySelector('#thing');
var whomct=document.querySelector('#whom');
var whom2ct=document.querySelector('#whom2');
var weatherct=document.querySelector('#weatherDes');


  //   var subtitle = document.querySelector('.animation').innerHTML;
  // document.querySelector('.animation').innerHTML = "";
  // subtitle.split('').forEach(function(e){
  //   e = e == " " ? "&nbsp;" : e;
  //   var span = document.createElement('span');
  //   span.innerHTML = e;
  //   document.querySelector('.animation').appendChild(span);
  // });


//circles
d3.csv('emotion.csv',parse,dataLoaded);

function dataLoaded(err,rows){

  var job = d3.nest()
      .key(function(d){return d.job})
      .entries(rows);

  console.table(rows);
  console.table(job);


  var weather = d3.nest()
      .key(function(d){return d.job})
      .key(function(d){return d.weather})
      .entries(rows);

  console.table(weather);

  var plot = d3.select('#canvas')
               .append('svg')
               .attr('width',w+margin.l+margin.r)
               .attr('height',h+margin.t+margin.b)
               .selectAll('g')
               .data(job)
               .enter()
               .append('g')
               .attr('transform', function(d, i) {
                  return 'translate('+((margin.l)+ 100)+','+(margin.t+i*43+20)+')';
              });

  var n = 50,
      frequency = 1/4,
      data = d3.range(n),
      time = 0;

  var x, y,
      word = "apple",
      width = plot.attr("width"),
      height = plot.attr("height");


  d3.timer(function (){

    //circles
    var circles = plot.selectAll("g").data(function(d){ return d.values;}); // d.values = a bunch of data

    function calculateYPosition(i) {
      return (Math.sin(i * frequency + time)) * h/26;
    }

    circles = circles
      .enter()
      .append("g")
      .merge(circles)
      .attr('transform', function(d, i){
        x = i*w/50;
        y = calculateYPosition(i);
        return "translate("+x+","+y+")";
      });

    circles = circles.selectAll("circle").data(function(d){ return [d]; }); // [d] = individual data

    //text
    var texts = plot.selectAll("text").data(function(d){
      // Filter the letter with same job-id
    var filteredLetter = letter.filter(function(e) { return (e.id == d.key); })[0];
      // console.log(d, filteredLetter);
      // debugger;
      return filteredLetter.text; // get the related text to add to respective line
    });
    // console.log(texts);
    // console.log(texts.data());
    texts.exit().remove();

    texts
      .enter()
      .append("text")
      .merge(texts)
      // .classed("letter", true)
      .attr("x", function(d,i){ return -10*(i+1.5); })
      .attr("y", function(_, i) { return calculateYPosition(-i); })
      .attr("text-anchor", "end")
      .attr("fill", "#273952")
      // .style("font-family", "futura-pt")
      .text(function(d) { return d; });

    circles
      .enter()
      .append("circle")
      .on('mouseenter',function(d){

          d3.select(this).style("stroke", "black").style('stroke-width', '2px');
      })
      .on('mouseleave', function(d){
          d3.select(this).style("stroke","black").style('stroke-width', '0px');

      })
      .merge(circles)
      .attr("r", 6)
      .attr("fill", function(d){

        if (d.weather == 1) {
          var parentG = d3.select(d3.select(this).node().parentNode)
          var weatherCircle = parentG.select(".weather");
          if (weatherCircle.node()) {
          } else {
            parentG.append("circle")
              .attr("class", "weather")
              .attr("r", 2)
              .attr("cy", -10)
              .attr('fill', 'grey');
            }
        }
      })
      .attr("fill", function(d){
        if (d.people1 == 2) {
          var parentG = d3.select(d3.select(this).node().parentNode)
          var people1Circle = parentG.select('.people1');
          if(people1Circle.node()) {
            people1Circle
              .attr("r",2)
              .attr('cy',10)
              .style('fill','grey');
          } else {
            parentG.append('circle')
              .attr('class', "people1")
              ;
            }
        }
      })
      .attr("fill", function(d){
        if (d.people1 == 3) {
          var parentG = d3.select(d3.select(this).node().parentNode)
          var people2Circle = parentG.select('.people2');
          if(people2Circle.node()) {
            people2Circle
              .attr("width",3)
              .attr('height',3)
              .attr('y',10)
              .style('fill','grey');
          } else {
            parentG.append('rect')
              .attr('class', "people2")
              // .attr('height',4)
              // .attr('width',4)
              // .attr('cx',20)
              ;
            }
        }
        return scaleColor(d.emotion);
      })
      .attr("fill", function(d){
        if (d.people1 == 4) {
          var parentG = d3.select(d3.select(this).node().parentNode)
          var people3Circle = parentG.select('.people3');
          if(people3Circle.node()) {
            people3Circle
              .attr('width',3)
              .attr('height',3)
              // .attr("rotate",'90')
              .attr('y',10)
              .style('fill','black')
              ;
          } else {
            parentG.append('rect')
              .attr('class', "people3")
              ;
            }
        }
        // return scaleColor(d.emotion);
      })
      .attr("fill", function(d){
        if (d.people2 == 3) {
          var parentG = d3.select(d3.select(this).node().parentNode);
          var people4Circle = parentG.select('.people4');
          if(people4Circle.node()) {
            people4Circle
              .attr('width',3)
              .attr('height',3)
              .attr('y',14)
              .style('fill','grey')
              ;
          } else {
            parentG.append('rect')
              .attr('class', "people4")
              ;
            }
        }
      })
      .attr("fill", function(d){
        if (d.people2 == 4) {
          var parentG = d3.select(d3.select(this).node().parentNode);
          var people5Circle = parentG.select('.people5');
          if(people5Circle.node()) {
            people5Circle
              .attr('width',3)
              .attr('height',3)
              .attr('y',14)
              .style('fill','black')
              ;
          } else {
            parentG.append('rect')
              .attr('class', "people5")
              ;
            }
        }
        return scaleColor(d.emotion);
      });
        time += 0.018;
    });

}


function parse(d){
      return{
          situation: +d.situation,
          job: d.job,
          order: +d.order,
          emotion: d.emotion,
          weather: +d.weather,
          people1: +d.people1,
          people2: +d.people2,
          people3: +d.people3,
          text: d.text,
        };
}


    const emotionkey=[
        {id:1,emotion:'unproductive',color:'#F6EB9A'},
        {id:2,emotion:'stressed',color:'#fda135'},
        {id:3,emotion:'anxious',color:'#f9201f'},
        {id:4,emotion:'confused',color:'#c51124'},
        {id:5,emotion:'just ok',color:'#fc715d'},
        {id:6,emotion:'relaxed',color:'#9673b9'},
        {id:7,emotion:'happy',color:'#7753d4'},
        {id:8,emotion:'silly',color:'#f769e2'},
        {id:9,emotion:'blurry',color:'#5e7c7f'},
        {id:10,emotion:'productive',color:'#2ebec2'},
        {id:11,emotion:'excited',color:'#1979dc'},
        {id:12,emotion:'nostalgic',color:'#a4e435'},
    ];

    const jobkey=[
        {id:1,job:'writing email',color:'#0c0c04'},
        {id:2,job:'working on projects',color:'#0c0c04'},
        {id:3,job:'talking about work',color:'#0c0c04',},
        {id:4,job:'doing dear data'},
        {id:5,job:'meetings'},
        {id:6,job:'waiting for something'},
        {id:7,job:'walking'},
        {id:8,job:'doing morning preparation'},
        {id:9,job:'having lunch/dinner'},
        {id:10,job:'shopping'},
        {id:11,job:'enjoying spa'},
        {id:12,job:'attending events'},
        {id:13,job:'lying on a couch'},
        {id:14,job:'planning'},
    ];

    const people1key=[
        {id:1,people1:'myself',color:'#0c0c04'},
        {id:2,people1:'my boyfriend',color:'#0c0c04'},
        {id:3,people1:'friend(s)',color:'#0c0c04'},
        {id:4,people1:'coworker/clients',color:'#0c0c04'},
    ];

    const people2key=[
        {id:0,people2:'',color:'#0c0c04'},
        {id:1,people2:'myself',color:'#0c0c04'},
        {id:2,people2:'my boyfriend',color:'#0c0c04'},
        {id:3,people2:'and friend(s)',color:'#0c0c04'},
        {id:4,people2:'and coworker/clients',color:'#0c0c04'},
    ];

    const people3key=[
        {id:0,people3:'',color:'#0c0c04'},
        {id:1,people3:'myself',color:'#0c0c04'},
        {id:2,people3:'my boyfriend',color:'#0c0c04'},
        {id:3,people3:'and friend(s)',color:'#0c0c04'},
        {id:4,people3:'and coworker/clients',color:'#0c0c04'},
    ];

    const weatherkey=[
        {id:0,weather:'good'},
        {id:1,weather:'bad'},

    ];

    const letter=[
        {id:1, text:'liam e'},
        {id:2, text:'stcejorp'},
        {id:3, text:'gniklat'},
        {id:4, text:'atad raed'},
        {id:5, text:'sgniteem'},
        {id:6, text:'gnitiaw'},
        {id:7, text:'gniklaw'},
        {id:8, text:'perp '},
        {id:9, text:'slaem'},
        {id:10, text:'gnippohs'},
        {id:11, text:'aps'},
        {id:12, text:'stneve'},
        {id:13, text:'gniyl'},
        {id:14, text:'gninnalp'},
    ];

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
situation	job	order	emotion	weather	people1	people2	people3
1	1	1	3		1	0
1	1	2	2		1	0
1	1	3	7		1	0
1	1	4	10		1	0
1	1	5	10		1	0
1	1	6	10		1	0
1	1	7	11		1	0
1	1	8	11		1	0
1	1	9	1		1	0
1	1	10	10		1	0
1	2	1	2		1	0
1	2	2	2		1	0
1	2	3	2		1	0
1	2	4	3	1	4	0
1	2	5	3	1	4	0
1	2	6	4		4	0
1	2	7	4		4	0
1	2	8	4		2	4
1	2	9	4		2	4
1	2	10	4		4	0
1	2	11	4		2	4
1	2	12	2		2	0
1	2	13	2		1	0
1	2	14	7		1	0
1	2	15	10		1	0
1	2	16	2		1	0
1	2	17	7	1	1	0
1	2	18	10	1	1	0
1	2	19	10	1	1	0
1	2	20	2	1	1	0
1	2	21	10	1	1	0
1	2	22	10	1	2	4
1	2	23	10		2	0
1	2	24	10		1	0
1	2	25	7		1	0
1	2	26	10		1	0
1	2	27	10		1	0
1	2	28	10		1	0
1	2	29	11		2	0
1	2	30	11		1	0
1	2	31	1		4	0
1	2	32	10		1	0
1	2	33	10		1	0
1	2	34	7		1	0
1	2	35	10		1	0
1	2	36	11		1	0
1	2	37	11		1	0
1	2	38	1		4	0
1	2	39	10		1	0
1	2	40	10		1	0
1	2	41	11		1	0
1	2	42	11		1	0
1	2	43	10		1	0
1	3	1	2		2	0
1	3	2	3	1	2	0
1	3	3	2	1	2	0
1	3	4	2	1	2	0
1	3	5	2		2	0
1	3	6	4		2	0
1	3	7	4		2	0
1	3	8	2		2	0
1	3	9	2		2	0
1	4	1	3		1	0
1	4	2	2		1	0
1	4	3	2		1	0
1	4	4	10		1	0
1	4	5	11		1	0
1	4	6	11		1	0
1	4	7	10		1	0
1	4	8	10		1	0
1	4	9	11		1	0
1	4	10	11		1	0
1	4	11	1		1	0
1	5	1	3		4	0
1	5	2	3		4	0
1	5	3	3		4	0
1	5	4	3	1	4	0
1	5	5	3	1	4	0
1	5	6	3	1	2	4
1	5	7	3	1	2	4
1	5	8	2		2	4
1	5	9	7		2	4
1	5	10	10		4	0
1	5	11	10		4	0
1	5	12	11		4	0
1	5	13	7		4	0
1	5	14	10		4	0
1	5	15	10		4	0
1	5	16	10		4	0
1	5	17	10		4	0
1	5	18	11		4	0
1	5	19	10		4	0
1	5	20	1		4	0
2	6	1	9		1	0
2	6	2	2		1	0
2	6	3	6		1	0
2	6	4	3	1	1	0
2	6	5	3	1	1	0
2	6	6	3	1	2	0
2	6	7	2	1	2	0
2	6	8	2		1
2	6	9	3		1
2	6	10	3		1
2	6	11	3		1
2	6	12	2		2
2	6	13	3		1
2	6	14	3		1
2	6	15	3		1
2	6	16	2		1
2	6	17	3		1
2	6	18	3		1
2	7	1	3		2
2	7	2	4	1	2
2	7	3	9	1	1
2	7	4	9	1	1
2	7	5	2		2
2	7	6	2		1
2	7	7	8		1
2	7	8	6		3
2	7	9	7		1
2	7	10	7		1
2	7	11	10		1
2	7	12	7		3
2	7	13	7		3
2	7	14	7		2
2	7	15	7		1
2	7	16	8		1
2	7	17	8		1
2	7	18	6		1
2	7	19	11		1
2	7	20	10		1
2	7	21	7		1
2	7	22	7		1
2	7	23	1		2
2	7	24	6		1
2	7	25	11		1
2	7	26	1		1
2	7	27	6		1
2	7	28	11		1
2	7	29	7		1
2	7	30	1		1
2	7	31	11		1
2	7	32	10		1
2	7	33	7		1
2	7	34	7		1
2	7	35	7		1
3	8	1	3	1	1
3	8	2	9		1
3	8	3	2		1
3	8	4	6		1
3	8	5	11		1
3	8	6	12		1
3	8	7	2		1
3	9	1	4		2
3	9	2	9		2
3	9	3	9		2
3	9	4	9		2	3
3	9	5	9		2	3
3	9	6	2		2
3	9	7	2		2
3	9	8	6	1	2
3	9	9	9	1	2
3	9	10	9	1	2
3	9	11	6		3
3	9	12	2		3
3	9	13	7		3
3	9	14	9		2
3	9	15	9		2	3
3	9	16	8		2	3	3
3	9	17	6		2
3	9	18	7		2
3	9	19	11		2
3	9	20	11		2
3	9	21	9		2
3	9	22	9		2
3	9	23	8		3	3
3	9	24	6		2
3	9	25	7		2	3
3	9	26	11	1	2
3	9	27	11	1	2
3	9	28	1	1	2
3	9	29	7		3	3
3	9	30	12		2
3	10	1	4		2
3	10	2	8		3
3	10	3	5		2
3	10	4	10		1
3	10	5	10	1	3
3	10	6	10	1	3
3	10	7	7		3
3	10	8	7		3
3	11	1	5		1
3	11	2	8		1
3	11	3	6		1
3	11	4	6		1
3	11	5	6		1
3	11	6	6		1
3	12	1	5		2	3
3	12	2	8		2	3
3	12	3	6		2	3
3	12	4	6		2
3	12	5	11		2
3	12	6	10		2
3	12	7	7		2
3	12	8	10	1	2
3	12	9	6	1	2	3
3	12	10	11	1	2	3
3	12	11	10		1
3	12	12	10		1
3	13	1	4		2
3	13	2	9		2
3	13	3	5		2
3	13	4	6		2
3	13	5	7		2
3	13	6	9		2
3	13	7	9		2
3	13	8	6		2
3	13	9	12		2
3	13	10	12		2
3	13	11	12		2
3	13	12	9		1
3	13	13	2		1
3	13	14	2		2
3	13	15	6	1	2
3	13	16	7	1	2
3	13	17	12	1	2
3	13	18	12	1	2
3	13	19	6		1
3	13	20	6		2
3	13	21	12		2
3	13	22	12		2
3	14	1	3		2
3	14	2	3		2
3	14	3	3		2
3	14	4	3	1	2
3	14	5	4	1	2
3	14	6	9	1	2
3	14	7	1		2
3	14	8	1		2
3	14	9	4		1
3	14	10	1		2
3	14	11	1		2
3	14	12	4		1
3	14	13	4	1	2
3	14	14	4	1	2
3	14	15	4		2
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
	background-color: #F4F4F4;
	}

	#canvas{
	width:800;
	min-height:800px;
	height:800;
	position: relative;
	}

	.container {
	position:relative;
	height:800;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="canvas" id="canvas"></div>
	</div>
	<script>
	var margin = {t:50,r:50,b:50,l:50};


	var w = document.getElementById('canvas').clientWidth - margin.l - margin.r,
	h = document.getElementById('canvas').clientHeight - margin.t - margin.b;


	var scaleColor = d3.scaleOrdinal()
	.range(["#F6EB9A", "#fda135", "#f9201f", "#c51124", "#fc715d", "#9673b9", "#7753d4", "#f769e2", "#5e7c7f", "#2ebec2", "#1979dc", "#a4e435"])
	.domain(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]);

	var emotionct=document.querySelector('#emotion');
	var thingct=document.querySelector('#thing');
	var whomct=document.querySelector('#whom');
	var whom2ct=document.querySelector('#whom2');
	var weatherct=document.querySelector('#weatherDes');


	// var subtitle = document.querySelector('.animation').innerHTML;
	// document.querySelector('.animation').innerHTML = "";
	// subtitle.split('').forEach(function(e){
	// e = e == " " ? " " : e;
	// var span = document.createElement('span');
	// span.innerHTML = e;
	// document.querySelector('.animation').appendChild(span);
	// });


	//circles
	d3.csv('emotion.csv',parse,dataLoaded);

	function dataLoaded(err,rows){

	var job = d3.nest()
	.key(function(d){return d.job})
	.entries(rows);

	console.table(rows);
	console.table(job);


	var weather = d3.nest()
	.key(function(d){return d.job})
	.key(function(d){return d.weather})
	.entries(rows);

	console.table(weather);

	var plot = d3.select('#canvas')
	.append('svg')
	.attr('width',w+margin.l+margin.r)
	.attr('height',h+margin.t+margin.b)
	.selectAll('g')
	.data(job)
	.enter()
	.append('g')
	.attr('transform', function(d, i) {
	return 'translate('+((margin.l)+ 100)+','+(margin.t+i*43+20)+')';
	});

	var n = 50,
	frequency = 1/4,
	data = d3.range(n),
	time = 0;

	var x, y,
	word = "apple",
	width = plot.attr("width"),
	height = plot.attr("height");



	d3.timer(function (){

	//circles
	var circles = plot.selectAll("g").data(function(d){ return d.values;}); // d.values = a bunch of data

	function calculateYPosition(i) {
	return (Math.sin(i * frequency + time)) * h/26;
	}

	circles = circles
	.enter()
	.append("g")
	.merge(circles)
	.attr('transform', function(d, i){
	x = i*w/50;
	y = calculateYPosition(i);
	return "translate("+x+","+y+")";
	});

	circles = circles.selectAll("circle").data(function(d){ return [d]; }); // [d] = individual data

	//text
	var texts = plot.selectAll("text").data(function(d){
	// Filter the letter with same job-id
	var filteredLetter = letter.filter(function(e) { return (e.id == d.key); })[0];
	// console.log(d, filteredLetter);
	// debugger;
	return filteredLetter.text; // get the related text to add to respective line
	});
	// console.log(texts);
	// console.log(texts.data());
	texts.exit().remove();

	texts
	.enter()
	.append("text")
	.merge(texts)
	// .classed("letter", true)
	.attr("x", function(d,i){ return -10*(i+1.5); })
	.attr("y", function(_, i) { return calculateYPosition(-i); })
	.attr("text-anchor", "end")
	.attr("fill", "#273952")
	// .style("font-family", "futura-pt")
	.text(function(d) { return d; });

	circles
	.enter()
	.append("circle")
	.on('mouseenter',function(d){

	d3.select(this).style("stroke", "black").style('stroke-width', '2px');
	})
	.on('mouseleave', function(d){
	d3.select(this).style("stroke","black").style('stroke-width', '0px');

	})
	.merge(circles)
	.attr("r", 6)
	.attr("fill", function(d){

	if (d.weather == 1) {
	var parentG = d3.select(d3.select(this).node().parentNode)
	var weatherCircle = parentG.select(".weather");
	if (weatherCircle.node()) {
	} else {
	parentG.append("circle")
	.attr("class", "weather")
	.attr("r", 2)
	.attr("cy", -10)
	.attr('fill', 'grey');
	}
	}
	})
	.attr("fill", function(d){
	if (d.people1 == 2) {
	var parentG = d3.select(d3.select(this).node().parentNode)
	var people1Circle = parentG.select('.people1');
	if(people1Circle.node()) {
	people1Circle
	.attr("r",2)
	.attr('cy',10)
	.style('fill','grey');
	} else {
	parentG.append('circle')
	.attr('class', "people1")
	;
	}
	}
	})
	.attr("fill", function(d){
	if (d.people1 == 3) {
	var parentG = d3.select(d3.select(this).node().parentNode)
	var people2Circle = parentG.select('.people2');
	if(people2Circle.node()) {
	people2Circle
	.attr("width",3)
	.attr('height',3)
	.attr('y',10)
	.style('fill','grey');
	} else {
	parentG.append('rect')
	.attr('class', "people2")
	// .attr('height',4)
	// .attr('width',4)
	// .attr('cx',20)
	;
	}
	}
	return scaleColor(d.emotion);
	})
	.attr("fill", function(d){
	if (d.people1 == 4) {
	var parentG = d3.select(d3.select(this).node().parentNode)
	var people3Circle = parentG.select('.people3');
	if(people3Circle.node()) {
	people3Circle
	.attr('width',3)
	.attr('height',3)
	// .attr("rotate",'90')
	.attr('y',10)
	.style('fill','black')
	;
	} else {
	parentG.append('rect')
	.attr('class', "people3")
	;
	}
	}
	// return scaleColor(d.emotion);
	})
	.attr("fill", function(d){
	if (d.people2 == 3) {
	var parentG = d3.select(d3.select(this).node().parentNode);
	var people4Circle = parentG.select('.people4');
	if(people4Circle.node()) {
	people4Circle
	.attr('width',3)
	.attr('height',3)
	.attr('y',14)
	.style('fill','grey')
	;
	} else {
	parentG.append('rect')
	.attr('class', "people4")
	;
	}
	}
	})
	.attr("fill", function(d){
	if (d.people2 == 4) {
	var parentG = d3.select(d3.select(this).node().parentNode);
	var people5Circle = parentG.select('.people5');
	if(people5Circle.node()) {
	people5Circle
	.attr('width',3)
	.attr('height',3)
	.attr('y',14)
	.style('fill','black')
	;
	} else {
	parentG.append('rect')
	.attr('class', "people5")
	;
	}
	}
	return scaleColor(d.emotion);
	});
	time += 0.018;
	});

	}


	function parse(d){
	return{
	situation: +d.situation,
	job: d.job,
	order: +d.order,
	emotion: d.emotion,
	weather: +d.weather,
	people1: +d.people1,
	people2: +d.people2,
	people3: +d.people3,
	text: d.text,
	};
	}


	const emotionkey=[
	{id:1,emotion:'unproductive',color:'#F6EB9A'},
	{id:2,emotion:'stressed',color:'#fda135'},
	{id:3,emotion:'anxious',color:'#f9201f'},
	{id:4,emotion:'confused',color:'#c51124'},
	{id:5,emotion:'just ok',color:'#fc715d'},
	{id:6,emotion:'relaxed',color:'#9673b9'},
	{id:7,emotion:'happy',color:'#7753d4'},
	{id:8,emotion:'silly',color:'#f769e2'},
	{id:9,emotion:'blurry',color:'#5e7c7f'},
	{id:10,emotion:'productive',color:'#2ebec2'},
	{id:11,emotion:'excited',color:'#1979dc'},
	{id:12,emotion:'nostalgic',color:'#a4e435'},
	];

	const jobkey=[
	{id:1,job:'writing email',color:'#0c0c04'},
	{id:2,job:'working on projects',color:'#0c0c04'},
	{id:3,job:'talking about work',color:'#0c0c04',},
	{id:4,job:'doing dear data'},
	{id:5,job:'meetings'},
	{id:6,job:'waiting for something'},
	{id:7,job:'walking'},
	{id:8,job:'doing morning preparation'},
	{id:9,job:'having lunch/dinner'},
	{id:10,job:'shopping'},
	{id:11,job:'enjoying spa'},
	{id:12,job:'attending events'},
	{id:13,job:'lying on a couch'},
	{id:14,job:'planning'},
	];

	const people1key=[
	{id:1,people1:'myself',color:'#0c0c04'},
	{id:2,people1:'my boyfriend',color:'#0c0c04'},
	{id:3,people1:'friend(s)',color:'#0c0c04'},
	{id:4,people1:'coworker/clients',color:'#0c0c04'},
	];

	const people2key=[
	{id:0,people2:'',color:'#0c0c04'},
	{id:1,people2:'myself',color:'#0c0c04'},
	{id:2,people2:'my boyfriend',color:'#0c0c04'},
	{id:3,people2:'and friend(s)',color:'#0c0c04'},
	{id:4,people2:'and coworker/clients',color:'#0c0c04'},
	];

	const people3key=[
	{id:0,people3:'',color:'#0c0c04'},
	{id:1,people3:'myself',color:'#0c0c04'},
	{id:2,people3:'my boyfriend',color:'#0c0c04'},
	{id:3,people3:'and friend(s)',color:'#0c0c04'},
	{id:4,people3:'and coworker/clients',color:'#0c0c04'},
	];

	const weatherkey=[
	{id:0,weather:'good'},
	{id:1,weather:'bad'},

	];

	const letter=[
	{id:1, text:'liam e'},
	{id:2, text:'stcejorp'},
	{id:3, text:'gniklat'},
	{id:4, text:'atad raed'},
	{id:5, text:'sgniteem'},
	{id:6, text:'gnitiaw'},
	{id:7, text:'gniklaw'},
	{id:8, text:'perp '},
	{id:9, text:'slaem'},
	{id:10, text:'gnippohs'},
	{id:11, text:'aps'},
	{id:12, text:'stneve'},
	{id:13, text:'gniyl'},
	{id:14, text:'gninnalp'},
	];

	</script>
	</body>