score:8

Accepted answer

Here's a quick example which combines the ideas of your beeswarm example with your initial boxplot. I've commented the tricky parts below:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <!-- Load d3.js -->
  <script src="https://d3js.org/d3.v4.js"></script>

  <!-- Create a div where the graph will take place -->
  <div id="my_dataviz"></div>

  <script>
    // set the dimensions and margins of the graph
    var margin = {
        top: 10,
        right: 30,
        bottom: 30,
        left: 40
      },
      width = 460 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    var svg = d3.select("#my_dataviz")
      .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 + ")");

    // Read the data and compute summary statistics for each specie
    d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

      // Compute quartiles, median, inter quantile range min and max --> these info are then used to draw the box.
      var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
        .key(function(d) {
          return d.Species;
        })
        .rollup(function(d) {
          q1 = d3.quantile(d.map(function(g) {
            return g.Sepal_Length;
          }).sort(d3.ascending), .25)
          median = d3.quantile(d.map(function(g) {
            return g.Sepal_Length;
          }).sort(d3.ascending), .5)
          q3 = d3.quantile(d.map(function(g) {
            return g.Sepal_Length;
          }).sort(d3.ascending), .75)
          interQuantileRange = q3 - q1
          min = q1 - 1.5 * interQuantileRange
          max = q3 + 1.5 * interQuantileRange
          return ({
            q1: q1,
            median: median,
            q3: q3,
            interQuantileRange: interQuantileRange,
            min: min,
            max: max
          })
        })
        .entries(data)

      // Show the X scale
      var x = d3.scaleBand()
        .range([0, width])
        .domain(["setosa", "versicolor", "virginica"])
        .paddingInner(1)
        .paddingOuter(.5)
      svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))

      // Show the Y scale
      var y = d3.scaleLinear()
        .domain([3, 9])
        .range([height, 0])
      svg.append("g").call(d3.axisLeft(y))

      // Show the main vertical line
      svg
        .selectAll("vertLines")
        .data(sumstat)
        .enter()
        .append("line")
        .attr("x1", function(d) {
          return (x(d.key))
        })
        .attr("x2", function(d) {
          return (x(d.key))
        })
        .attr("y1", function(d) {
          return (y(d.value.min))
        })
        .attr("y2", function(d) {
          return (y(d.value.max))
        })
        .attr("stroke", "black")
        .style("width", 40)

      // rectangle for the main box
      var boxWidth = 100
      svg
        .selectAll("boxes")
        .data(sumstat)
        .enter()
        .append("rect")
        .attr("x", function(d) {
          return (x(d.key) - boxWidth / 2)
        })
        .attr("y", function(d) {
          return (y(d.value.q3))
        })
        .attr("height", function(d) {
          return (y(d.value.q1) - y(d.value.q3))
        })
        .attr("width", boxWidth)
        .attr("stroke", "black")
        .style("fill", "#69b3a2")

      // Show the median
      svg
        .selectAll("medianLines")
        .data(sumstat)
        .enter()
        .append("line")
        .attr("x1", function(d) {
          return (x(d.key) - boxWidth / 2)
        })
        .attr("x2", function(d) {
          return (x(d.key) + boxWidth / 2)
        })
        .attr("y1", function(d) {
          return (y(d.value.median))
        })
        .attr("y2", function(d) {
          return (y(d.value.median))
        })
        .attr("stroke", "black")
        .style("width", 80)

      var r = 8;
      // create a scale that'll return a discreet value
      // so that close y values fall in a line
      var yPtScale = y.copy()
        .range([Math.floor(y.range()[0] / r), 0])
        .interpolate(d3.interpolateRound)
        .domain(y.domain());
      
      // bucket the data
      var ptsObj = {};
      data.forEach(function(d,i) {
        var yBucket = yPtScale(d.Sepal_Length);
        if (!ptsObj[d.Species]){
          ptsObj[d.Species] = {};
        }
        if (!ptsObj[d.Species][yBucket]){
          ptsObj[d.Species][yBucket] = [];
        }
        ptsObj[d.Species][yBucket].push({
          cy: yPtScale(d.Sepal_Length) * r,
          cx: x(d.Species)
        });
      });
      
      // determine the x position
      for (var x in ptsObj){
        for (var row in ptsObj[x]) {
          var v = ptsObj[x][row], // array of points
              m = v[0].cx, // mid-point
              l = m - (((v.length / 2) * r) - r/2); // left most position based on count of points in the bucket

          v.forEach(function(d,i){
            d.cx = l + (r * i); // x position
          });
        }
      }

      // flatten the data structure
      var flatData = Object.values(ptsObj)
                      .map(function(d){return Object.values(d)})
                      .flat(2);

      svg
        .selectAll("points")
        .data(flatData)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return d.cx;
        })
        .attr("cy", function(d) {
          return d.cy;
        })
        .attr("r", 4)
        .style("fill", "white")
        .attr("stroke", "black")


    })
  </script>
</body>

</html>


Related Query

More Query from same tag