Annotated Circlepack

Circle Pack as Annotation

A diagram of student performance grouped by final grade for the class and socio-economic status.

This demonstrates how to use d3-annotation() to draw a Circle Pack. Because circle packing as a diagram uses enclosure to signal hierarchy (in other words, you draw a circle around all of a parent node's children) it might make more sense visually to signal the containers as annotations and only the leaf nodes using traditional data visualization methods. Here I use d3.circlePack to format the data but I only instantiate the leaf nodes (the colored and filled circles) and pass the remaining parent nodes (except for the root node) to d3-annotation for use as annotations.

d3-annotation by Susie Lu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>

.editable .annotation-subject, .editable .annotation-textbox {
        cursor: move;
      }

.annotation path {
        stroke: var(--annotation-color);
        fill: rgba(0,0,0,0);
      }

.annotation path.connector-arrow{
        fill: var(--annotation-color);
      }

.annotation text {
        fill: var(--annotation-color);
      }

.annotation-title {
        font-weight: bold;
      }

.annotation .annotation-subject circle.handle {
        display: none;
      }

.annotation-note-bg {
        fill: rgba(255, 255, 255, 0);
      }

circle.handle {
        stroke-dasharray: 5;
        stroke: var(--annotation-color);
        fill: rgba(255, 255, 255, .5);
        cursor: move;
        stroke-opacity: .4;
      }

circle.handle.highlight {
        stroke-opacity: 1;
      }

.grade {
        font-weight: 900;
        font-size: 30px;
        stroke-width: 3px;
      }

.annotation:not(.grade) .annotation-subject, .annotation:not(.grade) .annotation-connector {
        stroke-dasharray: 2,2;
      }

.annotation.lower text{
        fill: var(--lower-color);
      }

.annotation.lower path {
        stroke: var(--lower-color);
      }

.annotation.middle text{
        fill: var(--middle-color);
      }

.annotation.middle path {
        stroke: var(--middle-color);
      }

.annotation.upper text{
        fill: var(--upper-color);
      }

.annotation.upper path {
        stroke: var(--upper-color);
      }

</style>
</head>
<body>
    <svg width=670 height=600></svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="students.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.js"></script>

const root = d3.hierarchy(packableStudents, d => d.values)
        .sum(() => 1);

const circlepackStudents = packChart(root).descendants()
      
      d3.select("svg")
        .append("g")
        .attr("transform", "translate(55, 35)")
        .selectAll("circle")
        .data(circlepackStudents.filter(d => !d.children))
        .enter()
        .append("circle")
          .attr("r", d => d.r)
          .attr("cx", d => d.x)
          .attr("cy", d => d.y)
          .style("fill", d => socioScale(d.data.socio))

//These were arranged by hand, when with editMode on
        //makeAnnotations.json() in the console it prints out 
        //the updated attributes
        const annotations = [
        {
          "x": 142.58501794483, "y": 272.22046937348,
          "dx": -167.3784641125, "dy": 0,
          "className": "grade",
          "connector": { "end": "arrow" },
          "subject": { "radius": 140.31076794375 },
          "note": { "label": "B" }
        },
        {
          "x": 390.57522307113, "y": 272.22046937348,
          "dx": 174.3588743651, "dy": 0,
          "className": "grade",
          "connector": { "end": "arrow" },
          "subject": { "radius": 107.67943718255 },
          "note": { "label": "C" }
        },
        {
          "x": 289.42724906802, "y": 392.70996175878,
          "dx": -87.724925655167, "dy": 31.275074344833,
          "className": "grade",
          "connector": { "end": "arrow" },
          "subject": { "radius": 49.637537172416 },
          "note": { "label": "F" }
        },
        {
          "x": 294.3594750984, "y": 102.83971098375,
          "dx": 123.24251921882, "dy": 0,
          "className": "grade",
          "connector": { "end": "arrow" },
          "subject": { "radius": 87.121259609409 },
          "note": { "label": "D" }
        },
        {
          "x": 155.3885333773, "y": 78.339114944169,
          "dx": -92.014229714427, "dy": 0,
          "className": "grade",
          "connector": { "end": "arrow" },
          "subject": { "radius": 53.992885142786 },
          "note": { "label": "A" }
        },
        {
          "x": 79.01027201784, "y": 272.22046937348,
          "dx": -53.472044033518, "dy": -113.47204403352,
          "subject": { "radius": 76.736022016759 },
          "className": "middle",
          "note": { "label": "Middle" }
        },
        {
          "x": 219.32103996159, "y": 272.22046937348,
          "dx": -42.149491853984, "dy": -93.149491853984,
          "subject": { "radius": 63.574745926992 },
          "className": "lower",
          "note": { "label": "Lower" }
        },
        {
          "x": 157.93932199545, "y": 333.81059730268,
          "dx": -5.7592101572684, "dy": 91.240789842732,
          "subject": { "radius": 23.379605078634 },
          "className": "upper",
          "note": { "label": "Upper" }
        },
        {
          "x": 336.73550447986, "y": 272.22046937348,
          "dx": 136.32056281745, "dy": -109.67943718255,
          "subject": { "radius": 53.839718591274 },
          "className": "lower",
          "note": { "label": "Lower" }
        },
        {
          "x": 444.41494166241, "y": 272.22046937348,
          "dx": 106.32056281745, "dy": -68.679437182548,
          "subject": { "radius": 53.839718591274 },
          "className": "middle",
          "note": { "label": "Middle" }
        },
        {
          "x": 390.57522307113, "y": 327.57486079864,
          "dx": 109.24078984273, "dy": 54.240789842732,
          "subject": { "radius": 23.379605078634 },
          "className": "upper",
          "note": { "label": "Upper" }
        },
        {
          "x": 273.9370621036, "y": 382.70758068492,
          "dx": -14.397247980502, "dy": 73.602752019498,
          "subject": { "radius": 31.198623990251 },
          "className": "middle",
          "note": { "label": "Middle" }
        },
        {
          "x": 313.69321548308, "y": 382.70758068492,
          "dx": 43.884941221544, "dy": 3.8849412215444,
          "subject": { "radius": 8.5575293892278 },
          "className": "upper",
          "note": { "label": "Upper" }
        },
        {
          "x": 315.63663103469, "y": 409.6339812521,
          "dx": -3.8778263643308, "dy": 117.12217363567,
          "subject": { "radius": 18.438913182165 },
          "className": "lower",
          "note": { "label": "Lower" }
        },
        {
          "x": 253.14849470253, "y": 102.83971098375,
          "dx": 119.17944157293, "dy": -109.82055842707,
          "subject": { "radius": 45.910279213534 },
          "className": "middle",
          "note": { "label": "Middle" }
        },
        {
          "x": 340.26975431194, "y": 102.83971098375,
          "dx": 102.57803920825, "dy": -102.42196079175,
          "subject": { "radius": 41.210980395876 },
          "className": "lower",
          "note": { "label": "Lower" }
        },
        {
          "x": 127.0682364022, "y": 78.339114944169,
          "dx": -8.3451763353668, "dy": -58.345176335367,
          "subject": { "radius": 25.672588167683 },
          "className": "middle",
          "note": { "label": "Middle" }
        },
        {
          "x": 181.06112154499, "y": 78.339114944169,
          "dx": -4.640593950206, "dy": -73.640593950206,
          "subject": { "radius": 28.320296975103 },
          "className": "lower",
          "note": { "label": "Lower" }
        }
      ]

window.makeAnnotations = d3.annotation()
        .annotations(annotations)
        .type(d3.annotationCalloutCircle)
        //Uncomment below if you want to be able to move the labels around
        // .editMode(true)

d3.select("svg").append("g")
        .attr("transform", "translate(55, 35)")
        .attr("class", "annotation-test")
        .call(makeAnnotations)

</script>
</body>
</html>

Updated missing url https://cdn.rawgit.com/susielu/d3-annotation/master/d3-annotation.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.js

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

https://cdn.rawgit.com/susielu/d3-annotation/master/d3-annotation.js