D3 Examples - Swarmplot

Swarmplot
This is a rebuild of Lazaro Gamio's What to know about all of the men facing sexual misconduct allegations published in Axios. It's what seaborn calls a "swarmplot" – a beeswarm faceted by a property of the data.
Just as I was finishing this, I realized that the original chart is made of absolutely positioned HTML divs. My version is SVG. I also didn't go all out on the tooltips, but the basic idea is there.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
    <style>
      body {
        font-family: "Helvetica Neue", sans-serif;
        margin: 0;
      }
      #wrapper {
        max-width: 900px;
        margin: 0 auto;
      }
      .circle {
        pointer-events: none;
      }
      .circle-bg {
        stroke: steelblue;
        fill: steelblue;
        fill-opacity: .3;
        pointer-events: none;
      }
      .circle-hover {
        opacity: 0;
      }
      .axis .domain {
        display: none;
      }
      .axis text {
        font-size: 1.2em;
      }
      .axis.y.right .tick text {
        fill: steelblue;
      }
      .axis.y .tick line {
        stroke: #eee;
        stroke-width: 10px;
      }
      .axis.x .tick line {
        stroke: #ccc;
      } 
      .tip {
        position: absolute;
        font-size: .8em;
        text-align: center;
        text-shadow: -1px -1px 1px #ffffff, -1px 0px 1px #ffffff, -1px 1px 1px #ffffff, 0px -1px 1px #ffffff, 0px 1px 1px #ffffff, 1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 1px 1px 1px #ffffff;
      }
    </style>
  </head>
  <body>
    <div id="wrapper"></div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/d3-moveto@0.0.3/build/d3-moveto.min.js"></script>
    <script src="https://unpkg.com/jeezy@1.12.13/lib/jeezy.min.js"></script>
    <script>
      var radius = 12;
​
      var margin = {top: radius * 2.5 + 10, left: 90, bottom: radius, right: 30},
        width = +jz.str.keepNumber(d3.select("#wrapper").style("width")) - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom,
        svg = d3.select("#wrapper").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
​
      var x = d3.scaleTime()
        .rangeRound([0, width]);
​
      var y = d3.scaleBand()
        .rangeRound([0, height]);
​
      var curr_month = "";
​
      var x_axis = d3.axisBottom(x)
          .tickSizeOuter(0)
          .ticks(d3.timeDay.every(1))
          .tickFormat(function(d){ 
            var s = d.toString().split(" ");
            var m = s[1];
            if (m !== curr_month){
              curr_month = m;
              return m + "."; 
            } else {
              return null;
            }
          });
​
      var y_axis_left = d3.axisLeft(y)
          .tickSize(0)
​
      var y_axis_right = d3.axisRight(y)
          .tickSizeOuter(0)
          .tickSizeInner(-width);
​
      var v = d3.voronoi()
        .extent([[0, 0], [width, height]])
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; });
​
      var parseDate = function(x){
        var s = x.split("-");
        var d = [s[2], s[0], s[1]].join("-");
        return new Date(d);
      }
​
      // defs for images
      var defs = d3.select("svg").append("defs");
​
      // append the tip
      var tip = d3.select("#wrapper").append("div")
          .attr("class", "tip");
​
      d3.json("data.json", function(error, data){
        if (error) throw error;
​
        data = data.include;
​
        data.forEach(function(d){
          d.accuse_date = parseDate(d.accuse_date);
          d.slug = jz.str.toSlugCase(d.name);
          return d;
        });
​
        x.domain([new Date(2017, 9, 1), data[data.length - 1].accuse_date]);
​
        var industries = jz.arr.sortBy(jz.arr.pivot(data, "industry"), "count", "desc");
        y.domain(industries.map(function(d){ return d.value; }));
​
        x_axis.tickSizeInner(-height + y.bandwidth() / 2 - 3)
​
        svg.append("g")
            .attr("class", "axis y left")
            .call(y_axis_left)
          .selectAll(".tick text")
            .attr("dx", -radius);
​
        svg.append("g")
            .attr("class", "axis y right")
            .attr("transform", "translate(" + width + ", 0)")
            .call(y_axis_right.tickFormat(function(d){ return industries.filter(function(c){ return c.value == d })[0].count; }))
          .selectAll(".tick text")
            .attr("dx", radius);
​
        svg.append("g")
            .attr("class", "axis x")
            .attr("transform", "translate(0, " + height + ")")
            .call(x_axis)
          .selectAll(".tick line")
            .style("display", function(d){
              var s = d.toString().split(" ");
              var m = s[1];
              if (m !== curr_month){
                curr_month = m;
                return "block"; 
              } else {
                return "none";
              }
            });
​
        // images
        var img = defs.selectAll("pattern")
            .data(data, function(d){ return d.slug; })
          .enter().append("pattern")
            .attr("id", function(d){ return "img-" + d.slug; })
            .attr("x", "0%")
            .attr("y", "0%")
            .attr("height", "100%")
            .attr("width", "100%")
            .attr("viewBox", "0 0 " + radius + " " + radius)
          .append("image")
            .attr("x", "0%")
            .attr("y", "0%")
            .attr("width", radius)
            .attr("height", radius)
            .attr("xlink:href", function(d){ return "https://graphics.axios.com/2017-12-12-sexual-misconduct-cases/img/" + d.image_url; })
​
        forceSim();
​
        draw();
​
        window.addEventListener("resize", function(){ 
          
          // all of these things need to be updated on resize
          width = +jz.str.keepNumber(d3.select("#wrapper").style("width")) - margin.left - margin.right;
          
          d3.select(".axis.y.right").attr("transform", "translate(" + width + ", 0)").call(y_axis_right.tickSizeInner(-width));
          
          x.rangeRound([0, width]);
​
          forceSim();
​
          d3.select(".x.axis")
            .call(x_axis);
​
          draw(); 
        });
​
        function draw(){
​
          // circle
          var circle = svg.selectAll(".circle")
              .data(v.polygons(data), function(d){ return d.data.slug; });
​
          circle.enter().append("circle")
              .attr("class", function(d) { return "circle circle-" + d.data.slug; })
              .attr("r", radius)
              .style("fill", function(d){ return "url(#img-" + d.data.slug + ")"; })
            .merge(circle)
              .attr("cx", function(d) { return d ? d.data.x : null; })
              .attr("cy", function(d) { return d ? d.data.y : null; });
​
          // background
          var bg_circle = svg.selectAll(".circle-bg")
              .data(v.polygons(data), function(d){ return d.data.slug; });
​
          bg_circle.enter().append("circle")
              .attr("class", function(d) { return "circle-bg circle-bg-" + d.data.slug; })
              .attr("r", radius)
            .merge(bg_circle)
              .attr("cx", function(d) { return d ? d.data.x : null; })
              .attr("cy", function(d) { return d ? d.data.y : null; });
​
          // hover
          var hover_circle = svg.selectAll(".circle-hover")
              .data(v.polygons(data), function(d){ return d.data.slug; });
​
          hover_circle.enter().append("circle")
              .attr("class", function(d) { return "circle-hover circle-hover-" + d.data.slug; })
              .attr("r", radius)
            .merge(hover_circle)
              .attr("cx", function(d) { return d ? d.data.x : null; })
              .attr("cy", function(d) { return d ? d.data.y : null; });
​
          svg.selectAll(".circle-hover").on("mouseover", function(d){
            
            tip.html(d.data.name);
            
            d3.select(".circle-" + d.data.slug).attr("r", radius * 2.5).moveToFront();
            d3.select(".circle-bg-" + d.data.slug).style("fill-opacity", 0).attr("r", radius * 2.5).style("stroke-width", 3).moveToFront();
​
            var tip_width = +jz.str.keepNumber(tip.style("width"));
            var tip_height = +jz.str.keepNumber(tip.style("height"));
​
            var circle_node = d3.select(this).node().getBoundingClientRect();
            var circle_left = circle_node.left;
            var circle_top = circle_node.top;
​
            var tip_left = circle_left - tip_width / 2 + radius;
            var tip_top = circle_top - radius * 1.5 - tip_height;
​
            tip
                .style("left", tip_left + "px")
                .style("top", tip_top + "px");
​
          }).on("mouseout", function(d){
            d3.select(".circle-" + d.data.slug).attr("r", radius);
            d3.select(".circle-bg-" + d.data.slug).style("fill-opacity", .3).attr("r", radius).style("stroke-width", 1);
​
            tip
              .style("left", "-1000px")
              .style("top", "-1000px");
​
          });
​
        }
​
        function forceSim(){
          var simulation = d3.forceSimulation(data)
              .force("y", d3.forceY(function(d){ return y(d.industry) + y.bandwidth() / 2; }).strength(1))
              .force("x", d3.forceX(function(d){ return x(d.accuse_date); }).strength(1))
              .force("collide", d3.forceCollide(radius + 1))
              .stop();
​
          for (var i = 0; i < 200; ++i) simulation.tick();
        }
​
      });
​
    </script>
  </body>
</html>
    