Election History w/ Avoidant Tooltip

This is a riff on this chart that I made for testing the tooltip from here: Avoidant Tooltip

forked from alexmacy's block: Election History w/ Avoidant Tooltip

<!DOCTYPE html>
<html>
<head>
  <title>Election History</title>

var colors = {
    "Democratic": "#367EB8",
    "Democratic-Republican": "#984EA3",
    "Federalist": "#FF7F00",
    "Other": "#4DAF4A",
    "Republican": "#E41A1C",
    "Whig": "#E6AB03"
};

var height = 500,
    width = 960,
    rowHeight,
    columnWidth;

var svg = d3.select("svg")
    .attr("height", height - 40)
    .attr("width", width);

var x = d3.scaleBand().range([0, width - 150]);
    alphaScale = d3.scaleBand().range([0, height - 80]),
    yearScale = d3.scaleBand().range([0, height - 80]),
    verticalSort = alphaScale;

var chart = svg.append("g")
    .attr("transform", "translate(0, 20)");

var yearLabel = svg.append("text")
    .attr("text-anchor", "start")
    .attr("y", 15);

var stateLabel = svg.append("text")
    .attr("dominant-baseline", "hanging")
    .attr("text-anchor", "start")
    .attr("x", width - 145);

var winnerLabel = svg.append("text")
    .attr("dominant-baseline", "hanging")
    .attr("text-anchor", "start")
    .attr("y", height - 55);

var tooltip = d3.select("body").append("div")
    .attr("id", "tooltip")
    .on("mousemove", moveTooltip)
    .html("");

d3.csv('elec.csv', function (error, data) {
    if (error) throw error;

yearScale.domain(statesInOrder)

var states = statesInOrder.sort(d3.ascending),
        elections = data.filter(function (d) {return d.state == "Delaware"})
                        .map(function (d) {return d.year});

rowHeight = height / states.length;
    columnWidth = width / elections.length;

x.domain(elections);
    alphaScale.domain(states);

chart.selectAll("rect")
        .data(data)
      .enter().append("rect")
        .attr("class", function (d) {
          return d.year + " " + d.state.replace(" ", "_");
        })
        .attr("x", function (d) {return x(d.year);})
        .attr("y", function (d) {return verticalSort(d.state);})
        .attr("width", columnWidth - 3)
        .attr("height", rowHeight - 2)
        .style("fill", function (d) {return colors[d.winningParty];})
        .style("fill-opacity", function (d) {return +d.p1_percent || 1;})
        .on("mouseover", updateText);

function updateText() {
      var data = d3.select(this).data()[0];

var htmlData = [
        data.year, 
        data.state.replace(/_/g, " "), 
        "Votes: " + d3.format(",.0f")(data.total), 
        d3.format(".2%")(data.p1_percent) + " " + data.winningParty, 
        "Overall Winner: " + data.winner
      ];

if (data.notes != "") htmlData.push("Note: " + data.notes);

d3.selectAll("rect")
          .style("stroke", function (d) {
            return d.state == data.state || d.year == data.year ? "black" : "";
          })

yearLabel
          .datum(data)
          .attr("x", x(data.year))
          .text(data.year);

stateLabel
          .datum(data)
          .attr("y", verticalSort(data.state) + rowHeight * 1.5)
          .text(data.state.replace(/_/g, " "));

winnerLabel
          .datum(data)
          .attr("x", x(data.year))
          .text(data.winner);

d3.select("#tooltip")
          .style("z-index", 10)
          .style("opacity", .8)
          .html(htmlData.join("<br>"))
    
        moveTooltip();
    }
});

function moveTooltip() {
  var [posX, posY] = [d3.event.x, d3.event.y];
  posX += posX > width / 2 ? -250 : 50;
  posY += posY > height / 2 ? -150 : 50;

tooltip.interrupt()
    .transition().duration(200).ease(d3.easeLinear)
      .style("left", posX + "px")
      .style("top", posY + "px");
}

stateLabel
      .transition().duration(2000)
        .attr("y", function(d) {return verticalSort(d.state) + rowHeight * 1.5})

}
</script>

</html>

https://d3js.org/d3.v4.min.js