block by emeeks 762b3694269a46151f73f6bc48be6d1c

Annotated Circlepack

Full Screen

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.

index.html

<!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'>

    <style>
      :root{
          --annotation-color: #E8336D;
          --lower-color: #015e54;
          --middle-color: #00897b;
          --upper-color: #50c9bc;
      }
      body{
          background-color: whitesmoke;
      }
      svg {
          background-color: white;
          font-family: 'Lato';
          overflow: visible;
      }

      .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.rawgit.com/susielu/d3-annotation/master/d3-annotation.js"></script> 

    <script>
      const keys = ["root", "grade", "socio", "gender"]
      var socioScale = d3.scaleOrdinal()
          .domain(["Lower", "Middle", "Upper"])
          .range(["#015e54", "#00897b", "#50c9bc"]);
     
      const nestedStudents = d3.nest()
        .key(d => d[keys[1]])
        .key(d => d[keys[2]])
        .entries(students);
      const packableStudents = {id: "All Students", values: nestedStudents};
      const packChart = d3.pack();
      
      packChart.size([500,500]);

      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>

students.js

const students = [{"sid":0,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"B"},{"sid":1,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":2,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":3,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Lower","grade":"B"},{"sid":4,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":5,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":6,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":7,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":8,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":9,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":10,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Upper","grade":"C"},{"sid":11,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":12,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"C"},{"sid":13,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":14,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Lower","grade":"B"},{"sid":15,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"B"},{"sid":16,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"C"},{"sid":17,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Lower","grade":"C"},{"sid":18,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"F"},{"sid":19,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"D"},{"sid":20,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Lower","grade":"C"},{"sid":21,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"A"},{"sid":22,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":23,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"C"},{"sid":24,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"C"},{"sid":25,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"F"},{"sid":26,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"C"},{"sid":27,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"C"},{"sid":28,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"A"},{"sid":29,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":30,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":31,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"D"},{"sid":32,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":33,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":34,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"D"},{"sid":35,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":36,"ethnicity":"Asian","gender":"Female","socio":"Middle","grade":"B"},{"sid":37,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":38,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Upper","grade":"F"},{"sid":39,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":40,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"C"},{"sid":41,"ethnicity":"Asian","gender":"Female","socio":"Lower","grade":"B"},{"sid":42,"ethnicity":"Asian","gender":"Female","socio":"Middle","grade":"B"},{"sid":43,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Upper","grade":"C"},{"sid":44,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"C"},{"sid":45,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":46,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":47,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"D"},{"sid":48,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":49,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"C"},{"sid":50,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"D"},{"sid":51,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"D"},{"sid":52,"ethnicity":"Asian","gender":"Male","socio":"Lower","grade":"D"},{"sid":53,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"D"},{"sid":54,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"F"},{"sid":55,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":56,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":57,"ethnicity":"Asian","gender":"Male","socio":"Middle","grade":"B"},{"sid":58,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"D"},{"sid":59,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"C"},{"sid":60,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"D"},{"sid":61,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"B"},{"sid":62,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"F"},{"sid":63,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":64,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"D"},{"sid":65,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"C"},{"sid":66,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":67,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":68,"ethnicity":"Asian","gender":"Female","socio":"Lower","grade":"D"},{"sid":69,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Lower","grade":"C"},{"sid":70,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Upper","grade":"B"},{"sid":71,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":72,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"F"},{"sid":73,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":74,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":75,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":76,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":77,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"F"},{"sid":78,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"C"},{"sid":79,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"D"},{"sid":80,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":81,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Lower","grade":"C"},{"sid":82,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"B"},{"sid":83,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":84,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"A"},{"sid":85,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"D"},{"sid":86,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":87,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"D"},{"sid":88,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"C"},{"sid":89,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"C"},{"sid":90,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":91,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"B"},{"sid":92,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"C"},{"sid":93,"ethnicity":"Asian","gender":"Female","socio":"Middle","grade":"B"},{"sid":94,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":95,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Lower","grade":"B"},{"sid":96,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"C"},{"sid":97,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":98,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"F"},{"sid":99,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":100,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":101,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"B"},{"sid":102,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"B"},{"sid":103,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":104,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":105,"ethnicity":"Asian","gender":"Female","socio":"Lower","grade":"B"},{"sid":106,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":107,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":108,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"C"},{"sid":109,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":110,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Lower","grade":"C"},{"sid":111,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":112,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":113,"ethnicity":"Asian","gender":"Male","socio":"Middle","grade":"C"},{"sid":114,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":115,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":116,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"D"},{"sid":117,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"B"},{"sid":118,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Lower","grade":"B"},{"sid":119,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Lower","grade":"B"},{"sid":120,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"D"},{"sid":121,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":122,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"D"},{"sid":123,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"D"},{"sid":124,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":125,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":126,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Lower","grade":"C"},{"sid":127,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"B"},{"sid":128,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":129,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Lower","grade":"D"},{"sid":130,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":131,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"D"},{"sid":132,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":133,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"D"},{"sid":134,"ethnicity":"Asian","gender":"Female","socio":"Upper","grade":"B"},{"sid":135,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Upper","grade":"C"},{"sid":136,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":137,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"B"},{"sid":138,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":139,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Lower","grade":"A"},{"sid":140,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":141,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Middle","grade":"D"},{"sid":142,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":143,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":144,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"F"},{"sid":145,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"A"},{"sid":146,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"A"},{"sid":147,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"F"},{"sid":148,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":149,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":150,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Lower","grade":"B"},{"sid":151,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":152,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":153,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"C"},{"sid":154,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Lower","grade":"B"},{"sid":155,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"B"},{"sid":156,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":157,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"D"},{"sid":158,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"C"},{"sid":159,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"C"},{"sid":160,"ethnicity":"Non-Hispanic Black or African American","gender":"Male","socio":"Lower","grade":"B"},{"sid":161,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":162,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":163,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":164,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":165,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":166,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"A"},{"sid":167,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"D"},{"sid":168,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"C"},{"sid":169,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"D"},{"sid":170,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":171,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Lower","grade":"C"},{"sid":172,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Lower","grade":"B"},{"sid":173,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"B"},{"sid":174,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":175,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Upper","grade":"C"},{"sid":176,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":177,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":178,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"A"},{"sid":179,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"C"},{"sid":180,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Middle","grade":"B"},{"sid":181,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":182,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Upper","grade":"B"},{"sid":183,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":184,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Middle","grade":"A"},{"sid":185,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"D"},{"sid":186,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":187,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"},{"sid":188,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"D"},{"sid":189,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"B"},{"sid":190,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"F"},{"sid":191,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Middle","grade":"D"},{"sid":192,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"A"},{"sid":193,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"A"},{"sid":194,"ethnicity":"Hispanic or Latino","gender":"Male","socio":"Middle","grade":"B"},{"sid":195,"ethnicity":"Hispanic or Latino","gender":"Female","socio":"Upper","grade":"B"},{"sid":196,"ethnicity":"Non-Hispanic Black or African American","gender":"Female","socio":"Lower","grade":"B"},{"sid":197,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Middle","grade":"C"},{"sid":198,"ethnicity":"Non-Hispanic White","gender":"Male","socio":"Lower","grade":"C"},{"sid":199,"ethnicity":"Non-Hispanic White","gender":"Female","socio":"Lower","grade":"B"}]