JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <h1>Stroop Test</h1>
  <svg width="960" height="500"></svg>
</body>

CSS

.bar1 rect {
      fill: rgba(0, 0, 255, 0.6);
    }
    
    .bar1:hover rect {
      fill: rgba(0, 0, 255, 0.9);
    }
    
    .bar1 text {
      fill: #fff;
      font: 10px sans-serif;
    }
    
    .bar2 rect {
      fill: rgba(255, 0, 0, 0.6);
    }
    
    .bar2:hover rect {
      fill: rgba(255, 0, 0, 0.9);
    }
    
    .bar2 text {
      fill: #fff;
      font: 10px sans-serif;
    }

JavaScript

function draw(data) {

  var allCongruentData = data.map(function(e) {
    return e.Congruent;
  });
  var allIncongruentData = data.map(function(e) {
    return e.Incongruent;
  });

  var formatCount = d3.format(",.0f");

  var svg = d3.select("svg"),
    margin = {
      top: 10,
      right: 30,
      bottom: 30,
      left: 30
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scaleLinear()
    .rangeRound([0, width])
    .domain([8, 36]);

  var hist1 = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(20));
  var bins1 = hist1(allCongruentData);

  console.log(bins1)

  var line = d3.line()
    .x(function(d, i) {
      return (d.x0 + d.x1) / 2
      //for (let ii = 0; ii < bins1.length; ii++) {
      //  if (bins1[ii].x0 <= d.Congruent && bins1[ii].x1 >= d.Congruent)
       //   return (bins1[ii].x0 + bins1[ii].x1) / 2
      //}
    })
    .y(function(d, i) {
    	console.log(d, d.length, i)
      return d.length+i;
    })
    .curve(d3.curveCatmullRom.alpha(0.5));
  svg.append('g')
  	.append("path")
    .datum(bins1)
    .attr("class", "line")
    .attr("d", line);

  var bins2 = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(20))
    (allIncongruentData);

  var y = d3.scaleLinear()
    .domain([0, d3.max(bins1, function(d) {
      return d.length;
    })])
    .range([height, 0]);

  var bar1 = g.selectAll(".bar1")
    .data(bins1)
    .enter().append("g")
    .attr("class", "bar1")
    .attr("transform", function(d) {
      return "translate(" + x(d.x0) + "," + y(d.length) + ")";
    });

  bar1.append("rect")
    .attr("x", 0.5)
    .attr("width", x(bins1[0].x1) - x(bins1[0].x0) - 1)
    .attr("height", function(d) {
      return height - y(d.length);
    });


  var bar2 = g.selectAll(".bar2")
    .data(bins2)
   ...