30:T7d7,function make_map() { let div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`); let svg = div.append("svg").attr("width", w).attr("height", h); let map = svg.append("g"); let projection = d3 .geoConicEqualArea() .parallels([29.5, 45.5]) .rotate([90, 0]) .fitSize([w - 10, h], rect); let path = d3.geoPath().projection(projection); map .append("path") .attr("d", path(contiguous_states)) .attr("fill", "lightgray") .attr("stroke", "white") .attr("stroke-width", 1); let strokeWidth = w / 1100; let xy; map .selectAll("circle") .data(grouped) .join("circle") .attr("id", (g) => g[0]) .attr("cx", function (g) { let schools = g[1]; let lat = d3.mean(schools.map((o) => o.latitude)); let lon = d3.mean(schools.map((o) => o.longitude)); xy = projection([lon, lat]); return xy[0]; }) .attr("cy", function (g) { let schools = g[1]; let lat = d3.mean(schools.map((o) => o.latitude)); let lon = d3.mean(schools.map((o) => o.longitude)); xy = projection([lon, lat]); return xy[1]; }) .attr("r", (g) => (3 * Math.sqrt(g[1].length) * w) / 1100) .attr("fill", "#a00") .attr("stroke", "#000") .attr("stroke-width", strokeWidth) .attr("fill-opacity", 0.3) .on("pointerenter", function () { d3.select(this).attr("stroke-width", 2 * strokeWidth); }) .on("pointerleave", function () { d3.select(this).attr("stroke-width", strokeWidth); }) .nodes() .forEach(function (c) { let content = get_tip(c.id); tippy(c, { content: content, theme: "light", allowHTML: true, interactive: true, appendTo: () => div.node() // document.body, }); }); svg.call( d3 .zoom() .scaleExtent([0.5, 8]) .duration(500) .on("zoom", function (evt) { map.attr("transform", evt.transform); }) ); return div.node(); }31:Tdd1,make_table = () => Inputs.table( hbcu_data.map(function (o) { let clone = {}; clone.School = o["Institution Name"]; clone.City = o["City location of institution (HD2020)"]; clone.State = o["State abbreviation (HD2020)"]; clone.Sector = o["Sector of institution (HD2020)"] % 2 == 0 ? "Private" : "Public"; let car_class = parseInt( o["Carnegie Classification 2018: Basic (HD2020)"] ); if (car_class < 10) { car_class = "Associate's"; } else if (18 <= car_class && car_class <= 20) { car_class = "Master's"; } else if (21 <= car_class && car_class <= 23) { car_class = "Baccalaureate"; } else if (car_class == 16) { car_class = "Doctoral"; } else if (car_class == 24) { car_class = "Religious"; } else if (car_class == 25) { car_class = "Medical"; } else if (car_class == 31) { car_class = "Law"; } clone["Highest degree type"] = car_class; let religious_affiliation = o["Religious affiliation (IC2020)"]; if (religious_affiliation == 51) { religious_affiliation = "African Methodist Episcopal Church"; } else if (religious_affiliation == 24) { religious_affiliation = "African Methodist Episcopal Zion Church"; } else if (religious_affiliation == 52) { religious_affiliation = "American Baptist Church"; } else if (religious_affiliation == 54) { religious_affiliation = "Baptist Church"; } else if (religious_affiliation == 61) { religious_affiliation = "Disciples of Christ"; } else if (religious_affiliation == 55) { religious_affiliation = "Christian Methodist Episcopal Church"; } else if (religious_affiliation == 74) { religious_affiliation = "sChurches of Christ"; } else if (religious_affiliation == 42) { religious_affiliation = "Interdenominational"; } else if (religious_affiliation == 78) { religious_affiliation = "Multiple Protestant Denominational"; } else if (religious_affiliation == 66) { religious_affiliation = "Presbyterian Church "; } else if (religious_affiliation == 73) { religious_affiliation = "Protestant Church"; } else if (religious_affiliation == 30) { religious_affiliation = "Roman Catholic Church"; } else if (religious_affiliation == 95) { religious_affiliation = "Seventh Day Adventist Church"; } else if (religious_affiliation == 76) { religious_affiliation = "United Church of Christ"; } else if (religious_affiliation == 71) { religious_affiliation = "United Methodist Church"; } else if (religious_affiliation == -2) { religious_affiliation = "None"; } clone["Religious affiliation"] = religious_affiliation; clone["Student body"] = parseInt( o["Grand total (EF2020A All students total)"] ); clone["Percent African American"] = Math.round( (100 * parseInt( o["Black or African American total (EF2020A All students total)"] )) / parseInt(o["Grand total (EF2020A All students total)"]) ); clone.Link = o["Institution's internet website address (HD2020)"]; return clone; }), { height: h, rows: 50, format: { Link: (link) => html`link`, "Percent African American": (p) => `${p}%` } } )32:Tfb8,function make_time_series_graphs(variable, opts = {}) { let { max_size = 1100, margin = { left: 70, right: 30, bottom: 25, top: 20 }, opacity = 0.2, interactive = true, top5 = true } = opts; let data = get_single_value(variable, hbcu_data); let max = data.max; if (top5) { data = d3.sort(data, (a) => a.slice(-1)[0].value).slice(-5); data.max = max; } let graph_width = width < max_size ? width : max_size; let graph_height = 0.625 * graph_width; let svg = d3 .create("svg") .attr("width", graph_width) .attr("height", graph_height) .attr("viewBox", [0, 0, graph_width, graph_height]); let x_scale = d3 .scaleTime() .domain([new Date("2010"), new Date("2020")]) .range([margin.left, graph_width - margin.right]); let y_scale = d3 .scaleLinear() .domain([0, data.max]) .range([graph_height - margin.bottom, margin.top]); let pts_to_path = d3 .line() .x((d) => x_scale(d.year)) .y((d) => y_scale(d.value)); let axes = svg.append("g"); let x_axis = d3.axisBottom(x_scale); axes .append("g") .attr("transform", `translate(0,${graph_height - margin.bottom})`) .call(x_axis.tickSizeOuter(0)); let y_axis = d3.axisLeft(y_scale); axes .append("g") .attr("transform", `translate(${margin.left})`) .call(y_axis.tickSizeOuter(0)); let time_series_plots = svg.append("g"); let text_group = svg .append("text") .attr("x", 1.3 * margin.left) .attr("y", 1.5 * margin.top) .attr("font-size", 16) .attr("text-anchor", "start") .attr("fill", "steelblue") .text("Avg highlighted"); data.forEach(function (d) { time_series_plots .append("path") .attr("d", pts_to_path(d)) .attr("class", "time_series") .attr("stroke", "black") .attr("id", `uid${d[0].UnitID}`) .attr("stroke-opacity", opacity) .attr("stroke-width", 0.7) .attr("stroke-linejoin", "round") .attr("fill", "none"); }); let get_mean_values = (date) => d3.mean( data .map(function (d) { let dd = d.filter((o) => o.year.getTime() == date.getTime()); return dd; }) .filter((a) => a.length > 0) .map((a) => a[0].value) ); let means = d3 .range(2010, 2021) .map((d) => new Date(d.toString())) .map((d) => ({ value: get_mean_values(d), year: d })); time_series_plots .append("path") .attr("d", pts_to_path(means)) .attr("class", "avg_time_series") .attr("stroke", "steelblue") .attr("id", "avg") .attr("stroke-opacity", 1) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("fill", "none"); svg .on("touchmove", (e) => e.preventDefault()) // prevent scrolling .on("pointermove", function (evt) { let p = d3.pointer(evt); let x = p[0]; let y = p[1]; let day = x_scale.invert(x); let value = y_scale.invert(y); let closest = get_closest(day, value, data); if (closest) { time_series_plots .selectAll("path.time_series") .attr("stroke-opacity", opacity) .attr("stroke-width", 0.7) .attr("stroke", "black"); time_series_plots .select(`#uid${closest.uid}`) .attr("stroke-opacity", 1) .attr("stroke-width", 6) .attr("stroke", "steelblue") .raise(); text_group.text( hbcu_data.filter((o) => o.UnitID == closest.uid)[0][ "Institution Name" ] ); } }) .on("pointerleave", function () { time_series_plots .selectAll("path.time_series") .attr("stroke-opacity", opacity) .attr("stroke-width", 0.7) .attr("stroke", "black"); time_series_plots .select("#avg") .attr("stroke-opacity", 1) .attr("stroke-width", 3) .attr("stroke", "steelblue") .raise(); text_group.text("Avg highlighted"); }); return svg.node(); }33:Tf00,function get_tip(city_name) { let group = grouped.get(city_name); let state = group[0]["State abbreviation (HD2020)"]; let tip = `

${city_name}, ${state}

${ o["Institution Name"] }

A ${pub_pri}, ${car_class} ${religious_affiliation} with ${enrollment} students, ${d3.format( "0.0%" )(percentage_black)} of whom are African American.

"; return tip; }34:[{"id":"13517755bda97ea759c5b66471ebc1dd644268db27edfefe3ff69b36a8b21f8eebdfb715be4345084d42cda442f4e5923948ea5d349b9edf994c16fb9ce941b4","href":"https://static.observableusercontent.com/files/13517755bda97ea759c5b66471ebc1dd644268db27edfefe3ff69b36a8b21f8eebdfb715be4345084d42cda442f4e5923948ea5d349b9edf994c16fb9ce941b4","name":"contiguous_states.json","type":"application/json","lastModified":1655555678097.563,"size":128429},{"id":"dd518a67fc7d42fee932dc1e742ada06ef78776397ed09129749c6d7a3b26ca08d3113e27b36298f661a863324a398921465294a0c05cdaa83db53de324f4f5d","href":"https://static.observableusercontent.com/files/dd518a67fc7d42fee932dc1e742ada06ef78776397ed09129749c6d7a3b26ca08d3113e27b36298f661a863324a398921465294a0c05cdaa83db53de324f4f5d","name":"hbcu3@1.csv","type":"text/csv","lastModified":1655838321015.095,"size":15574}] 2e:{"title":"HBCUs","cells":[{"id":0,"value":"# HBCUs\n\nThe [Asheville Ideas Fest](https://www.unca.edu/events-and-news/event/asheville-ideas-fest/) gave me the opportunity to attend a live recording of [The Water's and Harvey Show](https://www.npr.org/podcasts/536424816/the-waters-and-harvey-show). The topic was the state of higher education in general, with a specific focus on Historically Black Colleges and Universities (or HBCUs). As noted [in the New York Times](https://www.nytimes.com/2022/06/11/us/hbcu-enrollment-black-students.html) there's been something of a renaissance among HBCUs in recent years. This all motivated me to use [IPEDS](https://nces.ed.gov/ipeds/) to explore the topic just a bit.","pinned":false,"hidden":false,"mode":"md"},{"id":920,"value":"## The number and diversity of HBCUs\n\nThere are 102 postsecondary schools in current operation that are identified by IPEDS as HBCUs. This visualization presents them on either a map or in a table.","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"viewof display_type = Inputs.radio([\"on map\", \"in table\"], {\n label: \"Show schools:\",\n value: \"on map\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"school_display = {\n if (display_type == \"on map\") {\n return make_map();\n } else if (display_type == \"in table\") {\n return make_table();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"$${display_type == \"on map\" ? \"*The bubble map indicates the cities where HBCUs are located. The area of each circle is proportional to the number of schools in the corresponding city; you can touch or hover over each circle to get more information on the schools in that city, including the type, size, and percentage of African American students.*\" : \"*The table shows the same 102 HBCUs. You can scroll through the table to view all the schools and you can sort by any variable by clicking on the corresponding header.*\"}","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"renaissance_comment = {\n if (top5) {\n return md`## Renaissance\nIf we look at the number of applicants to the five largest HBCUs over the last decade, we see a pretty clear upward trend on average.`;\n } else {\n return md`## Renaissance\nThe average increasing trend even seems to continue when we apply it to all HBCUs (that provide sufficient data), though it doesn't appear to be quite as strong.`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"viewof top5 = Inputs.toggle({ label: \"Just five largest:\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"applicant_time_series = make_time_series_graphs(\"App\", { top5: top5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"You can touch or hover over the time series graph to highlight individual schools.","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":883,"value":"### Top-level","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":976,"value":"hbcu_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"### Auxilliary functions","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"function get_closest(time, value, data) {\n let results = [];\n\n data.forEach(function (d) {\n let these_dates = d.map((o) => o.year);\n try {\n let idx = d3.bisect(these_dates, time);\n let t1 = these_dates[idx - 1].getTime();\n let t2 = these_dates[idx].getTime();\n let p1 = d[idx - 1].value;\n let p2 = d[idx].value;\n let p = p1 + ((p2 - p1) * (time.getTime() - t1)) / (t2 - t1);\n results.push({\n time: time,\n value: p,\n err: Math.abs(p - value),\n uid: d[0].UnitID,\n });\n } catch {\n (\"pass\");\n }\n });\n results.sort((o1, o2) => o1.err - o2.err);\n return results[0];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"function get_single_value(column_start, data) {\n let columns = Object.keys(data[0]).filter(\n (s) => s.slice(0, column_start.length) == column_start\n );\n let td = data.map(function (d) {\n let row = columns.map((key) => ({\n year: new Date(key.match(find_year_re)[0].slice(-4)),\n value: parseFloat(d[key]),\n UnitID: d.UnitID\n }));\n row = d3.sort(row, (o) => o.year);\n return row;\n });\n\n // Figure out which data is incomplete\n // let incomplete = td.filter(\n // (a) => a.map((o) => isNaN(o.value)).indexOf(true) > -1\n // );\n // incomplete.forEach(function (o) {\n // let name = hbcu_data.filter((oo) => o[0].UnitID == oo.UnitID);\n // if (name.length > 0) {\n // name = name[0][\"Institution Name\"];\n // console.log(name);\n // }\n // });\n\n td = td.filter((a) => a.map((o) => isNaN(o.value)).indexOf(true) == -1);\n let all_values = td.map((o) => o.map((oo) => oo.value)).flat();\n let [min, max] = d3.extent(all_values);\n td.min = min;\n td.max = max;\n\n return td;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"find_year_re = /\\([A-Z]{2,}20\\d{2}/","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"h = 1.2 * rect.features[0].properties.aspect * w","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"w = width < 1100 ? width : 1100","pinned":true,"hidden":false,"mode":"ojs"},{"id":887,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"// A bounding rectangle\nrect = {\n let xmax = -74;\n let xmin = -101;\n let ymin = 24;\n let ymax = 41;\n let aspect = (ymax - ymin) / (xmax - xmin);\n return {\n type: \"FeatureCollection\",\n\n features: [\n {\n type: \"Feature\",\n properties: { aspect: aspect },\n geometry: {\n type: \"LineString\",\n coordinates: [\n [xmin, ymin],\n [xmax, ymax]\n ]\n }\n }\n ]\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"contiguous_states = {\n let contiguous_states = await FileAttachment(\"contiguous_states.json\").json();\n contiguous_states = topojson.feature(\n contiguous_states,\n contiguous_states.objects.contiguous_states\n );\n return contiguous_states;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"hbcu_data = {\n let hbcu_data = await FileAttachment(\"hbcu3@1.csv\").csv();\n hbcu_data.forEach(function (o) {\n o.latitude = parseFloat(o[\"Latitude location of institution (HD2020)\"]);\n o.longitude = parseFloat(o[\"Longitude location of institution (HD2020)\"]);\n\n let city = o[\"City location of institution (HD2020)\"];\n if (city == \"Huntsville\" || city == \"Normal\") {\n city = \"Huntsville - Normal\";\n } else if (city == \"Fairfield\" || city == \"Birmingham\") {\n city = \"Fairfield - Birmingham\";\n } else if (city == \"Little Rock\" || city == \"N Little Rock\") {\n city = \"Little Rock\";\n }\n o.city = city;\n });\n return hbcu_data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"grouped = d3.group(hbcu_data, (o) => o.city)","pinned":true,"hidden":false,"mode":"ojs"},{"id":999,"value":"FileAttachment(\"hbcu3@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}