<div>
<svg id="base" width="1000" height="750">
<g id="title">
<text x="10" y="30" font-size = "40px">How are you doing today, Doctor?</text>
</g>
<g id="psyt_group">
<text x="25" y="70" font-size = "22px">Have they sought out mental health services in the past 12 months?</text>
</g>
<g id="part_group">
<text x="25" y="70" font-size = "22px">Do they have a partner?</text>
</g>
<g id="job_group">
<text x="25" y="70" font-size = "22px">Do they have a paid job?</text>
</g>
<g id="layer1""></g>
<g id="layer2" transform="translate(500,130)"></g>
<g>
<text x="230" y="110" font-size = "18px">Yes</text>
<text x="680" y="110" font-size = "18px">No</text>
</g>
<g id="cesd">
<text x="10" y="620" font-size = "18px">CESD:
<tspan x="10" y="640" font-size = "16px">The student's score on the Center for Epidemiological Studies - Depression scale.</tspan>
<tspan x="10" y="660" font-size = "16px">Scores can range from 0 to 60, with higher scores indicating a greater risk of clinical depression.</tspan>
<tspan x="10" y="680" font-size = "16px">These students reported CESD scores between 0 and 54.</tspan></text>
</g>
<g id="stai">
<text x="10" y="620" font-size = "18px">STAI_T:
<tspan x="10" y="640" font-size = "16px">The student's score on the State-Trait Anxiety Inventory.</tspan>
<tspan x="10" y="660" font-size = "16px">Scores can range from 20 to 80, and higher scores indicate more general anxiety.</tspan>
<tspan x="10" y="680" font-size = "16px">These students reported STAI_T scores between 20 and 69.</tspan></text>
</g>
<g id="mbi">
<text x="10" y="620" font-size = "18px">MBI:
<tspan x="10" y="640" font-size = "16px">These scores reflect the student's score on the Maslach Burnout Inventory Student-Survey.</tspan></text>
</g>
<g id="ex">
<text x="10" y="660" font-size = "16px"> Higher scores in emotional exhaustion, which range from 5 to 35, indicate greater burnout.
<tspan x="10" y="680" font-size = "16px">These students reported MBI_EX scores between 5 and 30.</tspan></text>
</g>
<g id="cy">
<text x="10" y="660" font-size = "16px"> Higher scores in cynicism, which range from 2 to 28, indicate greater burnout.
<tspan x="10" y="680" font-size = "16px">These students reported MBI_CY scores between 4 and 24.</tspan></text>
</g>
<g id="ea">
<text x="10" y="660" font-size = "16px"> Lower scores in academic efficacy, which range from 6 to 42, indicate greater burnout.
<tspan x="10" y="680" font-size = "16px">These students reported MBI_EA scores between 11 and 36.</tspan></text>
</g>
<g>
<line x1="50" y1="710" x2="900" y2="710" style="stroke:black;fill:stroke-width:4" />
<text x="150" y="735" font-size = "18px">First Year</text>
<text x="425" y="735" font-size = "18px" style = "fill:blue;">Second Year</text>
<text x="700" y="735" font-size = "18px" style = "fill:red;">Third Year</text>
</g>
</svg>
<style>
.M1 {fill:#000000; background-color:#000000; color: #dddddd;} /* black */
.M2 {fill:#0000ff; background-color:#0000ff; color: #dddddd;} /* blue */
.M3 {fill: #aa0000; background-color: #aa0000;} /* maroon */
.node {fill:none;}
.node text {font-family: Arial, Helvetica, sans-serif; font-size: 10px; fill: white; text-anchor: middle}
</style>
</div>
viz = d3.select(svgContainer)
layerSwitch = {
let layers = 0;
if (groupBy == 'psyt') {
viz.select("#psyt_group").style("visibility","visible")
viz.select("#part_group").style("visibility","hidden")
viz.select("#job_group").style("visibility","hidden")
viz.select("#layer1").attr("transform","translate(120,200)")
}else{
if (groupBy == 'part'){
viz.select("#psyt_group").style("visibility","hidden")
viz.select("#part_group").style("visibility","visible")
viz.select("#job_group").style("visibility","hidden")
viz.select("#layer1").attr("transform","translate(10,130)")
}else{
viz.select("#psyt_group").style("visibility","hidden")
viz.select("#part_group").style("visibility","hidden")
viz.select("#job_group").style("visibility","visible")
viz.select("#layer1").attr("transform","translate(50,130)")
}
}
if (sizeField == 'cesd') {
viz.select("#cesd").style("visibility","visible")
viz.select("#stai").style("visibility","hidden")
viz.select("#mbi").style("visibility","hidden")
viz.select("#ex").style("visibility","hidden")
viz.select("#cy").style("visibility","hidden")
viz.select("#ea").style("visibility","hidden")
}else{
if (sizeField == 'stai_t'){
viz.select("#cesd").style("visibility","hidden")
viz.select("#stai").style("visibility","visible")
viz.select("#mbi").style("visibility","hidden")
viz.select("#ex").style("visibility","hidden")
viz.select("#cy").style("visibility","hidden")
viz.select("#ea").style("visibility","hidden")
}else{
viz.select("#cesd").style("visibility","hidden")
viz.select("#stai").style("visibility","hidden")
viz.select("#mbi").style("visibility","visible")
if (sizeField == 'mbi_ex'){
viz.select("#ex").style("visibility","visible")
viz.select("#cy").style("visibility","hidden")
viz.select("#ea").style("visibility","hidden")
}else{
if (sizeField == 'mbi_cy'){
viz.select("#ex").style("visibility","hidden")
viz.select("#cy").style("visibility","visible")
viz.select("#ea").style("visibility","hidden")
}else{
viz.select("#ex").style("visibility","hidden")
viz.select("#cy").style("visibility","hidden")
viz.select("#ea").style("visibility","visible")
}
}
}
}
return layers;
}
data = FileAttachment("ModifiedData.csv").csv()
tokeep = ["M1", "M2", "M3"];
data2 = data.filter(function(d,i){ return tokeep.indexOf(d.year) >= 0 & d[groupBy] == "Yes"});
data3 = data.filter(function(d,i){ return tokeep.indexOf(d.year) >= 0 & d[groupBy] == "No"});
sortedData2 = d3.sort(data2, (a,b)=>d3.ascending(a[sortBy],b[sortBy]))
sortedData3 = d3.sort(data3, (a,b)=>d3.ascending(a[sortBy],b[sortBy]))
import {layoutChildren} from "@emfielduva/dvlib_layout"
dataLayout3 = layoutChildren("medstudents_no", sortedData3);
dataLayout2 = layoutChildren("medstudents_yes", sortedData2);
pcElem = d3.select(svgContainer).select("#layer1")
pcElem2 = d3.select(svgContainer).select("#layer2")
rightSize = 400;
leftSize = {
let leftSize = 0;
if (groupBy == 'psyt') {
leftSize = 0.63 * rightSize // vs 0.2782; through trial and error
}else{
if (groupBy == 'part'){
leftSize = 1.20 * rightSize // vs 1.709; through trial and error
}else{
leftSize = 0.98 * rightSize // vs 0.8906; through trial and error
}
}
return leftSize;
}
pc2 = dvPackCircles(pcElem,dataLayout2,leftSize,leftSize,sizeField,options);
pc3 = dvPackCircles(pcElem2,dataLayout3,rightSize,rightSize,sizeField,options);
options = ({
transitionMS: 1000,
padding: 4,
classField: "year",
//textLabelField: "id"
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
