29:null 2a:["$","title",null,{"children":"Chronic Absenteeism in NYC Public Schools | Mehr Kaur | Observable"}] 2f:T41b,{ const images = [dots1, dots2, dots3, dots4, dots5]; const staticImage = dots_static; const slideshowDuration = 3500; // 3.5 seconds const container = html`

`; function startSlideshow() { const button = document.querySelector("button"); button.disabled = true; const img = container.querySelector("img"); img.style.maxWidth = "100%"; img.style.height = "auto"; let i = 0; img.src = images[i++]; const interval = setInterval(() => { if (i < images.length) { img.src = images[i++]; img.style.maxWidth = "100%"; img.style.height = "auto"; } else { clearInterval(interval); button.disabled = false; img.src = staticImage; img.style.maxWidth = "100%"; img.style.height = "auto"; } }, slideshowDuration); } document.querySelector("button").addEventListener("click", startSlideshow); return container; } 30:T9c7,{ var nbr_circles = 2606; var radius = 7; var new_fall_delay = 50; var circles_per_fall = 1; var height = 600; var width = 1200; //var duration = 10000000; var data = []; for (let i = 0; i < nbr_circles; ++i) { data.push({ x: Math.random()*width, y: height/10 }); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) function draw_circles() { console.log(data); svg .selectAll("circle") .data(data) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .style('fill', "white") .style("stroke", "#00A8B5") .attr("r", radius) } // const sim = d3.forceSimulation(data) // .velocityDecay(0.2) // .force("x", d3.forceX().strength(0.002)) // .force("y", d3.forceY(0.9*height)) // .force("collide", d3.forceCollide().radius(d => d.r + 0.5).iterations(2)) // .force("limits", forceLimit.forceLimit().radius(radius).y1(0.9*height).x0(0).x1(width)); // //.on("tick", ticked); // // const simulation = d3.forceSimulation(nodes) // // .velocityDecay(0.2) // // .force("x", d3.forceX().strength(0.002)) // // .force("y", d3.forceY().strength(0.002)) // // .force("collide", d3.forceCollide().radius(d => d.r + 0.5).iterations(2)) // // .on("tick", ticked); //.force("collide", d3.forceCollide(radius)) // .force("y", d3.forceY(0.9*height)) var sim = d3.forceSimulation(data) .force("y", d3.forceY(0.9*height)) .force("collide", d3.forceCollide(radius+2)) .force("limits", forceLimit.forceLimit().radius(radius + 3).y1(0.9*height).x0(0).x1(width)) sim.on('tick', function() { svg .selectAll("circle") .attr('cx', d => d.x) .attr('cy', d => d.y); }); const circlecount = 0; function add_circles(elapsed_time) { if(circlecount <= nbr_circles){ circlecount = circlecount + 1; //if (elapsed_time < duration) { for (let i = 0; i <= circles_per_fall; ++i) { data.push({ x: Math.random()*width, y: height*0.1, vx: 0, vy: 0, }); //} draw_circles(); sim.nodes(data).alpha(1).restart(); } } } draw_circles(); d3.interval(add_circles, new_fall_delay); return svg.node() } //this code adapted from https://observablehq.com/@d3/collision-detection and https://observablehq.com/@rdevooght/gravity-falling-circles31:T5b7,( async () => { const container = document.createElement("div"); container.style.display = "flex"; const createChart = async (data, title, showLegend, showYAxisLabel) => { const chart = vl .markBar({ size: 30 }) .data(data) .width(100) .height(300) .encode( vl.x().fieldN("year").title("Year").axis({labelAngle: 0}), vl.y().fieldQ("value").title(showYAxisLabel ? "Proficiency Rate" : "").axis({titleColor: showYAxisLabel ? "black" : "white"}), vl.color().fieldN("group").legend(showLegend ? {title: "Race/Ethnicity"} : null).scale({ domain: ["Asian", "Black", "Hispanic", "White"], range: ["#e62a76", "#fbb901", "#774898", "#299e23"], //CHANGE COLOR HERE!!! }), vl.column().fieldN("group").title(title) ); return await chart.render(); }; const data1 = [ { group: "Asian", year: "2019", value: 74.4 }, { group: "Asian", year: "2022", value: 68.3 }, { group: "Black", year: "2019", value: 28.3 }, { group: "Black", year: "2022", value: 20.6 }, { group: "Hispanic", year: "2019", value: 33.2 }, { group: "Hispanic", year: "2022", value: 23.3 }, { group: "White", year: "2019", value: 66.6 }, { group: "White", year: "2022", value: 58.5 }, ]; const chart1 = await createChart(data1, "Grades 3-8 Math Proficiency Rates by Race/Ethnicity", false, true); container.appendChild(chart1); return container; })() 32:T1f7d,**Introduction** Amidst the ongoing discourse on the psychosocial and economic impacts of the COVID-19 pandemic, we are neglecting an important subgroup that has been deeply affected by the pandemic. Specifically, the pandemic has profoundly impacted students in many ways, the most important being attendance. With the closure of schools and the inception of online learning, student attendance drastically decreased during the pandemic. In this project, we seek to look at how COVID-19 has impacted student attendance and which school districts and demographics were disproportionately affected. Understanding how the pandemic has changed the landscape of NYC’s public school system is essential to aiding policymakers in developing targeted strategies for students and schools to recover from COVID-19. **Related Work** There are many articles on the spike in chronic absenteeism after the pandemic, and some also discuss the correlation between schools with larger Black and Hispanic student populations and schools with higher absenteeism rates. Most of the articles we found relied on two datasets. A few great examples of prior work: Chalkbeat, NY Daily News, NYU (to see links, click on the Google Doc link above). In our project, we aim to dive deeper by combining absenteeism datasets with demographic and urban planning datasets to understand the disproportionate impact across the city. **Methodology** (To see links to the datasets, click on the Google Doc link above) Datasets: 1. Attendance and Chronic Absenteeism by School District (2016-17 to 2020-21) 2. Demographic data by district (2013-18, 2018-19, 2019-20, 2020-21) 3. Walkability Index 4. Test Scores We were hoping to use data on the percent of public assistance and percent of non-US citizen/permanent resident aliens, but this data was too sparse and had unclear data collection methods. We also hoped to understand how neighborhoods with fewer medical and health resources were impacted by the pandemic and how this variable is related to chronic absenteeism; however, we did not think the data we found was generalizable enough to use as a metric for a neighborhood's health infrastructure. **Analysis** Since we began our process with more than twenty variables, exploratory visualizations were essential in helping us discover the key insights we would communicate. By generating exploratory visualizations, we were able to narrow our raw data to the following: percent of chronically absent students, race, percent of students living with disabilities, percent of students who are English language learners, percentage of students living in poverty, civil infrastructure score, and standardized test scores. Using statistical tools in Python (like pandas, numpy, and scipy), we determined that these variables had the strongest relationships with percent absenteeism. We also created two new metrics from the raw data, percent change in chronic absenteeism (which revealed the disproportionate impact across the city) and civic infrastructure score. To derive the civic infrastructure score, we used the Walkability Index for each NYC neighborhood and used spatial join to map the neighborhoods to school districts. Then, we took the weighted average of the Walkability index based on the area of intersection between the neighborhood and the school district. Finally, we took the inverse of this index, since lower walkability corresponds to poorer infrastructure. **Design** Our primary design objective was to guide the reader through a cohesive narrative that leads from one idea or question to the next. We tried to avoid the standard "paragraph, chart, paragraph, chart" format traditionally seen in news articles and scientific reports and placed special emphasis on making the graphics approachable, interactive, and informative beyond what was explicitly said in the text. Instead, we tried to communicate the main points with the graphs and use the text to add context to the graphic and point the reader in the right direction. Implementing interactivity and a variety of visualizations helped us do this. We chose our color palette using the principles discussed in lecture, including perceptually uniform colors and triadic combinations on the color wheel. We also kept the colors consistent for each variable throughout the piece to make it easier to read. **Implementation** This project was primarily implemented in D3. We used a variety of mediums, such as animations, interactive choropleths, scatterplots, and bar charts. We also used Illustrator to create the images for the animations, and we adapted other open-source Observable notebooks (linked in the references) to our purpose. **Discussion** We feel that our interactive design is mostly successful. Our goal for the visualization was for our Observable Notebook to mimic a story or a narrative about chronic absenteeism in NYC, revealing more and more information as the user scrolls down. Through our animations and use of tooltips and toggle buttons, we feel that we have created a visualization that keeps the user engaged throughout their experience. In the process of creating our final visualization, most of the criticism concerned the number of variables that we were trying to convey. As a result, in our final visualization, we focused on four main variables: chronic absenteeism, community infrastructure, demographics, and test scores. We feel that our final visual encoding is mostly successful, with some room for improvement. Specifically, we feel that the choropleth visualization showing chronic absenteeism and infrastructure is confusing to interpret. While coming up with this visualization, we struggled with the ways in which we could encode multiple variables on a choropleth map. We attempted to do so by using two diverging colors to represent two different variables. Our legend and text help to explain the color representation, but we feel that it may either be confusing or not as insightful to the users as intended. To compensate for this, we added a button to toggle between showing just chronic absenteeism to showing both chronic absenteeism and infrastructure. **Future Work** For future work, we would like to use a different indicator for civic infrastructure, because our current measure doesn’t include factors that may impact access and walkability, like maintenance, ADA access, neighborhood safety, and street trees. Furthermore, we would like to back our claims with more rigorous statistical analyses, such as by testing to see if the observed relationships between chronic absenteeism and other variables are statistically significant. For instance, we would also like to test if there is a statistically significant difference in means between demographic groups. Lastly, one primary limitation of our project was the fact that we are missing test score data during the COVID-19 years, during which school districts experienced the greatest increases in chronic absenteeism. An extension of this project would involve applying statistical or machine learning models to be able to infer the relationship between student outcomes and chronic absenteeism during COVID-19 years. **References** Bivariate choropleth: https://observablehq.com/@benjaminadk/bivariate-choropleth-color-generator https://observablehq.com/@d3/bivariate-choropleth Expanding bubbles: https://observablehq.com/@d3/collision-detection https://observablehq.com/@rdevooght/gravity-falling-circles Readings: https://www.osc.state.ny.us/state-agencies/audits/2020/05/06/oversight-chronic-absenteeism-follow https://www.schools.nyc.gov/learning/special-education/school-settings/district-75/ https://steinhardt.nyu.edu/research-alliance/research/spotlight-nyc-schools/how-has-attendance-nyc-schools-changed-over-time https://www.nydailynews.com/new-york/education/ny-record-number-children-absent-public-schools-20230220-32qro2fb3bfl7nggqmawntylnq-story.html https://ny.chalkbeat.org/2022/9/16/23357144/chronic-absenteeism-pandemic-nyc-school33:T6ea,function pack(circles) { const n = circles.length; if (!n) return circles; let a, b, c; // Place the first circle. a = circles[0], a.x = 0, a.y = 0; if (!(n > 1)) return circles; // Place the second circle. b = circles[1], a.x = -b.r, b.x = a.r, b.y = 0; if (!(n > 2)) return circles; // Place the third circle. place(b, a, c = circles[2]); // Initialize the front-chain using the first three circles a, b and c. a = new Node(a), b = new Node(b), c = new Node(c); a.next = c.previous = b; b.next = a.previous = c; c.next = b.previous = a; // Attempt to place each remaining circle… pack: for (let i = 3; i < n; ++i) { place(a._, b._, c = circles[i]), c = new Node(c); // Find the closest intersecting circle on the front-chain, if any. // “Closeness” is determined by linear distance along the front-chain. // “Ahead” or “behind” is likewise determined by linear distance. let j = b.next, k = a.previous, sj = b._.r, sk = a._.r; do { if (sj <= sk) { if (intersects(j._, c._)) { b = j, a.next = b, b.previous = a, --i; continue pack; } sj += j._.r, j = j.next; } else { if (intersects(k._, c._)) { a = k, a.next = b, b.previous = a, --i; continue pack; } sk += k._.r, k = k.previous; } } while (j !== k.next); // Success! Insert the new circle c between a and b. c.previous = a, c.next = b, a.next = b.previous = b = c; // Compute the new closest circle pair to the centroid. let aa = scoreRectangle(a), ca; while ((c = c.next) !== b) { if ((ca = scoreRectangle(c)) < aa) { a = c, aa = ca; } } b = a.next; } return circles; }34:T58e,function createSlider([nycGeoJSON, absenteeismData, walkabilityData]) { const container = d3.create("div"); let isBivariate = false; const sliderContainer = container.append("div").style("display", "flex").style("align-items", "center"); const slider = sliderContainer.append("input") .attr("type", "range") .attr("min", 2017) .attr("max", 2021) .attr("step", 1) .attr("value", 2017) .style("width", "200px") .on("change", function() { container.select("svg").remove(); // Remove the existing map createMap(+this.value, [nycGeoJSON, absenteeismData, walkabilityData], container, isBivariate); // Create a new map based on the selected year }); const button = container.append("button") .text("Add Infrastructure Measure") .on("click", function () { isBivariate = !isBivariate; container.select("svg").remove(); createMap(+slider.property("value"), [nycGeoJSON, absenteeismData, walkabilityData], container, isBivariate); }); const yearLabel = sliderContainer.append("span") .style("margin-left", "10px") .text("2017"); // Update the yearLabel text when the slider is moved slider.on("input", function() { yearLabel.text(this.value); }); createMap(2017, [nycGeoJSON, absenteeismData, walkabilityData], container); // Create the initial map based on the slider's initial value return container.node(); }35:T1445,//this is jamies original code with the colors changed //changes to be made: //map with only absenteeism should be these colors: #d3d3d3, #75babe, #0099a5 (blues to be consistent w other graphic) //maybe add arrows along axes, might not have to change orientation and stuff if the arrows are there to explain function createLegend(container, isBivariate) { const legendContainer = container.append("div") .style("padding", "10px") .style("background-color", "white") .style("display", "inline-block") .style("position", "absolute") .style("right", "10px") .style("bottom", "10px"); //const bivariateColors = ["#d3d3d3", "#d28ba8", "#d1266b", "#75babe", "#757a98", "#742261", "#0099a5", "#006583", "#001c54"]; const bivariateColors = ["#d3d3d3", "#75babe", "#0099a5", "#d28ba8","#757a98", "#006583", "#d1266b","#742261", "#001c54"]; const squareSize = 30; const padding = 10; if (isBivariate) { // Create a container for the color matrix const colorMatrix = legendContainer.append("div") .style("display", "inline-block") .style("vertical-align", "top"); // Generate the legend for the bivariate color scale for (let i = 2; i >= 0; i--) { for (let j = 0; j < 3; j++) { const color = bivariateColors[i * 3 + j]; colorMatrix.append("div") .style("width", `${squareSize}px`) .style("height", `${squareSize}px`) .style("background-color", color) .style("display", "inline-block"); } colorMatrix.append("br"); } /*const walkabilityLabel = legendContainer.append("svg") .attr("width", 30) .attr("height", 110); walkabilityLabel.append("text") .attr("transform", "rotate(-90)") .attr("x", -100) .attr("y", 24) .style("font-size", "18px") // Set the font size for % Absent label .text("Walkability"); */ legendContainer.append("p") .style("margin", "0") .style("padding-left", "50px") // Add padding-left to move the label to the right .style("font-size", "15px") // Set the font size for % Absent label .text("% Absent"); /* // Add arrow to the left edge const leftArrow = walkabilityLabel.append("g") .attr("transform", `translate(5, 5)`); leftArrow.append("line") .attr("x1", -1) .attr("y1", 0) .attr("x2", -1) .attr("y2", 100) .attr("stroke", "black"); leftArrow.append("path") .attr("d", "M-1,0 L-6,10 L4,10 Z") .attr("fill", "black");*/ // Add a new container for walkabilityLabel const walkabilityContainer = legendContainer.insert("svg", ":first-child") .attr("width", 50) .attr("height", 110); // Move the "Walkability" label to the left of the colorMatrix const walkabilityLabel = walkabilityContainer.append("text") .attr("transform", "rotate(-90)") .attr("x", -105) .attr("y", 35) .style("font-size", "15px") .text("-Infrastructure"); // Add arrow to the left edge const leftArrow = walkabilityContainer.append("g") .attr("transform", `translate(45, 5)`); leftArrow.append("line") .attr("x1", 4) .attr("y1", 0) .attr("x2", 4) .attr("y2", 100) .attr("stroke", "black"); leftArrow.append("path") .attr("d", "M4,0 L-1,10 L6,10 Z") .attr("fill", "black"); // Add arrow to the bottom edge const bottomArrow = legendContainer.append("svg") .attr("width", 200) .attr("height", 30) .style("position", "absolute") .style("bottom", "25px") .style("left", "0px"); bottomArrow.append("line") .attr("x1", 60) .attr("y1", 10) .attr("x2", 150) .attr("y2", 10) .attr("stroke", "black"); bottomArrow.append("path") .attr("d", "M150,10 L140,5 L140,15 Z") .attr("fill", "black"); } else { // Create a container for the color matrix const colorMatrix = legendContainer.append("div") .style("display", "inline-block") .style("vertical-align", "top"); // Generate the legend for the bivariate color scale for (let i = 0; i < 3; i++) { const color = bivariateColors[i]; colorMatrix.append("div") .style("width", `${squareSize}px`) .style("height", `${squareSize}px`) .style("background-color", color) .style("display", "inline-block"); } colorMatrix.append("br"); // Add label for percent absent legendContainer.append("p") .style("margin", "0") .style("font-size", "15px") // Set the font size for % Absent label .text("% Absent"); // Add arrow to the bottom edge const bottomArrow = legendContainer.append("svg") .attr("width", 100) .attr("height", 30) .style("position", "absolute") .style("bottom", "25px") .style("left", "0px"); bottomArrow.append("line") .attr("x1", 10) .attr("y1", 15) .attr("x2", 100) .attr("y2", 15) .attr("stroke", "black"); bottomArrow.append("path") .attr("d", "M100,15 L90,10 L90,20 Z") .attr("fill", "black"); } return legendContainer; } 36:Tbcd,function createMap(year, [nycGeoJSON, absenteeismData, walkabilityData], container, isBivariate = false) { const filteredData = absenteeismData.filter(d => +d.year === (year % 100)); const absenteeismByDistrict = new Map(filteredData.map(d => [parseInt(d.district), +d.perc_chron_absent])); const walkabilityByDistrict = new Map( walkabilityData.features.map(d => [parseInt(d.properties.school_dist), +d.properties['0']]) ); // Create the SVG element const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Define the map projection and path const projection = d3.geoMercator() .center([-73.94, 40.70]) .scale(45000) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Create tooltip div const tooltip = container.append("div") .attr("class", "tooltip") .style("opacity", 0); let showWalkability = false; d3.select("#add-walkability").on("click", () => { showWalkability = !showWalkability; }); // Create a quantile scale for perc_chron_absent const colorScale = d3.scaleQuantile() .domain(absenteeismData.map(d => +d.perc_chron_absent)) .range(["#d3d3d3", "#75babe", "#0099a5"]); // Draw the map svg.selectAll("path") .data(nycGeoJSON.features) .join("path") .attr("d", path) .attr("fill", d => { const district = parseInt(d.properties.school_dist); const absenteeism = absenteeismByDistrict.get(district) || 0; const walkability = walkabilityByDistrict.get(district) || 0; return isBivariate ? bivariateColorScale(absenteeism, walkability) : colorScale(absenteeism); }) .attr("stroke", "white") .on("mousemove", (event, d) => { if (!showWalkability) { const district = parseInt(d.properties.school_dist); const absenteeism = absenteeismByDistrict.get(district) || 0; const walkability = walkabilityByDistrict.get(district) || 0; let tooltipHTML = `District: ${district}
Percent Chronically Absent: ${absenteeism}%`; if (isBivariate) { tooltipHTML += `
Walkability Index: ${walkability}`; } const containerRect = container.node().getBoundingClientRect(); tooltip.html(tooltipHTML) .style("left", (event.pageX - containerRect.left + 10) + "px") .style("top", (event.pageY - containerRect.top - 28) + "px") .style("opacity", 1); } else { tooltip.style("opacity", 0); } }) .on("mouseout", () => { tooltip.style("opacity", 0); }); // Add the year text svg.append("text") .attr("x", 50) .attr("y", 40) .attr("font-size", "20px") .attr("font-weight", "bold") .text(`% Chronically Absent Students By School District in ${year}`); container.select(".legend").remove(); // Append the new map to the container container.append(() => svg.node()); createLegend(container, isBivariate).attr("class", "legend"); } 37:T10a7,async function createScatterplot(variable, container) { container.style("position", "relative"); const margin = {top: 50, right: 60, bottom: 40, left: 60}; const width = 500 - margin.left - margin.right; const height = 480 - margin.top - margin.bottom; const variableMapping = { disability: "% Students with Disabilities", poverty: "% Students in Poverty" }; const x = d3.scaleLinear() .domain(d3.extent(processedData, d => d[variable])) .range([0, width]); const y = d3.scaleLinear() .domain(d3.extent(processedData, d => d.perc_chron_absent)) .range([height, 0]); const svg = container.append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const buttons = container.append("div") .style("margin-top", "20px") .selectAll("button") .data([ {id: "disability", label: "% Living with Disabilities"}, {id: "poverty", label: "% in Poverty"}]) .join("button") .text(d => d.label); const circles = g.selectAll("circle") .data(processedData.filter(d => d[variable] !== undefined && d[variable] !== null)) .join("circle") .attr("r", 4) .attr("cx", d => x(d[variable])) .attr("cy", d => y(d.perc_chron_absent)) // Changed to 'perc_chron_absent' .on("mouseover", (event, d) => { tooltip.style("visibility", "visible"); tooltip.text(`District: ${d.district}, Year: 20${d.year}`); // Updated tooltip to show the year const districtPath = d3.select(".district-" + d.district); districtPath.attr("stroke", "black").attr("stroke-width", 2); }) .on("mousemove", event => { tooltip.style("top", `${event.pageY - 10}px`) .style("left", `${event.pageX + 10}px`); }) .on("mouseout", (event, d) => { // Add 'd' parameter tooltip.style("visibility", "hidden"); const districtPath = d3.select(".district-" + d.district); // Select the corresponding district path districtPath.attr("stroke", "white").attr("stroke-width", 1); // Reset the stroke width and color only for the corresponding district path }); const xAxis = g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y)); const xAxisLabel = g.append("text") .attr("transform", `translate(${width / 2}, ${height + margin.bottom - 5})`) .style("text-anchor", "middle") .text(variableMapping[variable]); g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("% of Students Chronically Absent"); async function updateScatterplot(variable) { x.domain(d3.extent(processedData, d => d[variable])); xAxisLabel.text(variableMapping[variable]); xAxis.call(d3.axisBottom(x)); circles .data(processedData.filter(d => d[variable] !== undefined && d[variable] !== null)) // Add this line .join("circle") .attr("cx", d => x(d[variable])) .attr("cy", d => y(d.perc_chron_absent)); } buttons.on("click", (event, d) => { updateScatterplot(d.id); }); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "1px solid black") .style("padding", "5px") .style("border-radius", "5px") .style("pointer-events", "none"); // Add title svg.append("text") .attr("x", margin.left) .attr("y", margin.top / 2) .attr("font-size", "20px") .attr("font-weight", "bold") .text(`% Chronically Absent Students By Demographic`); // Gradient background const gradient = container.insert("div", ":first-child") .style("position", "absolute") .style("top", margin.top + "px") .style("left", margin.left + "px") .style("width", width + "px") .style("height", height + "px") .style("background", "linear-gradient(#0099a5, #d3d3d3)") .style("z-index", "-1"); svg.style("z-index", "1"); return container.node(); } 38:T595,async function createChoropleth(data, absentData, container) { const width = 600; const height = 600; // Define the map projection and path const projection = d3.geoMercator() .center([-73.94, 40.70]) .scale(45000) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Filter data for the year 2021 const data2021 = absentData.filter(d => d.year === 21); // Create a color scale for perc_chron_absent const colorScale = d3.scaleLinear() .domain([0, 0.5, 1]) .range(["#d3d3d3", "#75babe", "#0099a5"]) .interpolate(d3.interpolateRgb); // Normalize the data const percExtent = d3.extent(data2021, d => d.perc_chron_absent); const normalize = d3.scaleLinear().domain(percExtent).range([0, 1]); // Create the SVG element const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Draw the map svg.selectAll("path") .data(data.features) .join("path") .attr("d", path) .attr("fill", d => { const districtData = data2021.find(dd => dd.district === +d.properties.school_dist); return districtData ? colorScale(normalize(districtData.perc_chron_absent)) : "#d3d3d3"; }) .attr("stroke", "white") .attr("class", d => "district-" + d.properties.school_dist); // Append the choropleth map to the container container.append(() => svg.node()); return container.node(); } 39:[{"id":"9520862c2539ec0ee5af54008c3afdf1c1aa062e4395e8bc798c030c52b9d298cf325671aec8f989eccc0a3bf29acf48d254575ef6231e81e7d469f8801e9e8a","href":"https://static.observableusercontent.com/files/9520862c2539ec0ee5af54008c3afdf1c1aa062e4395e8bc798c030c52b9d298cf325671aec8f989eccc0a3bf29acf48d254575ef6231e81e7d469f8801e9e8a","name":"a5 graphics_21_missing-12@2.png","type":"image/png","lastModified":1683585627100.41,"size":638725},{"id":"dd6bf5a69a44922b50c82c580ea078adc28892502c95c63c8aca59d2601f1c4aa4fac9e417d97ff66cf126cd9dc600270812ef16fbc8a6637a241e2b1a26dc8a","href":"https://static.observableusercontent.com/files/dd6bf5a69a44922b50c82c580ea078adc28892502c95c63c8aca59d2601f1c4aa4fac9e417d97ff66cf126cd9dc600270812ef16fbc8a6637a241e2b1a26dc8a","name":"a5 graphics_21_missing-08@3.png","type":"image/png","lastModified":1683586441392.224,"size":621190},{"id":"912e679a916bcef2809fd3369fdb1a394a70aea0e1d9e1801d45a695893a7595dd720e2e2b96087c715ebe165d9db59570073aaa67f7cf1f25366c6974bcef28","href":"https://static.observableusercontent.com/files/912e679a916bcef2809fd3369fdb1a394a70aea0e1d9e1801d45a695893a7595dd720e2e2b96087c715ebe165d9db59570073aaa67f7cf1f25366c6974bcef28","name":"a5 graphics_21_missing-10@3.png","type":"image/png","lastModified":1683586441415.348,"size":627624},{"id":"79334e68abf5073db19823252667aab8d24a2665b2bb8c21f5b8011e156214354bd81eb7309b9f867be75ed85e889c503499929644c03f2f8140fbf8b554c1b7","href":"https://static.observableusercontent.com/files/79334e68abf5073db19823252667aab8d24a2665b2bb8c21f5b8011e156214354bd81eb7309b9f867be75ed85e889c503499929644c03f2f8140fbf8b554c1b7","name":"a5 graphics_21_missing-11@3.png","type":"image/png","lastModified":1683586441405.693,"size":629058},{"id":"272e7fea4373cbab327e0b68cc17e4e54711995a1f73a8e989adad402055dc051ecf2e6ee50298eef2113415bc70424e688ff93ac75c3da4d35dbadbf20c16c0","href":"https://static.observableusercontent.com/files/272e7fea4373cbab327e0b68cc17e4e54711995a1f73a8e989adad402055dc051ecf2e6ee50298eef2113415bc70424e688ff93ac75c3da4d35dbadbf20c16c0","name":"opening_stat@3.png","type":"image/png","lastModified":1683586538650.883,"size":38669},{"id":"f77261b4932da66ae7dc0c10cdcf7c36e203a4558061d7835ecb31888985c7d18dd5064e8d571a1c419d049f6d66a6074f426dadf55dbf84ded5f338954da038","href":"https://static.observableusercontent.com/files/f77261b4932da66ae7dc0c10cdcf7c36e203a4558061d7835ecb31888985c7d18dd5064e8d571a1c419d049f6d66a6074f426dadf55dbf84ded5f338954da038","name":"a5 graphics_21_missing-12@4.png","type":"image/png","lastModified":1683586654525.53,"size":638330},{"id":"b1308cb4ba592821ed3f1b87fb51b968462ba929caceb8ac4853772a5230cd1e438fc1f23b54bd94b515935a6caa36df5f4ae39b30fe07b7f5a22b68a67f0fff","href":"https://static.observableusercontent.com/files/b1308cb4ba592821ed3f1b87fb51b968462ba929caceb8ac4853772a5230cd1e438fc1f23b54bd94b515935a6caa36df5f4ae39b30fe07b7f5a22b68a67f0fff","name":"absent@2.csv","type":"text/csv","lastModified":1683587692676.191,"size":25624},{"id":"bbf46712a42effcb1351cdccf3456a16d457fa69285b51d8a6e591797d617d3867a292313a6900d298e0ed120c3d8279aa683efef53db6ed73c1518ee83de077","href":"https://static.observableusercontent.com/files/bbf46712a42effcb1351cdccf3456a16d457fa69285b51d8a6e591797d617d3867a292313a6900d298e0ed120c3d8279aa683efef53db6ed73c1518ee83de077","name":"walkable@1.geojson","type":"application/geo+json","lastModified":1683435566779.888,"size":4306681},{"id":"73eaacce392d9cbe83b8d4171d5c599c3d291ba2eb6617d45bb29bd57c89138fabe9b27b85b69ea89d75c821b9a50e3f9478a47810ee1b701a2ee746cc6a5d94","href":"https://static.observableusercontent.com/files/73eaacce392d9cbe83b8d4171d5c599c3d291ba2eb6617d45bb29bd57c89138fabe9b27b85b69ea89d75c821b9a50e3f9478a47810ee1b701a2ee746cc6a5d94","name":"demographics.csv","type":"text/csv","lastModified":1683435566779.888,"size":1545},{"id":"02ea97eb2d6bb4dee0de7c862a674e502de32d072882772a5762c3cf28d892876fa6d33a044a66a35618e3e48bf5b050387583f8786df98e9699cd5a0470d988","href":"https://static.observableusercontent.com/files/02ea97eb2d6bb4dee0de7c862a674e502de32d072882772a5762c3cf28d892876fa6d33a044a66a35618e3e48bf5b050387583f8786df98e9699cd5a0470d988","name":"a5 graphics.png","type":"image/png","lastModified":1683592707610.183,"size":616425},{"id":"363faacc2872f7704099d4c23e129b2e82497615b9b4bf4a49e8e020f03d9b31473ca4fe6492c06ac61c697ae531eda114e597cfc8ac937cf76d9e706259ae92","href":"https://static.observableusercontent.com/files/363faacc2872f7704099d4c23e129b2e82497615b9b4bf4a49e8e020f03d9b31473ca4fe6492c06ac61c697ae531eda114e597cfc8ac937cf76d9e706259ae92","name":"demographics@1.csv","type":"text/csv","lastModified":1683578312046.733,"size":1702},{"id":"2bac335d6a646b1917c4ab4e5554187e50d3262b82637ebd1a6e826b953b241b77070bbe6b7ea9f5bd403be4a42bcca499af4384d9f7d08f9cb4afbc970e92a8","href":"https://static.observableusercontent.com/files/2bac335d6a646b1917c4ab4e5554187e50d3262b82637ebd1a6e826b953b241b77070bbe6b7ea9f5bd403be4a42bcca499af4384d9f7d08f9cb4afbc970e92a8","name":"demographics@2.csv","type":"text/csv","lastModified":1683578413604.69,"size":1710},{"id":"b1308cb4ba592821ed3f1b87fb51b968462ba929caceb8ac4853772a5230cd1e438fc1f23b54bd94b515935a6caa36df5f4ae39b30fe07b7f5a22b68a67f0fff","href":"https://static.observableusercontent.com/files/b1308cb4ba592821ed3f1b87fb51b968462ba929caceb8ac4853772a5230cd1e438fc1f23b54bd94b515935a6caa36df5f4ae39b30fe07b7f5a22b68a67f0fff","name":"absent@1.csv","type":"text/csv","lastModified":1683585757058.625,"size":25624},{"id":"60183fa5d7608318ee6f4890defd07df818febd567d51d12e620c1e8f8d8eca03ad43b34ce576918af5c9c4ac3ee0422456d57fefd503aa40ff988df8e292274","href":"https://static.observableusercontent.com/files/60183fa5d7608318ee6f4890defd07df818febd567d51d12e620c1e8f8d8eca03ad43b34ce576918af5c9c4ac3ee0422456d57fefd503aa40ff988df8e292274","name":"a5 graphics_21_missing-09@3.png","type":"image/png","lastModified":1683586441375.617,"size":626159},{"id":"dd708ca5903f064762b0a9bdcf3eaaa9d3d6ff98a35b5eed19fc91a386ff54681ec74d0824b4156b0da4585558f1bf627e439d0da4b85a1c45f2db71da66514d","href":"https://static.observableusercontent.com/files/dd708ca5903f064762b0a9bdcf3eaaa9d3d6ff98a35b5eed19fc91a386ff54681ec74d0824b4156b0da4585558f1bf627e439d0da4b85a1c45f2db71da66514d","name":"a5 graphics_21_missing-13@3.png","type":"image/png","lastModified":1683586441430.053,"size":637311},{"id":"7191f60a707a62e182dd01c8892406a1e03d88d1a6042c2443f2da42c01a1ce0aa78459436c3c6e707acc3064a70038ccd439dc98e6a8aa98f7bef185358cc38","href":"https://static.observableusercontent.com/files/7191f60a707a62e182dd01c8892406a1e03d88d1a6042c2443f2da42c01a1ce0aa78459436c3c6e707acc3064a70038ccd439dc98e6a8aa98f7bef185358cc38","name":"absent@3.csv","type":"text/csv","lastModified":1683587778983.687,"size":20537},{"id":"5214656b1e07399f3e0fb345e01522c1b216c3127bc63c99120634e9c35a898768f49c4f28e65710361c9badc31588dc523b0afa524e860172809523f4542dc7","href":"https://static.observableusercontent.com/files/5214656b1e07399f3e0fb345e01522c1b216c3127bc63c99120634e9c35a898768f49c4f28e65710361c9badc31588dc523b0afa524e860172809523f4542dc7","name":"image.png","type":"image/png","lastModified":1683437960651.73,"size":81178},{"id":"2112cc93bb92d1ae469465a6c1cdef29ef6ad000a2c81c064bb6b3154fe39bf29a34830d98924e9ee41558c2aaa99598d6232adc7e004b8dfa9f566c38b64fe2","href":"https://static.observableusercontent.com/files/2112cc93bb92d1ae469465a6c1cdef29ef6ad000a2c81c064bb6b3154fe39bf29a34830d98924e9ee41558c2aaa99598d6232adc7e004b8dfa9f566c38b64fe2","name":"image@2.png","type":"image/png","lastModified":1683443038348.991,"size":1133913}] 2d:{"id":"456d9bd56735700d","slug":null,"title":"Chronic Absenteeism in NYC Public Schools","thumbnail":"204615192e2cf9aa46dcc7a9c17a6a9aa81b2176abe7b5d2662e00966bb07c2e","access_level":"public","create_time":"$D2023-05-07T04:59:26.779Z","update_time":"$D2023-05-09T04:00:35.710Z","view_time":null,"first_public_time":"$D2023-05-07T04:59:26.779Z","fork":{"id":"e905af9c8a0fb829","slug":null,"title":"a5","owner":{"id":"f9aec95c14e6eb7a","login":"jz3037","name":"Jamie Zhang"}},"stars":0,"starred":false,"owner":{"type":"team","id":"59ffb671facfb376","login":"mehrkaur","name":"Mehr Kaur","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":"starter_2024"},"version":2185,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"49a9881913709ee1","login":"mehrkaur","name":"Mehr Kaur","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":null}],"members":[{"type":"individual","id":"0807a21bd7243513","login":"jz3037","name":"Jamie Zhang","avatar_url":"https://avatars-next.observableusercontent.com/09b87db6e6573f1f46ed819dcb069434ee31dd68a1cc8923d60775fb0fa60e49","tier":null,"role":"editor"},{"type":"individual","id":"49a9881913709ee1","login":"mehrkaur","name":"Mehr Kaur","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Chronic Absenteeism in NYC Public Schools","cells":[{"id":0,"value":"# Chronic Absenteeism in NYC Public Schools \n### Mehr Kaur and Jamie Zhang (mk4310, jz3037)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":982,"value":"![image@1.png](${await FileAttachment(\"opening_stat@3.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1100,"value":"{\n const container = html`

\n \n Click here to see how average chronic absenteeism changes over time in NYC.

`;\n\n return container;\n}\n// \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1096,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1628,"value":"

This means that in the 2020-2021 school year (the first year of the COVID-19 pandemic), more than **260,580** students were absent for a significant portion of the school year. \n \nLet's look at this visually:

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2002,"value":"

\n \n

Each circle represents 100 students who were chronically absent in the 2020-2021 school year.

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1976,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2114,"value":"Refresh the page to watch again, or if the visual is lagging.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1963,"value":"## Where was the impact felt?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1979,"value":"So far, we've looked at overall chronic absenteeism in NYC. Now, let's look at chronic absenteeism broken down by school district from 2017 to 2021. Notice that chronic absenteeism across the city tends to fluctuate in the same ways, until the pandemic. In the aftermath of COVID-19, some districts' absenteeism rates increased more drastically than others.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1984,"value":"Drag the slider to see how chronic absenteeism changed from 2017 to 2021 for each school district in NYC. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":208,"value":"createSlider(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1987,"value":"There are many factors that affect student absenteeism. One of them is **community infrastructure**. For instance, areas with poorer infrastructure may hinder students' abilities to get to school, especially during challenging times like COVID-19. A lack of civil infrastructure might also be indicative of lower investment in that neighborhood by the city. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2123,"value":"Click the \"Add Infrastructure Measure\" to look at how the combination of the lack of infrastructure and chronic absenteeism change over time for each school district. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1995,"value":"In this visualization, we consider the inverse of the **Walkability Index** as a measure of the lack of infrastructure. The Walkability Index refers to the extent to which neighborhood design supports walking.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2148,"value":"On the map, districts that are red have poor infrastructure, districts that are green have higher absenteeism, and districts that a mix of both red and green have both poor infrastructure and higher absenteeism. \n\nThis graphic reveals that Districts 27 and 29 (in Queens) and District 10 (in the Bronx) have both poor infrastructure and relatively high chronic absenteeism across all years. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1969,"value":"## Who was most impacted?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2000,"value":"Another important factor that is related to student absenteeism is **demographics**. Here, we explore how demographics are related to chronic absenteeism. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2003,"value":"Use the buttons to toggle between demographic groups (**% Living with disabilities** and **% in Poverty**). \nNotice that there's a clear positive correlation between each demographic group and the % of Students Chronically Absent.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":861,"value":"scatterplotAndChoropleth = await createScatterplotAndChoropleth(\"disability\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1972,"value":"## What does this mean?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2054,"value":"It is important to study chronic absenteeism because it is highly correlated with **learning outcomes** and long-term student performance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2057,"value":"While standardized tests were not administered during COVID-19, we can compare test scores before and after the pandemic (2019 vs. 2022) to observe the possible effect of chronic absenteeism on learning outcomes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2074,"value":"The following chart shows the percentage of students receiving a proficient score on the state math exam. As you can see, there was a significant decrease in proficiency rating for math (-7.6%, to be exact).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":754,"value":"(async () => {\n const data = [\n {year: \"2019\", value: 45.6, category: \"Math\"},\n {year: \"2022\", value: 37.9, category: \"Math\"}\n ];\n\n const chart = vl.markBar({size: 30})\n .data(data)\n .width(300)\n .height(400)\n .encode(\n vl.x().fieldO('year').title(\"Year\"),\n vl.y().fieldQ('value').title(\"Proficiency Rate\"),\n vl.color().field('year').scale({domain: [\"2019\", \"2022\"], range: [\"#00a8b5\"]}).legend(null), //CHANGE COLOR HERE!!!\n vl.column().fieldO('category').header({title: \"Grades 3-8 Math and ELA Proficiency Rates\"})\n );\n\n const renderedChart = await chart.render();\n\n const container = document.createElement('div');\n const chartContainer = document.createElement('div');\n const textContainer = document.createElement('div');\n\n chartContainer.appendChild(renderedChart);\n\n container.appendChild(chartContainer);\n container.appendChild(textContainer);\n\n return container;\n})()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"Similar to chronic absenteeism, learning outcomes also changed disproportionately for certain **demographics**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1526,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2088,"value":"From the above, we see that Black and Hispanic students experienced disproportionate decreases in math proficiency from before the pandemic, compared to their White and Asian peers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2141,"value":"## Conclusion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"Through these visualizations, we can see that there was an increase in **chronic absenteeism** in NYC public schools as a consequence of the **COVID-19 pandemic**. \n\nThis project also underscores the implications of chronic absenteeism on specific **demographic groups** and the potential ramifications on **learning outcomes**. \n\nWe hope that our findings will serve as a valuable resource for policymakers, enabling them to recognize the extent of chronic absenteeism's impact, identify disproportionately affected subgroups, and facilitate the development of targeted interventions that will ultimately enhance student learning outcomes and foster a more equitable educational landscape.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2161,"value":"## Documentation\nhttps://docs.google.com/document/d/1dD7UJcidNtcVJw0rDMhmRe3xZKxXetkBEUtmlfwH4Hs/edit#\n(Hyperlinks visible in the Google Doc)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2157,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1015,"value":"### Construction Cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"#### for dots slideshow:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1142,"value":"dots_static = FileAttachment(\"a5 graphics_21_missing-08@3.png\").url()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1152,"value":"dots1 = FileAttachment(\"a5 graphics.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1158,"value":"dots2 = FileAttachment(\"a5 graphics_21_missing-10@3.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1166,"value":"dots3 = FileAttachment(\"a5 graphics_21_missing-11@3.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"dots4 = FileAttachment(\"a5 graphics_21_missing-13@3.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"dots5 = FileAttachment(\"a5 graphics_21_missing-12@4.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1039,"value":"#### for circle waterfall:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1617,"value":"forceLimit = require(\"d3-force-limit\")\n// {\n// const n = 2606;\n// const circles = pack(Array.from({length: n}, () => ({r: 10 + Math.random() * 10})));\n// ////style=\"background-color: #006F9D;\"\n// const root = html``;\n// yield root;\n// const g = root.firstElementChild;\n// for (const {x, y, r} of circles) {\n// g.appendChild(svg``);\n// yield root;\n// }\n// }\n//circle packing code adapted from https://observablehq.com/@mbostock/packing-circles-inside-a-rectangle?collection=@mbostock/geometry","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1017,"value":"height_c = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1019,"value":"function bounds(circles, pad = 0) {\n const x0 = circles.reduce((v, {x, r}) => Math.min(v, x - r - pad), +Infinity);\n const x1 = circles.reduce((v, {x, r}) => Math.max(v, x + r + pad), -Infinity);\n const y0 = circles.reduce((v, {y, r}) => Math.min(v, y - r - pad), +Infinity);\n const y1 = circles.reduce((v, {y, r}) => Math.max(v, y + r + pad), -Infinity);\n return [x0, y0, x1 - x0, y1 - y0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"function scoreRectangle(node) {\n const a = node._;\n const b = node.next._;\n const ab = a.r + b.r;\n const cx = (a.x * b.r + b.x * a.r) / ab;\n const cy = (a.y * b.r + b.y * a.r) / ab;\n return Math.max(Math.abs(cx * height_c), Math.abs(cy * width));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1025,"value":"function place(b, a, c) {\n const dx = b.x - a.x;\n const dy = b.y - a.y;\n const d2 = dx * dx + dy * dy;\n if (d2) {\n const a2 = (a.r + c.r) ** 2;\n const b2 = (b.r + c.r) ** 2;\n if (a2 > b2) {\n const x = (d2 + b2 - a2) / (2 * d2);\n const y = Math.sqrt(Math.max(0, b2 / d2 - x * x));\n c.x = b.x - x * dx - y * dy;\n c.y = b.y - x * dy + y * dx;\n } else {\n const x = (d2 + a2 - b2) / (2 * d2);\n const y = Math.sqrt(Math.max(0, a2 / d2 - x * x));\n c.x = a.x + x * dx - y * dy;\n c.y = a.y + x * dy + y * dx;\n }\n } else {\n c.x = a.x + c.r;\n c.y = a.y;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"function intersects(a, b) {\n const dr = a.r + b.r - 1e-6;\n const dx = b.x - a.x;\n const dy = b.y - a.y;\n return dr > 0 && dr * dr > dx * dx + dy * dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1029,"value":"class Node {\n constructor(circle) {\n this._ = circle;\n this.next = null;\n this.previous = null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1884,"value":"#### for choropleth:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1891,"value":"import {topojson} from \"https://d3js.org/topojson.v3.min.js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1886,"value":"data = await Promise.all([\n d3.json(\"https://data.cityofnewyork.us/api/geospatial/r8nu-ymqj?method=export&format=GeoJSON\"),\n d3.csvParse(await FileAttachment(\"absent@3.csv\").text()), \n FileAttachment(\"walkable@1.geojson\").json()\n]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1901,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1903,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1905,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1910,"value":"function bivariateColorScale(perc_chron_absent, walkability) {\n //const colors = [\"#d3d3d3\", \"#d28ba8\", \"#d1266b\", \"#75babe\", \"#757a98\", \"#742261\", \"#0099a5\", \"#006583\", \"#001c54\"];\n const colors = [\"#d3d3d3\", \"#75babe\", \"#0099a5\", \"#d28ba8\",\"#757a98\", \"#006583\", \"#d1266b\",\"#742261\", \"#001c54\"];\n\n const n = 3; // The number of color categories for each variable\n const x = d3.scaleQuantile([13, 51], d3.range(n)); // Adjust the domain based on your absenteeism data\n const y = d3.scaleQuantile([-2.5, 5], d3.range(n)); // Adjust the domain based on your walkability data\n\n return colors[y(-walkability) * n + x(perc_chron_absent)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1913,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1917,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1920,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1931,"value":"#### for scatterplot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1937,"value":"scatter_data = await Promise.all(d3.csvParse(await FileAttachment(\"absent@3.csv\").text()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1940,"value":"processedData = scatter_data.map(d => ({\n perc_chron_absent: +d.perc_chron_absent,\n year: +d.year, \n ell: +d.ell,\n disability: +d.disability,\n poverty: +d.poverty,\n district: +d.district\n})); // absenteeism21: +d.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1943,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1946,"value":"choropleth_data = await d3.json(\"https://data.cityofnewyork.us/api/geospatial/r8nu-ymqj?method=export&format=GeoJSON\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1949,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1952,"value":"async function createScatterplotAndChoropleth(variable) {\n const container = d3.create(\"div\");\n const scatterplotContainer = container.append(\"div\").style(\"display\", \"inline-block\");\n const choroplethContainer = container.append(\"div\").style(\"display\", \"inline-block\");\n\n await createScatterplot(variable, scatterplotContainer);\n await createChoropleth(choropleth_data, processedData, choroplethContainer);\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2039,"value":"### for bar charts:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2048,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"