EEG & Emotion Literature Review Keywords

EEGEmotionReviewKeywords.csv

"Area";"Keyword";"Parent";"Repetitions"
"other areas";"genetic algorithm";"artificial intelligence";"4"
"Computer Science";"machine learning";"artificial intelligence";"4"
"other areas";"machine learning";"artificial intelligence";"3"
"Neuroscience";"deep learning";"artificial neural network";"2"
"other areas";"deep learning";"artificial neural network";"3"
"Computer Science";"extreme learning machine";"artificial neural network";"2"
"Neuroscience";"extreme learning machine";"artificial neural network";"2"
"other areas";"feedforward neural network";"artificial neural network";"1"
"other areas";"pattern classification";"artificial neural network";"2"
"Computer Science";"recurrent neural networks";"artificial neural network";"2"
"Computer Science";"deep belief networks";"bayesian network";"2"
"Neuroscience";"deep belief networks";"bayesian network";"2"
"other areas";"deep belief networks";"bayesian network";"2"
"other areas";"naive bayes";"bayesian network";"2"
"other areas";"independent component analysis";"statistical methods";"3"
"Neuroscience";"brain activity";"brain computer interface";"2"
"other areas";"brain activity";"brain computer interface";"3"
"Arts and Humanities";"electroencephalography (eeg)";"brain computer interface";"2"
"Computer Science";"electroencephalography (eeg)";"brain computer interface";"75"
"Engineering";"electroencephalography (eeg)";"brain computer interface";"12"
"Health Professions";"electroencephalography (eeg)";"brain computer interface";"2"
"Medicine";"electroencephalography (eeg)";"brain computer interface";"14"
"Neuroscience";"electroencephalography (eeg)";"brain computer interface";"34"
"other areas";"electroencephalography (eeg)";"brain computer interface";"6"
"Psychology";"electroencephalography (eeg)";"brain computer interface";"13"
"other areas";"unsupervised learning";"machine learning";"2"
"other areas";"cognitive architecture";"cognitive systems";"2"
"other areas";"cognitive processes";"cognitive systems";"4"
"other areas";"sentiment analysis";"computational linguistics";"1"
"other areas";"computer assisted";"human computer interaction";"3"
"other areas";"sensors";"computer hardware";"2"
"other areas";"context modeling";"context awareness";"2"
"other areas";"morlet wavelet";"wavelet transform";"2"
"other areas";"clustering";"data mining";"1"
"other areas";"manifold learning";"machine learning";"2"
"other areas";"multiple signal classification";"signal processing";"1"
"Computer Science";"reservoir computing";"artificial neural network";"2"
"Neuroscience";"reservoir computing";"artificial neural network";"2"
"other areas";"e-learning";"online system";"2"
"Computer Science";"signal processing";"engineering";"3"
"other areas";"signal processing";"engineering";"4"
"other areas";"vehicles";"engineering";"1"
"Computer Science";"emotion recognition";"human computer interaction";"35"
"Engineering";"emotion recognition";"human computer interaction";"3"
"Mathematics";"emotion recognition";"human computer interaction";"2"
"Medicine";"emotion recognition";"human computer interaction";"4"
"Neuroscience";"emotion recognition";"human computer interaction";"11"
"other areas";"emotion recognition";"human computer interaction";"4"
"Psychology";"emotion recognition";"human computer interaction";"4"
"other areas";"erbium";"computer hardware";"2"
"Computer Science";"facial expressions";"image processing";"4"
"other areas";"facial expressions";"image processing";"2"
"other areas";"disabled people";"handicapped persons";"2"
"Computer Science";"affective computing";"human computer interaction";"14"
"Engineering";"affective computing";"human computer interaction";"2"
"Medicine";"affective computing";"human computer interaction";"2"
"Neuroscience";"affective computing";"human computer interaction";"5"
"other areas";"affective computing";"human computer interaction";"1"
"Psychology";"affective computing";"human computer interaction";"2"
"other areas";"video games";"human computer interaction";"2"
"Computer Science";"virtual reality";"human computer interaction";"3"
"other areas";"virtual reality";"human computer interaction";"4"
"other areas";"face recognition";"image processing";"1"
"other areas";"object recognition";"image processing";"1"
"other areas";"image classification";"image processing";"2"
"other areas";"inductive logic programming";"logic programming";"4"
"other areas";"artificial neural network";"machine learning";"2"
"Computer Science";"pattern recognition";"machine learning";"4"
"other areas";"pattern recognition";"machine learning";"3"
"other areas";"reinforcement learning";"machine learning";"1"
"Computer Science";"hilbert transform";"signal processing";"2"
"other areas";"hilbert transform";"signal processing";"1"
"Computer Science";"media streaming";"multimedia systems";"2"
"Computer Science";"multimedia communication";"multimedia systems";"3"
"other areas";"online learning";"online system";"1"
"other areas";"recommendation systems";"recommender system";"2"
"Computer Science";"echo state networks";"artificial neural network";"3"
"Neuroscience";"echo state networks";"artificial neural network";"2"
"other areas";"ontology";"semantics";"1"
"Computer Science";"empirical mode decomposition";"signal processing";"2"
"other areas";"social networks";"online system";"2"
"other areas";"speech recognition";"signal processing";"3"
"Computer Science";"support vector machine";"machine learning";"9"
"Engineering";"support vector machine";"machine learning";"2"
"Neuroscience";"support vector machine";"machine learning";"3"
"other areas";"support vector machine";"machine learning";"5"
"other areas";"graph theory";"theoretical computer science";"2"
"other areas";"discrete wavelet transforms";"wavelet transform";"2"
"other areas";"wavelet analysis";"wavelet transform";"2"

index.css

#dataviz {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.node:hover {
  stroke-width: 7px !important;
  opacity: 1 !important;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <link type="text/css" href="index.css" rel="stylesheet"/>
</head>
<body>
  <div id="dataviz"></div>
  <script>var dataviz = document.getElementById("dataviz");</script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

var maxWidth = dataviz.clientWidth;
var maxHeight = dataviz.clientHeight;
var border = 25;
var width = maxWidth - 150;
var height = maxHeight - 200;

// append the svg object to the body of the page
var svg = d3.select("#dataviz")
  .append("svg")
  .attr("width", maxWidth)
  .attr("height", maxHeight)

// Read data
d3.csv("EEGEmotionReviewKeywords.csv", function(data) {

  // Keyword color palette
  var keywordColor = d3.scaleOrdinal()
    .domain([...new Set(data.map(i => i.Keyword))].sort())
    .range(d3.schemeCategory20c);

  // X Positions Parent Keyword
  var parents = [...new Set(data.map(i => i.Parent))].sort();
  var parentsPositions = [...new Array(parents.length)]
    .map((_, i) => i * ((width - border) / parents.length) + border);
  var xparent = d3.scaleOrdinal().domain(parents).range(parentsPositions);

  // Y Positions Areas
  var areas = [...new Set(data.map(i => i.Area))].sort();
  var areasPositions = [...new Array(areas.length)]
    .map((_, i) => i * ((height - border) / areas.length) + border);
  var yArea = d3.scaleOrdinal().domain(areas).range(areasPositions);

  // Keyword Size
  var size = d3.scaleLinear()
    .domain([1, Math.max(...data.map(i => i.Repetitions))])
    .range([3, 50]) // circle will be between 3 and 50px

  // create a tooltip
  var Tooltip = d3.select("#dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px")
    .style("width", "300px")
    .style("position", "absolute")

  // Three function that change the tooltip when user hover / move / leave a cell
  var mouseover = function(d) {
    Tooltip.style("opacity", 1)
  }
  var mousemove = function(d) {
    Tooltip
      .html('<b>' + d.Keyword + '</b> (' + d.Repetitions + ' papers)' +
        "<small><ul><li>" + "Parent keyword: <b>" + d.Parent +
        "</b></li><li>" + "Area: <b>" + d.Area + "</b></li></ul></small>")
      .style("left", (d3.mouse(this)[0] - 20) + "px")
      .style("top", (d3.mouse(this)[1] + 50) + "px")
  }
  var mouseleave = function(d) {
    Tooltip.style("opacity", 0)
  }

  // Initialize the circle: all located at the center of the svg area
  var node = svg.append("g")
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", d => size(d.Repetitions))
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", d => keywordColor(d.Keyword))
    .style("fill-opacity", 0.7)
    .attr("stroke", "black")
    .style("stroke-width", 1)
    .on("mouseover", mouseover) // What to do when hovered
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave)
    .call(d3.drag() // call specific function when circle is dragged
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  var xLabels = svg.selectAll("text.parent")
    .data(parents)
    .enter()
    .append("text")
    .text(d => d)
    .classed('rotation', true)
    .attr("transform", d =>
      "translate(" + xparent(d) + ", " + height + "), rotate(+90)");

  var yLabels = svg.selectAll("text.area")
    .data(areas)
    .enter()
    .append("text")
    .text(d => d)
    .attr("x", width)
    .attr("y", d => yArea(d));

  // Features of the forces applied to the nodes:
  var simulation = d3.forceSimulation()
    .force("x", d3.forceX().strength(1).x(d => xparent(d.Parent)))
    .force("y", d3.forceY().strength(0.3).y(d => yArea(d.Area)))
    .force("charge", // Nodes are attracted to each other if value is > 0
      d3.forceManyBody().strength(.1))
    .force("collide", // Force that avoids circles overlapping
      d3.forceCollide().strength(.2).radius(d => size(d.Repetitions) + 3).iterations(1))

  // Apply these forces to the nodes and update their positions.
  // Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
  simulation
    .nodes(data)
    .on("tick", function(d) {
      node
        .attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        })
    });

  // What happens when a circle is dragged?
  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(.03).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(.03);
    d.fx = null;
    d.fy = null;
  }
})