2c:null 2d:["$","title",null,{"children":"CPS Correlation Explorer | willyq2 | Observable"}] 32:T32b1,scatterExplorer = { //data const numericalFeatures = cleaned.numericalFeatures; const chartData = cleaned.cleanedData; //state (synced from the dropdowns at the start of update()) let xField = numericalFeatures[0]; let yField = numericalFeatures[1]; let colorField = numericalFeatures[2]; //accessors (always read the currently selected fields) const xAccessor = (d) => d[xField]; const yAccessor = (d) => d[yField]; const colorValueAccessor = (d) => d[colorField]; const nameAccessor = (d) => d["Name of School"]; const isValidNumber = (v) => v != null && !isNaN(v); const hasColorValue = (d) => isValidNumber(colorValueAccessor(d)); //dimensions const dimensions = { boundedWidth: 500, boundedHeight: 500, legendWidth: 200, margin: { top: 70, right: 50, bottom: 50, left: 50 } //top margin leaves room for the legend }; dimensions.width = dimensions.boundedWidth + dimensions.margin.left + dimensions.margin.right; dimensions.height = dimensions.boundedHeight + dimensions.margin.top + dimensions.margin.bottom; //layout containers const container = d3 .create("div") .style("display", "flex") .style("justify-content", "flex-start") .style("align-items", "flex-start") .style("gap", "20px") .style("width", "100%") .style("padding", "20px") .style("box-sizing", "border-box") .style("font-family", "arial") .style("font-size", "14px") .style("color", "#333"); const chartDiv = container .append("div") .style("flex", "3") .style("position", "relative") .style("background", "#fff") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("padding", "10px") .style("box-shadow", "0 1px 3px rgba(0,0,0,0.05)"); const controls = container .append("div") .style("flex", "1") .style("background", "#fafafa") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("padding", "10px") .style("box-shadow", "0 1px 3px rgba(0,0,0,0.05)"); controls .append("h3") .text("Controls") .style("font-size", "15px") .style("margin-bottom", "15px") .style("font-weight", "600") .style("border-bottom", "1px solid #eee") .style("padding-bottom", "10px"); //dropdown helper function makeDropdown(parent, label, options, selected) { const div = parent.append("div").style("margin-bottom", "12px"); div .append("label") .text(label) .style("display", "block") .style("margin-bottom", "5px") .style("font-weight", "500") .style("font-size", "13px"); const select = div .append("select") .style("width", "100%") .style("padding", "6px 8px") .style("font", "inherit") .style("border", "1px solid #ccc") .style("border-radius", "6px") .style("background", "#fff") .style("cursor", "pointer"); select .selectAll("option") .data(options) .join("option") .attr("value", (d) => d) .text((d) => d) .property("selected", (d) => d === selected); return select; } //controls: dropdowns const xSelect = makeDropdown(controls, "X-axis:", numericalFeatures, xField); const ySelect = makeDropdown(controls, "Y-axis:", numericalFeatures, yField); const colorSelect = makeDropdown(controls, "Color/Size:", numericalFeatures, colorField); //controls: regression toggle const regDiv = controls .append("div") .style("margin-top", "15px") .style("padding-top", "10px") .style("border-top", "1px solid #eee"); const regCheckbox = regDiv .append("input") .attr("type", "checkbox") .attr("id", "show-regression") .style("cursor", "pointer"); regDiv .append("label") .attr("for", "show-regression") .text("Show regression line") .style("font-size", "13px") .style("font-weight", "500") .style("margin-left", "6px"); //controls: randomize button (just sets the dropdowns; update() reads them) const randomDiv = controls .append("div") .style("margin-top", "15px") .style("padding-top", "10px") .style("border-top", "1px solid #eee"); randomDiv .append("button") .text("Randomize Axes") .style("padding", "6px 8px") .style("font", "inherit") .style("border", "1px solid #ccc") .style("border-radius", "6px") .style("background", "#fff") .style("cursor", "pointer") .on("click", () => { const randomFeature = () => numericalFeatures[Math.floor(Math.random() * numericalFeatures.length)]; [xSelect, ySelect, colorSelect].forEach((select) => select.property("value", randomFeature())); update(); }); //tooltip const tooltip = chartDiv .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "6px 8px") .style("border-radius", "4px") .style("font-size", "13px") .style("opacity", 0) .style("pointer-events", "none") .style("z-index", 10); function showTooltip(event, d) { const [x, y] = d3.pointer(event, chartDiv.node()); //mouse position relative to the chart container tooltip .html( `${nameAccessor(d) || "Unknown"}
${xField}: ${xAccessor(d)}
${yField}: ${yAccessor(d)}
${colorField}: ${colorValueAccessor(d)}` ) .style("left", `${x + 20}px`) .style("top", `${y - 10}px`) .style("opacity", 1); d3.select(event.currentTarget).style("stroke", "black").style("stroke-width", 2); } function hideTooltip(event) { tooltip.style("opacity", 0); d3.select(event.currentTarget).style("stroke", "none"); } //canvas const svg = chartDiv .append("svg") .style("width", "100%") .attr("viewBox", [0, 0, dimensions.width, dimensions.height]) .attr("preserveAspectRatio", "xMidYMid meet"); const bounds = svg .append("g") .attr("transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})`); //scales const xScale = d3.scaleLinear().range([0, dimensions.boundedWidth]); const yScale = d3.scaleLinear().range([dimensions.boundedHeight, 0]); const sizeScale = d3.scaleLinear().range([3, 10]); const colorScale = d3.scaleSequential(d3.interpolateRdBu); const legendScale = d3.scaleLinear().range([0, dimensions.legendWidth]); //dot encodings (missing color values are drawn gray at the smallest size) const dotColor = (d) => (hasColorValue(d) ? colorScale(colorValueAccessor(d)) : "#ccc"); const dotRadius = (d) => (hasColorValue(d) ? sizeScale(colorValueAccessor(d)) : 3); //gridlines, axes, and mark groups (created once, updated in update()) const xGrid = bounds .append("g") .attr("transform", `translate(0, ${dimensions.boundedHeight})`) .style("color", "#eee"); //axis ticks are drawn in currentColor, so this colors the grid const yGrid = bounds.append("g").style("color", "#eee"); const xAxis = bounds.append("g").attr("transform", `translate(0, ${dimensions.boundedHeight})`); const yAxis = bounds.append("g"); const dotsGroup = bounds.append("g"); const regLineGroup = bounds.append("g").style("pointer-events", "none"); //never blocks dot hovers const xLabel = bounds .append("text") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.boundedHeight + 40) .attr("text-anchor", "middle"); const yLabel = bounds .append("text") .attr("x", -dimensions.boundedHeight / 2) .attr("y", -35) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle"); //color legend (gradient is built once from colorScale; title + ticks update in update()) svg .append("defs") .append("linearGradient") .attr("id", "color-legend-gradient") .selectAll("stop") .data(d3.ticks(0, 1, 10)) .join("stop") .attr("offset", (t) => t) .attr("stop-color", colorScale.interpolator()); const legend = bounds.append("g").attr("transform", "translate(0, -50)"); const legendTitle = legend.append("text").attr("y", -6).style("font-size", "12px"); legend .append("rect") .attr("width", dimensions.legendWidth) .attr("height", 10) .attr("fill", "url(#color-legend-gradient)"); const legendAxis = legend.append("g").attr("transform", "translate(0, 10)"); legend .append("circle") .attr("cx", dimensions.legendWidth + 20) .attr("cy", 5) .attr("r", 4) .attr("fill", "#ccc"); legend .append("text") .attr("x", dimensions.legendWidth + 28) .attr("y", 5) .attr("dy", "0.32em") .style("font-size", "10px") .text("no data"); //update chart function update() { xField = xSelect.property("value"); yField = ySelect.property("value"); colorField = colorSelect.property("value"); //filter to rows with valid x/y values const valid = chartData.filter((d) => isValidNumber(xAccessor(d)) && isValidNumber(yAccessor(d))); //scale domains xScale.domain(d3.extent(valid, xAccessor)).nice(); yScale.domain(d3.extent(valid, yAccessor)).nice(); const colorExtent = d3.extent(valid.filter(hasColorValue), colorValueAccessor); sizeScale.domain(colorExtent); colorScale.domain(colorExtent); legendScale.domain(colorExtent); //gridlines (the axis domain path isn't needed for a grid) xGrid .call(d3.axisBottom(xScale).tickSize(-dimensions.boundedHeight).tickFormat("").ticks(10)) .call((g) => g.select(".domain").remove()); yGrid .call(d3.axisLeft(yScale).tickSize(-dimensions.boundedWidth).tickFormat("").ticks(10)) .call((g) => g.select(".domain").remove()); //axes + labels xAxis.transition().duration(600).call(d3.axisBottom(xScale)); yAxis.transition().duration(600).call(d3.axisLeft(yScale)); xLabel.text(xField); yLabel.text(yField); //legend legendTitle.text(colorField); legendAxis .call(d3.axisBottom(legendScale).ticks(4)) .call((g) => g.select(".domain").remove()); //dots (tooltip handlers are attached once, when a dot enters) dotsGroup .selectAll("circle") .data(valid, nameAccessor) .join( (enter) => enter .append("circle") .attr("r", 0) .attr("cx", (d) => xScale(xAccessor(d))) .attr("cy", (d) => yScale(yAccessor(d))) .attr("fill", dotColor) .style("opacity", 0.7) .style("cursor", "pointer") .on("mouseover", showTooltip) .on("mouseout", hideTooltip), (update) => update, (exit) => exit.transition().duration(400).attr("r", 0).remove() ) .transition() .duration(600) .attr("cx", (d) => xScale(xAccessor(d))) .attr("cy", (d) => yScale(yAccessor(d))) .attr("r", dotRadius) .attr("fill", dotColor); //regression line + correlation label regLineGroup.selectAll("*").remove(); if (regCheckbox.property("checked")) { const xMean = d3.mean(valid, xAccessor); const yMean = d3.mean(valid, yAccessor); const sxy = d3.sum(valid, (d) => (xAccessor(d) - xMean) * (yAccessor(d) - yMean)); const sxx = d3.sum(valid, (d) => (xAccessor(d) - xMean) ** 2); const syy = d3.sum(valid, (d) => (yAccessor(d) - yMean) ** 2); const slope = sxy / sxx; const intercept = yMean - slope * xMean; const r = sxy / Math.sqrt(sxx * syy); //Pearson's r, from the same sums as the slope const toPixels = (x) => [xScale(x), yScale(slope * x + intercept)]; const [xMin, xMax] = d3.extent(valid, xAccessor); const [x1, y1] = toPixels(xMin); const [x2, y2] = toPixels(xMax); regLineGroup .append("line") .attr("x1", x1) .attr("y1", y1) .attr("x2", x1) .attr("y2", y1) .style("stroke", "#888") .style("stroke-width", "2px") .style("opacity", 0.6) .style("stroke-linecap", "round") .transition() .duration(600) .attr("x2", x2) .attr("y2", y2); //label the line's end: above it for positive slopes, below for negative, so it never sits on the line regLineGroup .append("text") .attr("x", x2) .attr("y", y2) .attr("dy", slope < 0 ? "1.2em" : "-0.6em") .attr("text-anchor", "end") .style("font-size", "12px") .style("fill", "#555") .style("stroke", "white") //white halo keeps the label readable over dots .style("stroke-width", "3px") .style("paint-order", "stroke") .style("opacity", 0) .text(`r = ${r.toFixed(2)}`) .transition() .duration(600) .style("opacity", 1); } } //wire up interactivity [xSelect, ySelect, colorSelect, regCheckbox].forEach((element) => element.on("change", update)); //initial render update(); return container.node(); }33:Ta7f,cleaned = { const trimmedData = dataset.map((row) => { const newRow = {}; Object.entries(row).forEach(([key, value]) => { const cleanKey = key.trim(); newRow[cleanKey] = typeof value === "string" ? value.trim() : value; }); return newRow; }); const numericalFeatures = [ "Safety Score", "Environment Score", "Family Involvement Score", "Instruction Score", "Leaders Score", "Teachers Score", "Parent Engagement Score", "Parent Environment Score", "Average Student Attendance", "Rate of Misconducts (per 100 students)", "Average Teacher Attendance", "Individualized Education Program Compliance Rate", "Pk-2 Literacy %", "Pk-2 Math %", "Gr3-5 Grade Level Math %", "Gr3-5 Grade Level Read %", "Gr3-5 Keep Pace Read %", "Gr3-5 Keep Pace Math %", "Gr6-8 Grade Level Math %", "Gr6-8 Grade Level Read %", "Gr6-8 Keep Pace Math%", "Gr6-8 Keep Pace Read %", "Gr-8 Explore Math %", "Gr-8 Explore Read %", "ISAT Exceeding Math %", "ISAT Exceeding Reading %", "ISAT Value Add Math", "ISAT Value Add Read", "Students Taking Algebra %", "Students Passing Algebra %", "9th Grade EXPLORE (2009)", "9th Grade EXPLORE (2010)", "10th Grade PLAN (2009)", "10th Grade PLAN (2010)", "Net Change EXPLORE and PLAN", "11th Grade Average ACT (2011)", "Net Change PLAN and ACT", "College Eligibility %", "Graduation Rate %", "College Enrollment Rate %", "College Enrollment (number of students)", "General Services Route", "Latitude", "Longitude" ]; const categoricalFeatures = [ "Elementary, Middle, or High School", "Adequate Yearly Progress Made?", "CPS Performance Policy Status", "CPS Performance Policy Level", "Healthy Schools Certified?", "Safety Icon", "Family Involvement Icon", "Environment Icon", "Instruction Icon", "Leaders Icon", "Teachers Icon", "Parent Engagement Icon", "Parent Environment Icon", "ISAT Value Add Color Math", "ISAT Value Add Color Read" ]; const cleanedData = trimmedData .map((d) => { const obj = { ...d }; numericalFeatures.forEach((col) => { const val = parseFloat( (d[col] || "").toString().replace(/,/g, "").trim() ); obj[col] = isNaN(val) ? null : val; }); categoricalFeatures.forEach((col) => { if (d[col]) obj[col] = d[col].toString().trim(); }); return obj; }) .filter((d) => numericalFeatures.some((col) => d[col] !== null)); return { cleanedData, numericalFeatures, categoricalFeatures }; } 34:[{"id":"769eac22dff1d35a456a555d3f4aa089ad3573a228e75205f9f353750f7a3c848347fb7feaef1b0020fa44e9f1d68c80964ef5f465aa82b41d35c41e3b077edb","href":"https://static.observableusercontent.com/files/769eac22dff1d35a456a555d3f4aa089ad3573a228e75205f9f353750f7a3c848347fb7feaef1b0020fa44e9f1d68c80964ef5f465aa82b41d35c41e3b077edb","name":"Chicago_Public_Schools_-_Progress_Report_Cards_(2011-2012)_20250924.csv","type":"text/csv","lastModified":1758754423862.212,"size":445198}] 30:{"id":"ad907e57bdca57a1","slug":"cps-correlation-explorer","title":"CPS Correlation Explorer","thumbnail":"e7a6c3ce32152d079bcd78882fe8683a7247c0bc66711869a254f18f062ced85","access_level":"public","create_time":"$D2025-09-24T22:53:01.660Z","update_time":"$D2026-09-22T22:45:24.364Z","view_time":null,"first_public_time":"$D2025-11-05T17:40:19.704Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0bfcaea773f238e3","login":"willyq2","name":"willyq2","avatar_url":"https://avatars-next.observableusercontent.com/229551833b4ee48579e32c285e75fb589f5c879636fb09c93cfb24b8480dde3d","tier":"starter_2024"},"version":428,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d02b3e5692a9f597","login":"william-webster","name":"William Webster","avatar_url":"https://avatars-next.observableusercontent.com/11ce8cbcf73cf7c8dabe50765e9f9ffcf06c4363a713831330161d401a02639c","tier":null}],"members":[{"type":"individual","id":"d02b3e5692a9f597","login":"william-webster","name":"William Webster","avatar_url":"https://avatars-next.observableusercontent.com/11ce8cbcf73cf7c8dabe50765e9f9ffcf06c4363a713831330161d401a02639c","tier":null,"role":"editor"},{"type":"team","id":"0bfcaea773f238e3","login":"willyq2","name":"willyq2","avatar_url":"https://avatars-next.observableusercontent.com/229551833b4ee48579e32c285e75fb589f5c879636fb09c93cfb24b8480dde3d","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CPS Correlation Explorer","cells":[{"id":0,"value":"# CPS Correlation Explorer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"The Chicago Public Schools Correlation Explorer is an interactive tool that lets users explore relationships between school performance metrics across multiple dimensions. Users can select any variables for the x-, y-, and color-axes, toggle a regression line, and see how different factors correlate across schools.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"**Source:** [Chicago Public Schools - Progress Report Cards (2011-2012)\n](https://data.cityofchicago.org/Education/Chicago-Public-Schools-School-Progress-Reports-SY2/twrw-chuq/about_data)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"dataset = FileAttachment(\"Chicago_Public_Schools_-_Progress_Report_Cards_(2011-2012)_20250924.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"