29:null 2a:["$","title",null,{"children":"Exploring Oregon's Special Education Data | Brianna Wilson | Observable"}] 2f:T1fee,donutCharts = { const container = d3.select( html`

` ) const tooltipDiv = container.select(".tooltip") // Add screen-reader-friendly label to whole chart container.attr("role", "figure") .attr("class", "container") const drawDonut = district => { // Draw donut canvas const svg = container.append('svg') .attr("width", 200) .attr("height", 250) .attr("overflow", "visible") .attr("class", "donutChart") .attr("aria-label", "donut chart") const bounds = svg.append('g') .attr('text-anchor', 'middle') .attr("width", widthDonut) .attr("height", heightDonut) .style("transform", `translate(${donutMargin.left}px, ${donutMargin.top}px`) // Configure donut chart data let pieData = [ { type: 'inclusive', value: district.eighty }, { type: 'semi-inclusive', value: district.between }, { type: 'non-inclusive', value: district.forty }, { type: 'separate', value: district.separate } ] let pieArcs = pie(pieData) let colorScale = d3.scaleOrdinal(pieData.map(d => d), colors) // Label with district's name const districtName = bounds.node().appendChild( createSVGtext({ text: `${district.name !== null ? district.name : district.properties.NAME}`, x: `${widthDonut / 2}`, fontSize: 16, fill: '#555555', textAnchor: "middle", maxCharsPerLine: 16, lineHeight: 1.2, textClass: "donutName", font_weight: "bold", align_to_bottom: "true" }) ) // Donut Chart const donut = bounds.append('g') .attr('class', 'donut-container') .attr('transform', `translate(${widthDonut / 2}, ${heightDonut / 2 })`) .selectAll('path') .data(pieArcs) .join('path') .style('fill', district.students == 0 ? "lightgrey" : d => colorScale(d.data.type)) .attr('d', arc) .attr('class', 'pieSlice') .attr("aria-label", function(d) { `${formatDec(d.value)} percent of students are in ${d.data.type === "inclusive" ? "an" : "a"} ${d.data.type} setting` }) //.call(tooltip, tooltipDiv) function getXForAngle(angle, offsetArc, offsetRad) { let xCoord = Math.cos(angle - (Math.PI / 2) + offsetArc) * (widthDonut / 2) * offsetRad return xCoord } function getYForAngle(angle, offsetArc, offsetRad) { let yCoord = Math.sin(angle - (Math.PI / 2) + offsetArc) * (widthDonut / 2) * offsetRad return yCoord } const numberLabels = bounds.append('g') .attr('class', 'donut-labels') .attr('transform', `translate(${widthDonut / 2}, ${heightDonut / 2 })`) .selectAll('text') .data(pieArcs) .join('text') .attr('fill', "#fff") .attr('font-size', "10px") .attr('dominant-baseline', 'middle') .style('text-anchor', "middle") .attr('font-weight', "bold") .text(function(d) { if(d.value === 100 && d.data.type === "semi-inclusive") { return null } else if(d.value >= 5 && d.data.type === "inclusive") { return `${format(d.value)}%` } else if(d.value >= 5) { return format(d.value) } else { return null } }) //.text(d => d.value > 4 ? format(d.value) : null) .attr('dx', d => d.data.type === "inclusive" ? getXForAngle(d.startAngle, 0.25, 0.84) : getXForAngle(d.startAngle, 0.18, 0.84)) .attr('dy', d => getYForAngle(d.startAngle, 0.18, 0.84)) // Label with student count const numberStudents = bounds.append("g") .attr("transform", `translate(${widthDonut / 2}, ${heightDonut / 2})`) .append('text') .style("font-size", "20px") .style("text-anchor", "middle") .attr('font-weight', 'bold') .attr('fill', '#555555') .text(district.students !== null ? format(district.students) : "not reported") .attr('dy', "-0.5em") //.call(tooltip, tooltipDiv) const studentsLabel = bounds.append("g") .attr("transform", `translate(${widthDonut / 2}, ${heightDonut / 2})`) .append('text') .style("font-size", "12px") .style("text-anchor", "middle") .attr('fill', '#555555') .text(district.students !== null ? 'students' : "") .attr('dy', "0.2em") // const studentsLabel2 = bounds.append("g") // .attr("transform", `translate(${widthDonut / 2}, ${heightDonut / 2})`) // .append('text') // .style("font-size", "12px") // .style("text-anchor", "middle") // .attr('fill', '#555555') // .text(district.students !== null ? 'with IEPs' : "") // .attr('dy', "1.2em") // Configure alerts data let alertData = [ { type: 'for disproportionate discipline of students with IEPs', value: district.susp_iep }, { type: 'for disproportionate discipline of students with IEPs by race', value: district.susp_iep_race }, { type: 'for disproportionate representation in special education by race', value: district.proprtn_race }, { type: 'for disproportionate representation in specific disability categories by race', value: district.proprtn_race_specific } ] function alerts(data, alertsHeight) { let alertsSpace = [] let yPos, alertNo for (let i = 0; i < data.length; i++) { let interval = alertsHeight / (data.length - 1) yPos = 80 + (interval * i) alertNo = i + 1 alertsSpace.push({"alertNo": alertNo, "yPos": yPos, "value": data[i].value, "type": data[i].type}) } return alertsSpace } // Labels for if there are any alerts let alertSet = alerts(alertData, 50) const alert = bounds.append("g") .attr("class", 'alert') .attr('transform', `translate(0, ${heightDonut / 2 })`) .selectAll('text') .data(alertSet) .join('text') .attr('fill', alertColor) .attr('font-size', '1rem') .style("text-anchor", "start") .attr('font-weight', 'bold') .attr('dx', 0) .attr('dy', d => d.yPos) .text(function(d) { if(d.value === "Yes") { return '!' } else { return "" } }) const alertsText = bounds.append("foreignObject") .attr("width", 150) .attr("height", 80) .attr("class", "alerts-text") .attr('transform', `translate(10, ${heightDonut + 6})`) .selectAll("xhtml") .data(alertSet) .join("xhtml") .html(function(d) { if(d.value === "Yes") { return `${d.type}` } else { return "" } }) // const alertsText = bounds.append("g") // .attr("class", 'alerts-text') // .attr('transform', `translate(0, ${heightDonut / 2 })`) // .selectAll('text') // .data(alertSet) // .join('text') // .attr('fill', "#333") // .attr('font-size', '0.75rem') // .style("text-anchor", "start") // .attr('dx', 10) // .attr('dy', d => d.yPos - 1) // .text(function(d) { // if(d.value === "Yes") { // return `${d.type}` // } else { // return "" // } // }) // .call(wrap, 30, 0) // const alertText = bounds.append("foreignObject") // .attr("width", 200) // .attr("height", 80) // .append("xhtml:div") // .style("font-size", "0.75rem") // .html("this is an alert that is really long and i'm hoping will wrap because if not i'll go bonkers") // setTimeout(() => { // alertsText.selectAll("text") // .call(wrap, 30, 0) // }, 0) // Interactions // d3.selectAll(".donutName") // .on('click', handleClick) // function handleClick(event) { // console.log('clicked!') // } } data.forEach(function(d) { if(d.name) { drawDonut(d) } }) return container.node() }30:T4bf,// Metrics data + shape data merged or_data_shape_merged = { const columns = ["name", "students", "eighty", "forty", "separate", "elem_ela", "middle_ela", "high_ela", "elem_math", "middle_math", "high_math", "susp_iep", "susp_iep_race", "proprtn_race", "proprtn_race_specific", "grad_rate", "dropout_rate", "higher_ed_empl"] let data = [] orUNSDShapes.features.forEach(function(row) { let id = +row.properties.UNSDLEA let districtMatch = or_data.find(function(d) { return +d.UNSDLEA === id }) let newRow = Object.assign(row, districtMatch) newRow["id"] = id data.push(newRow) }) orELSDShapes.features.forEach(function(row) { let id = +row.properties.ELSDLEA let districtMatch = or_data.find(function(d) { return +d.UNSDLEA === id }) let newRow = Object.assign(row, districtMatch) newRow["id"] = id data.push(newRow) }) orSCSDShapes.features.forEach(function(row) { let id = +row.properties.SCSDLEA let districtMatch = or_data.find(function(d) { return +d.UNSDLEA === id }) let newRow = Object.assign(row, districtMatch) newRow["id"] = id data.push(newRow) }) return data }31:T1144,// Map of all districts in the state //function stateMap(value) { stateMap = vals => { const container = d3.select( html`

` ) const tooltipDiv = container.select(".tooltip") const svg = container.append('svg') //.attr("viewBox", `0 0 ${width} ${height}`) .attr("width", 450) .attr("height", 450) // Add zoom capability let zoomScale = 1 svg.call(d3.zoom() .extent([[0, 0], [400, 400]]) .scaleExtent([1, 10]) .on("zoom", zoomed) ) function zoomed({transform}) { zoomScale = d3.zoomTransform(this).k districtsDrawn .attr("transform", transform) .attr("stroke-width", 1 / zoomScale) } const districtsDrawn = svg.selectAll(".district") .data(orDataSorted) .join("path") .attr("class", "district") .attr("d", statePathGenerator) .attr("fill", "white") .attr("stroke", colors[0]) //send update when a district is clicked .on('click', (event, d) => { vals.includes(d) ? removeFromArray(vals, d) : vals.push(d) container.property('value', vals) container.dispatch('input') }) .on('mouseenter', handleMouseover) .on('mouseleave', handleMouseleave) // adapted from https://observablehq.com/@clhenrick/tooltip-d3-convention function handleMouseover(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); // get any elements that might be underneath // modified from https://stackoverflow.com/questions/30755696/get-svg-object-s-at-given-coordinates/30756436#30756436 let elements = [] let elementsData = [] let thisElement = document.elementFromPoint(event.clientX, event.clientY) while (thisElement && thisElement.nearestViewportElement) { elements.push(thisElement) elementsData.push(d3.select(thisElement).datum().name) //disable pointer-events to be able to select the next element underneath d3.select(thisElement).attr("pointer-events", "none") //update thisElement to be the next element underneath thisElement = document.elementFromPoint(event.clientX, event.clientY) } // add pointer-events back to the elements elements.forEach(element => d3.select(element).attr("pointer-events", "all")) // show the tooltip for the clicked-on element if(elements.length > 0) { tooltipDiv.style("display", "block") } tooltipDiv .selectAll("p") .data(Object.entries(elementsData)) .join("p") .filter(([key, value]) => value !== null && value !== undefined) .html( ([key, value]) => `${typeof value === "object" ? value.toLocaleString("en-US") : value}` ) //.on("click", handleTooltipClick) } function handleMouseleave() { tooltipDiv.style("display", "none") } // padding between the tooltip and mouse cursor const MOUSE_POS_OFFSET = 2 function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } // function handleTooltipClick() { // // tooltipDiv.selectAll('p') // // .attr("fill", "orange") // let selectedData = this.innerHTML // container.property('value', selectedData).dispatch('input') // d3.select(".tooltip").style("display", "none") // } Object.defineProperty(container.node(), "value", { get() { return vals }, set(districts) { vals = districts districtsDrawn .attr("fill", d => vals.includes(d) ? colors[0] : "#FFFFFF") .attr("opacity", d => vals.includes(d) ? 0.8 : 1.0) } }) // initial value container.property('value', vals) return container.node() }32:T41f,33:T544,// Modified from https://observablehq.com/@saneef/is-observable-inputs-style-able inputStyles = html``34:T4da,//colors = [mainColor, "gold", "orange", "red"] //try orange red - #FF4500 //colors = ["#008b8bCC", "#FFD700", "#FFA500", "#FF0000"] // same as above, just in hex //colors = ["#379898CC", "#FFD700", "#FFA03F", "#EB5944"] // modified from above colors = ["#43b6a1", "#FFB527", "#f57346", "#cf4278"] // darker, pinker palette //colors = ["#018E8ECC", "#7BD395", "#FFD700", "#FF865D"] // added another shade of green //colors = ["#2b8cbe", "#7bccc4", "#bae4bc", "#f0f9e8"] // yellow to green to blue //colors = ['#1a936f', '#88d498', '#c6dabf', '#f3e9d2'] // green to beige //colors = ['#027BFB', '#15E8B5', '#B4FB15', '#FCB500'] // blue to orange //colors = ['#2579D3', '#13DAAA', '#A4E613', '#ECAA00'] // more muted version of above //colors = ['#00CED6', '#71FD6F', '#D7EE03', '#FDA001'] // teal to orange //colors = ['#009AA0', '#6BB16B', '#B9C363', '#FDA001'] // more muted version of above //colors = ["#10848F", "#5AB4BD", "#B6D63E", "#D4C44D"] //teals to orange 2 //#f7feae,#b7e6a5,#7ccba2,#46aea0,#089099,#00718b,#045275 // blue yellow from carto //colors = ["#089099","#46aea0","#b7e6a5","#f7feae"] //#009392,#72aaa1,#b1c7b3,#f1eac8,#e5b9ad,#d98994,#d0587e // teal rose from carto //colors = ["#009392","#72aaa1", "#b1c7b3", "#f1eac8"]35:T422,// Modified from https://observablehq.com/@saneef/is-observable-inputs-style-able sortButtons = (values, options) => { const studentsBtn = Inputs.button(html`# of students with IEPs`, {reduce: () => sortArray("students")}) const inclusionBtns = Inputs.button([ ["inclusive", () => sortArray("eighty")], ["semi-inclusive", () => sortArray("between")], ["non-inclusive", () => sortArray("forty")], ["separate", () => sortArray("separate")] ]) const alertsBtn = Inputs.button(html`# of ! alerts`, {reduce: () => sortArray("nAlerts")}) return view`

Sort by:

${["sortedByN", studentsBtn]}

${["sortedByA", alertsBtn]}

% of students with IEPs in a setting that is:

${["sortedByI", inclusionBtns]}

` }36:T957,// Modified from https://observablehq.com/@gallowayevan/svg-word-wrap function createSVGtext(config = {}) { let {text, x = 0, y = 0, fontSize = 14, fill = '#333', textAnchor = "left", maxCharsPerLine = 65, lineHeight = 1.3, textClass = null, textId = null, font_family = null, font_weight = null, color = null} = config; if (typeof config == "string") text = config; let svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); svgText.setAttributeNS(null, 'x', x); svgText.setAttributeNS(null, 'y', y); svgText.setAttributeNS(null, 'font-size', fontSize); svgText.setAttributeNS(null, 'fill', fill); svgText.setAttributeNS(null, 'text-anchor', textAnchor); svgText.setAttributeNS(null, 'class', textClass); svgText.setAttributeNS(null, 'id', textId); svgText.setAttributeNS(null, 'font-family', font_family); svgText.setAttributeNS(null, 'font-weight', font_weight); svgText.setAttributeNS(null, 'aria-label', text); svgText.setAttributeNS(null, 'fill', color); let words = text.trim().split(/\s+/).reverse(), word, dy = 0, lineNumber = 1, line = []; while(word = words.pop()) { line.push(word); let testLineLength = line.join(" ").length; if (testLineLength > maxCharsPerLine && line.length > 1){ line.pop(); let svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); svgTSpan.setAttributeNS(null, 'x', x ? x : null); svgTSpan.setAttributeNS(null, 'y', y ? y : null); svgTSpan.setAttributeNS(null, 'dy', dy + "em"); let tSpanTextNode = document.createTextNode(line.join(" ")); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); lineNumber++ line = [word]; dy = lineHeight; } } let svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan') svgTSpan.setAttributeNS(null, 'x', x); svgTSpan.setAttributeNS(null, 'dy', dy + "em"); let tSpanTextNode = document.createTextNode(line.join(" ")); svgTSpan.appendChild(tSpanTextNode); ////////added in for district titles let totalOffset if (lineNumber > 2) { totalOffset = -45 } else { totalOffset = -35 } svgText.setAttributeNS(null, 'y', totalOffset); //////// svgText.appendChild(svgTSpan); return svgText; }37:T7c0,// sortInclusion = { // const container = d3.select( // html`

` // ) // const legend = container.append('svg') // .attr("width", 200) // .attr("height", 80) // .style("transform", "translate(0px, 0px)") // .attr("overflow", "visible") // .attr("class", "legend") // .attr("aria-label", "legend") // let legendInclusion = [ // { type: 'inclusive', color: colors[0], description: '80% or more', metric: "eighty" }, // { type: 'semi-inclusive', color: colors[1], description: 'between 40% and 80%', metric: "between" }, // { type: 'non-inclusive', color: colors[2], description: '40% or less', metric: "forty" }, // { type: 'separate', color: colors[3], description: 'separate (hospital, etc.)', metric: "separate" } // ] // const inclusion = legend.append('g') // .attr('transform', 'translate(0, 0)') // const labelColors = inclusion.append('g') // .selectAll('rect') // .data(legendInclusion) // .join('rect') // .attr('class', 'inclusionLegend') // .attr('x', 0) // .attr('y', (d, i) => -10 + i * 24) // .attr('width', 12) // .attr('height', 12) // .attr('fill', d => d.color) // .on('click', sortByInclusion) // const labels = inclusion.append('g') // .selectAll('text') // .data(legendInclusion) // .join('text') // .attr('class', 'inclusionLegend') // .attr('text-anchor', 'start') // .attr('x', 20) // .attr('y', (d, i) => i * 24) // .attr('fill', "#555555") // .text(d => d.type) // .attr('font-size', '15px') // .on('click', sortByInclusion) // function sortByInclusion() { // let metric = d3.select(this).datum().metric // let sortedData = [...data].sort((a, b) => metric === "eighty" ? b[metric] - a[metric] : a[metric] - b[metric]) // mutable data = sortedData // } // return container.node() // }38:Taad,// // Modified from https://observablehq.com/@clhenrick/tooltip-d3-convention // tooltip = (selectionGroup, tooltipDiv) => { // // padding between the tooltip and mouse cursor // const MOUSE_POS_OFFSET = 8 // selectionGroup.each(function () { // d3.select(this) // .on("mouseover.tooltip", handleMouseover) // .on("mousemove.tooltip", handleMousemove) // .on("mouseleave.tooltip", handleMouseleave); // }); // function handleMouseover() { // // show/reveal the tooltip, set its contents, // showTooltip(); // setContents(d3.select(this).datum()); // } // function handleMousemove(event) { // // update the tooltip's position // const target = this.parentElement.parentElement.parentElement.parentElement // const [mouseX, mouseY] = d3.pointer(event, target) // //const [mouseX, mouseY] = [event.clientX, event.clientY] // // add the left & top margin values to account for the SVG g element transform // setPosition(mouseX + margin.left, mouseY + margin.top); // } // function handleMouseleave() { // // do things like hide the tooltip // hideTooltip(); // } // function showTooltip() { // tooltipDiv.style("display", "block"); // } // function hideTooltip() { // tooltipDiv.style("display", "none"); // } // function setPosition(mouseX, mouseY) { // tooltipDiv // .style( // "top", // mouseY < height / 2 // ? `${mouseY + 2 * MOUSE_POS_OFFSET}px` // : "initial" // ) // .style( // "right", // mouseX > width / 2 // ? `${width - mouseX + MOUSE_POS_OFFSET}px` // : "initial" // ) // .style( // "bottom", // mouseY > height / 2 // ? `${height - mouseY + 2 * MOUSE_POS_OFFSET}px` // : "initial" // ) // .style( // "left", // mouseX < width / 2 // ? `${mouseX + MOUSE_POS_OFFSET}px` // : "initial" // ); // } // function setContents(datum) { // let currentFill // d3.selectAll(".pieSlice").each(function(d, i) { // if(d == datum) { // let current = d3.select(this).attr("style") // currentFill = current.slice(6) // } // }) // function tooltipText() { // return `${formatDec(datum.data.value)}% of students are in ${datum.data.type === "inclusive" ? "an" : "a"}
${datum.data.type} setting` // } // tooltipDiv.html(tooltipText) // } // }39:T598,// sortAlerts = { // const container = d3.select( // html`

` // ) // const legend = container.append('svg') // .attr("width", 200) // .attr("height", 20) // .style("transform", "translate(0px, 0px)") // .attr("overflow", "visible") // .attr("class", "legend") // .attr("aria-label", "legend") // const alertLegend = legend.append("text") // .attr('transform', 'translate(2, 0)') // //.attr('fill', 'crimson') // .attr('fill', alertColor) // .attr('font-size', '20px') // .style("text-anchor", "start") // .attr('font-weight', 'bold') // .text('!') // .attr('id', "alertsLegend") // .on("click", sortByAlerts) // const alertsLabel = legend.node().appendChild( // createSVGtext({ // text: "# of alerts", // x: 14, // y: 0, // fontSize: 15, // color: '#555555', // textAnchor: "start", // maxCharsPerLine: 38, // lineHeight: 1.3, // //font_weight: "bold", // textId: "alertsLegend", // font_family: "Inter" // }) // ) // d3.select(alertsLabel) // .attr('transform', 'translate(7, 32)') // .on("click", sortByAlerts) // function sortByAlerts() { // let sortedData = [...data].sort((a, b) => b.nAlerts - a.nAlerts) // mutable data = sortedData // } // return container.node() // }3a:T5d9,// sortNumber = { // const container = d3.select( // html`

` // ) // const legend = container.append('svg') // .attr("width", 200) // .attr("height", 5) // .style("transform", "translate(0px, 0px)") // .attr("overflow", "visible") // .attr("class", "legend") // .attr("aria-label", "legend") // const numberLabel = legend.node().appendChild( // createSVGtext({ // text: "# students", // x: 0, // y: 0, // fontSize: 18, // color: '#555555', // textAnchor: "start", // textId: "numberSort", // maxCharsPerLine: 24, // lineHeight: 1, // font_weight: "bold", // font_family: "Inter" // }) // ) // d3.select(numberLabel) // .attr('transform', 'translate(0, 40)') // .on("click", sortByNumber) // function sortByNumber() { // let sortedData = [...data].sort((a, b) => a.students && b.students !== null ? b.students - a.students : null) // mutable data = sortedData // } // const numberLabel2 = legend.node().appendChild( // createSVGtext({ // text: "with IEPs", // x: 98, // y: 0, // fontSize: 14, // color: '#555555', // textAnchor: "start", // maxCharsPerLine: 24, // lineHeight: 1, // font_family: "Inter" // }) // ) // d3.select(numberLabel2).attr('transform', 'translate(0, 40)') // return container.node() // }3b:T1667,// legendChart = { // let legendWidth = 400 // let legendHeight = 350 // let legendHeightCenter = legendHeight * 0.65 // const legend = d3.create('svg') // .attr("width", legendWidth) // .attr("height", legendHeight) // .attr("aria-label", "legend") // const legendBounds = legend.append('g') // .attr('text-anchor', 'middle') // .attr('width', legendWidth) // .attr('height', legendHeight) // //.style("transform", `translate(${donutMargin.left}px, ${donutMargin.top}px`) // let legendData = [ // { type: 'inclusive', value: 75 }, // { type: 'semi-inclusive', value: 12 }, // { type: 'non-inclusive', value: 8 }, // { type: 'separate', value: 5 } // ] // let legendArcs = pie(legendData) // let legendScale = d3.scaleOrdinal(legendArcs.map(d => d), colors) // const legendArc = d3.arc() // .innerRadius(0.7 * 180 / 2) // .outerRadius(180 / 2) // // Legend donut // const legendDonut = legendBounds.append('g') // //.attr('class', 'donut-container') // .attr('transform', `translate(${legendWidth / 2}, ${legendHeightCenter})`) // .selectAll('path') // .data(legendArcs) // .join('path') // .style('fill', d => legendScale(d.data.type)) // .attr('d', legendArc) // //.attr('class', 'pieSlice') // // Label with district's name // const districtName = legendBounds.node().appendChild( // createSVGtext({ // text: "School District Name", // x: `${legendWidth / 2}`, // y: 20, // fontSize: 22, // fill: '#555555', // textAnchor: "middle", // maxCharsPerLine: 16, // lineHeight: 1.2, // textClass: "donutName", // font_weight: "bold", // font_family: "Inter", // align_to_bottom: "true" // }) // ) // // Label with student count // const numberStudents = legendBounds.append("g") // .attr("transform", `translate(${legendWidth / 2}, ${legendHeightCenter - 15})`) // .append('text') // .style("font-size", "21px") // .style("text-anchor", "middle") // .attr('font-weight', 'bold') // .attr('font-family', 'Inter') // .attr('fill', '#555555') // .text('# students') // const studentsLabel = legendBounds.append("g") // .attr("transform", `translate(${legendWidth / 2}, ${legendHeightCenter + 5})`) // .append('text') // .style("font-size", "15px") // .style("text-anchor", "middle") // .attr('font-family', 'Inter') // .attr('font-weight', 'bold') // .attr('fill', '#555555') // .text("with IEPs") // // Alerts // const alert = legendBounds.append("g") // .attr("class", 'alert') // .attr('transform', `translate(${legendWidth / 2}, ${legendHeightCenter + 40})`) // .append('text') // .attr('fill', 'red') // .attr('font-size', '25px') // .style("text-anchor", "middle") // .attr('font-weight', 'bold') // .attr('font-family', 'Inter') // .text('! ! ! !') // // Labels // const inclusiveLabel = legendBounds.node().appendChild( // createSVGtext({ // text: "% in inclusive setting", // x: `${legendWidth / 2 + 120}`, // y: `${legendHeightCenter - 75}`, // fontSize: 15, // fill: mainColor, // textAnchor: "middle", // textClass: "legendLabel", // maxCharsPerLine: 16, // lineHeight: 1, // font_weight: "bold", // font_family: "Inter" // }) // ) // const semiInclusiveLabel = legendBounds.node().appendChild( // createSVGtext({ // text: "% in semi-inclusive setting", // x: `${legendWidth / 2 - 150}`, // y: `${legendHeightCenter - 30}`, // fontSize: 15, // fill: "gold", // textAnchor: "middle", // textClass: "legendLabel", // maxCharsPerLine: 16, // lineHeight: 1, // font_weight: "bold", // font_family: "Inter" // }) // ) // const nonInclusiveLabel = legendBounds.node().appendChild( // createSVGtext({ // text: "% in non-inclusive setting", // x: `${legendWidth / 2 - 120}`, // y: `${legendHeightCenter - 90}`, // fontSize: 15, // fill: "orange", // textAnchor: "middle", // textClass: "legendLabel", // maxCharsPerLine: 20, // lineHeight: 1, // font_weight: "bold", // font_family: "Inter" // }) // ) // const separateLabel = legendBounds.node().appendChild( // createSVGtext({ // text: "% of students in a separate setting", // x: `${legendWidth / 2}`, // y: `${legendHeightCenter - 125}`, // fontSize: 15, // fill: "red", // textAnchor: "middle", // textClass: "legendLabel", // maxCharsPerLine: 20, // lineHeight: 1, // font_weight: "bold", // font_family: "Inter" // }) // ) // const alertsLabel = legendBounds.node().appendChild( // createSVGtext({ // text: "alerts for excessive discipline or disproportionate racial representation in Special Education", // x: `${legendWidth / 2 + 250}`, // y: `${legendHeightCenter + 50}`, // fontSize: 15, // fill: "red", // textAnchor: "middle", // textClass: "legendLabel", // maxCharsPerLine: 36, // lineHeight: 1, // font_weight: "bold", // font_family: "Inter" // }) // ) // const alertLine = legendBounds.append("line") // .attr('x1', `${legendWidth / 2 + 35}`) // .attr('x2', `${legendWidth / 2 + 125}`) // .attr('y1', `${legendHeightCenter + 30}`) // .attr('y2', `${legendHeightCenter + 45}`) // .attr('stroke', 'red') // .attr('stroke-width', '2px') // .attr('class', "legendLabel") // return legend.node() // }3c:[{"id":"e61f60d4d7063a8dfb2930fca19c3853b4cfc8b1b9f1485ded9cb8745082daf44a37239f04c38117d565c267ad30581682124e476f140c05c6c3404b3b1acdf1","href":"https://static.observableusercontent.com/files/e61f60d4d7063a8dfb2930fca19c3853b4cfc8b1b9f1485ded9cb8745082daf44a37239f04c38117d565c267ad30581682124e476f140c05c6c3404b3b1acdf1","name":"merged3.csv","type":"text/csv","lastModified":1637262516226.318,"size":38858},{"id":"dd2af71f1247a81715850ed4f036e4be74be8fd8fd17b48a3dc6ad5ce47dd39b6285f73b247615a3861b54e7a277a5e1539fb61511c55a6715f50202a9ea3ccd","href":"https://static.observableusercontent.com/files/dd2af71f1247a81715850ed4f036e4be74be8fd8fd17b48a3dc6ad5ce47dd39b6285f73b247615a3861b54e7a277a5e1539fb61511c55a6715f50202a9ea3ccd","name":"or_elsd_shapes.json","type":"application/json","lastModified":1637262516226.318,"size":234681},{"id":"d5a2d21afcbc8821fafdd206ba5c570725264054680f6c289e66d0f7365400c13d812d6008e99b9db7768fde4c3a0b4743fc27998e3da52d0711379471432b16","href":"https://static.observableusercontent.com/files/d5a2d21afcbc8821fafdd206ba5c570725264054680f6c289e66d0f7365400c13d812d6008e99b9db7768fde4c3a0b4743fc27998e3da52d0711379471432b16","name":"or_scsd_shapes.json","type":"application/json","lastModified":1637262516226.318,"size":98632},{"id":"80219fd3d25db926debd3d9f54819f47f1dd08f16c7f2741245fe9643be562f4f9d271a3fae424308b9079dfbd9d294b68b3f9780455221cf7fd2ba6145314d0","href":"https://static.observableusercontent.com/files/80219fd3d25db926debd3d9f54819f47f1dd08f16c7f2741245fe9643be562f4f9d271a3fae424308b9079dfbd9d294b68b3f9780455221cf7fd2ba6145314d0","name":"or_unsd_shapes.json","type":"application/json","lastModified":1637262516226.318,"size":8205022}] 2d:{"id":"cb705bf323932c69","slug":"sped","title":"Exploring Oregon's Special Education Data","thumbnail":"3092d0053d2cb601649f763e7bff1e05d9cfe570517f43426082d282f96627fc","access_level":"public","create_time":"$D2021-11-18T19:08:36.226Z","update_time":"$D2022-05-23T21:44:02.865Z","view_time":null,"first_public_time":"$D2022-02-14T20:32:21.999Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/e8378cd926f2998bd803d1651f90f4c1442c923062ce42676a4fc5460cf815fc","tier":"starter_2024"},"version":4084,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null}],"members":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"13a8e79c8958c921","slug":"complete-projects","title":"Projects","owner":{"id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson"}},"type":"notebook","body":{"title":"Exploring Oregon's Special Education Data","cells":[{"id":0,"value":"# Exploring Oregon's Special Education Data\nAn in-progress prototype to help advocates access data about special education programs. The data comes from annual reports made by each school district and state, and includes information about inclusion, any excessive discipline, and any disproportionate racial representation of students in special education. Currently showing data from the 2018-9 school year, due to disruptions from Covid-19. Source: https://www.ode.state.or.us/data/reportcard/media.aspx","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3072,"value":"select a school district or local education agency","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2243,"value":"selectCell = Inputs.bind(\n Inputs.select(\n orDataSorted, \n {\n value: d => d.name === 'Astoria SD 1',\n multiple: true,\n format: d => d.name,\n }\n ),\n viewof selectedDistricts\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2927,"value":"or add/remove districts by clicking on the zoom-enabled map","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof selectedDistricts = stateMap([])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2412,"value":"buttons = Inputs.button([\n [\"Select All\", () => set(viewof selectedDistricts, orDataSorted)],\n [\"Clear All\", () => set(viewof selectedDistricts, [])]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3602,"value":"IEP: Individualized Education Plan, formed by a team of a student's teachers, therapists, guardians/parents, and school representatives to evaluate what services a child will need to succeed in the least restrictive environment
Inclusive: in a regular classroom for more than 80% of the day
Semi-inclusive: in a regular classroom for 40% to 80% of the day
Non-inclusive: in a regular classroom for less than 40% of the day
Separate: in a non-school setting, such as a hospital or detention center","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3502,"value":"viewof sortInputs = sortButtons()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"\n\n---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2738,"value":"mutable data = [...selectedDistricts]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"// Data with merged LEA codes and metrics values\n\n//or_data = FileAttachment(\"merged3.csv\").csv()\n\nor_data = d3.csvParse(\n await FileAttachment(\"merged3.csv\").text(),\n (d, i) => (d3.autoType(d))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"// UNSD shape files\n\norUNSDShapes = FileAttachment(\"or_unsd_shapes.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"// ELSD shape files\n\norELSDShapes = FileAttachment(\"or_elsd_shapes.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"// SCSD shape files\n\norSCSDShapes = FileAttachment(\"or_scsd_shapes.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2070,"value":"orDataSorted = {\n let data = [...or_data_shape_merged].sort((a, b) => a.name && b.name !== null ? a.name.localeCompare(b.name) : null)\n\n data.forEach(function(row) {\n // if (row.eighty && row.forty && row.separate) {\n if (row.students !== 0) {\n let between = 100 - row.eighty - row.forty - row.separate\n row[\"between\"] = between\n } else {\n row[\"between\"] = null\n }\n\n row[\"selected\"] = false\n\n // if (row.UNSDLEA) {\n // row[\"id\"] = row.UNSDLEA\n // } else if (row.ELSDLEA) {\n // row[\"id\"] = row.UNSDLEA\n // } else if (row.SCSDLEA) {\n // row[\"id\"] = row.UNSDLEA\n // } else {\n // row[\"id\"] = null\n // }\n \n // } else {\n // row[\"between\"] = null\n // }\n \n let nAlerts = 0\n\n row.susp_iep === \"Yes\" ? nAlerts++ : null\n row.susp_iep_race === \"Yes\" ? nAlerts++ : null\n row.proprtn_race === \"Yes\" ? nAlerts++ : null\n row.proprtn_race_specific === \"Yes\" ? nAlerts++ : null\n\n row[\"nAlerts\"] = nAlerts\n })\n\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4016,"value":"top6 = [...orDataSorted].sort((a, b) => b.students - a.students).filter((d, i) => i < 6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3999,"value":"import { serialize } from \"@palewire/saving-csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4002,"value":"DOM.download(serialize(orDataSorted), null, \"Download sorted Oregon data as CSV\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"\n\n---\n## Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"// Something for the map projection\n\nsphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"// The map projection\n\nprojectionState = d3.geoTransverseMercator()\n .fitWidth(100, sphere)\n .rotate([120 + 55 / 60, 0])\n .fitSize([450, 450], orUNSDShapes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"// The map shape generator\n\nstatePathGenerator = d3.geoPath(projectionState)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3525,"value":"\n\n---\n## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3519,"value":"// Modified from https://observablehq.com/@saneef/is-observable-inputs-style-able\n\nns = Inputs.text().classList[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3517,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3495,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1431,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3350,"value":"alertColor = '#EB5944'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"\n\n---\n## Donut","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1427,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"arc = d3.arc()\n .innerRadius(0.7 * heightDonut / 2)\n .outerRadius(heightDonut / 2)\n .cornerRadius(1)\n .padAngle(0.01)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"widthDonut = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"heightDonut = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"donutMargin = ({\n top: 65,\n bottom: 15,\n left: 40,\n right: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"\n\n---\n## Helper Functions & Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3693,"value":"function wrap(text, width, lineHeight) {\n if (typeof lineHeight === 'undefined') lineHeight = 1;\n text.each(function() {\n let text = d3.select(this),\n //sentence = _.startCase(text),\n words = text\n .text()\n .split(/\\s/)\n .reverse(),\n word,\n line = [],\n lineNumber = 0,\n x = text.attr(\"x\"),\n y = text.attr(\"y\"),\n dy = 0.8,\n tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\")\n .text(word);\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3531,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3536,"value":"function sortArray(metric) {\n mutable data = [...data].sort((a, b) => b[metric] - a[metric])\n this.dispatchEvent(new Event(\"form\", { bubbles: true }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3533,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"format = d3.format(\".0f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"formatDec = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3871,"value":"formatPct = d3.format(\".0%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2422,"value":"import { set } from '@observablehq/synchronized-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2407,"value":"function removeFromArray(array, deleteElement) {\n let index = array.indexOf(deleteElement)\n if (index >= 0) {\n array.splice(index, 1)\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2892,"value":"\n\n---\n## The Pit\nStuff I removed, might need to reference later","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3083,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":974,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3211,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3196,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2821,"value":"// viewof similar = Inputs.select(\n// orDataSorted,\n// {\n// format: d => d.name,\n// label: \"Add districts similar in size to: \",\n// value: orDataSorted[orDataSorted.length - 1]\n// }\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2829,"value":"// addSimilar = {\n// //let sortedByNumber = await or_data_shape_merged.sort((a, b) => b.students - a.students)\n// let index = orDataSortedByNumber.indexOf(similar)\n// let length = orDataSortedByNumber.length\n// let range\n\n// if (index > length - 6) {\n// range = [length - 11, length - 1]\n// } else if (index > 5) {\n// range = [index - 5, index + 5]\n// } else {\n// range = [0, 10]\n// }\n\n// let similarDistricts = orDataSortedByNumber.filter((d, i) => (i >= range[0] && i <= range[1]))\n\n// similarDistricts.forEach(district => mutable data.push(district))\n// //similarDistricts.forEach(district => data.indexOf(district) === -1 ? mutable data.push(district) : null)\n\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2856,"value":"//orDataSortedByNumber = or_data_shape_merged.sort((a, b) => b.students - a.students)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2908,"value":"//mutable data = await Promises.delay(0, selectedDistricts)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1437,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"// A holder for the selected district's data\n\n//mutable districtData = []\n//districtData = or_data_shape_merged.filter(d => d.name === selectedDistrict)\n//districtData = or_data_shape_merged.sort((a, b) => a.name && b.name !== null ? a.name.localeCompare(b.name) : 0).slice(20, 30)\n// districtData = or_data_shape_merged.sort((a, b) => b.students - a.students).filter(d => {\n// return d.students > numberRange[0] && d.students < numberRange[1]\n// })\n// districtData = or_data_shape_merged.sort((a, b) => a.name && b.name !== null ? a.name.localeCompare(b.name) : 0).filter(d => {\n// return d.students > numberRange[0] && d.students < numberRange[1]\n// })\n//districtData = or_data_shape_merged.filter(d => d.name === \"Winston-Dillard SD 116\" || d.name === \"Corvallis SD 509J\" || d.name === \"Crow-Applegate-Lorane SD 66\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1179,"value":"// viewof numberRange = rangeSlider({\n// min: 0,\n// max: 7010,\n// value: this ? this.value : [1000, 7010],\n// color: mainColor,\n// title: 'filter by number of students with IEPs',\n// precision: 0\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3998,"value":"//FileAttachment(\"merged3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 2e:"$2d:body"