Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/README.md

Created March 3, 2017 03:04
Show Gist options
  • Save emeeks/762b3694269a46151f73f6bc48be6d1c to your computer and use it in GitHub Desktop.
Save emeeks/762b3694269a46151f73f6bc48be6d1c to your computer and use it in GitHub Desktop.
Download ZIP
Annotated Circlepack
Raw
README.md

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.

Raw
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>
Raw
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"}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment