2a:["$","title",null,{"children":"CS 725 Final Dashboard | Kimberley Cossey | Observable"}] 2f:T85c,va_school_map = { //Tooltip testing https://mappingwithd3.com/tutorials/basics/tooltip/ d3.select("#tooltip"); const height = totalHeight; const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g"); //Making another empty placeholder to use for the university location data const univ = svg.append("g"); const tooltip = d3 .select("#tooltip") .append("div") .attr("class", "tooltip") .style("font-size", "15px"); //Underlying map code stays the same const map = g .selectAll("path") .data(counties.features) .enter() .append("path") .attr("fill", "#e3e3e3") .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("d", va_geopath); //Place the dots on top of the map //Filtering geoJSON file - https://stackoverflow.com/questions/47962084/d3-filter-geojson-by-geometry const unis = univ .selectAll("path") .data(all_geojson.features) .enter() .append("path") .filter(function (d) { return `${d.properties.stateVA}` === "Virginia"; }) .attr("d", va_geopath) .attr("fill", (d) => continuousColor(`${d.properties.emi_rank_va}`)) .attr("opacity", 0.8) .attr("stroke", "#103650"); //Adding tooltip code for school data const univText = unis .append("title") .text((d) => `${d.properties.Institution}\n`); univText .append("subtitle") .text( (d) => `EMI Rank in VA: ${d.properties.emi_rank_va}\nEMI Rank Nationally: ${d.properties.emi_rank}\nTotal Undergraduates: ${d.properties.tot_ug}\nControl: ${d.properties.Control}\nCarnegie Classification 2018: ${d.properties.BASIC2018}\nCarnegie Locale: ${d.properties.LOCALE_ABBV}` ); unis .on("mouseover", function () { d3.select(this) .attr("fill", "#EC008B") .attr("stroke-width", 1) .attr("opacity", 1); }) .on("mouseout", function () { d3.select(this) .attr("fill", (d) => continuousColor(`${d.properties.emi_rank_va}`)) .attr("stroke", "#103650") .attr("stroke-width", 1) .attr("opacity", 0.7); }); return svg.node(); }30:T86a,function barchart() { const barWidth = scatter_sq; const barHeight = 50; //outer svg const svg = d3 .create("svg") .attr("width", barWidth + marginbar.left + marginbar.right) .attr("height", barHeight + marginbar.top + marginbar.bottom); const g = svg .append("g") .attr("transform", `translate(${marginbar.left}, ${marginbar.top})`); //x scale (bottom axis) const x = d3 .scaleLinear() .domain([0, d3.max(controlCount.values())]) .range([0, barWidth]) .nice(); //y scale - standard const y = d3 .scaleBand() .domain(control_order) .range([0, barHeight]) .padding(0.2); //Time for axes const xAxis = d3.axisBottom(x); const xAxisGroup = g .append("g") .attr("transform", `translate(0, ${barHeight})`); //gridlines xAxisGroup .call(xAxis) .call((g) => g .selectAll(".tick line") .clone() .attr("stroke", palegrey) .attr("y1", -barHeight) .attr("y2", 0) ); //Y Axis const yAxis = d3.axisLeft(y); const yAxisGroup = g.append("g").call(yAxis); yAxisGroup .append("text") //.attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -margin.left) .attr("y", -margin.top + 5) .attr("fill", "black") .attr("dominant-baseline", "hanging") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Control"); let barsGroup = g.append("g"); function update(data) { const controlCount = d3.rollup( data, (group) => group.length, (d) => d.Control ); const t = svg.transition().ease(d3.easeLinear).duration(100); barsGroup .selectAll("rect") .data(controlCount, ([Control, count]) => Control) .join("rect") .attr("fill", ([Control, count]) => colorFunc(Control)) //.attr("stroke", "black") //.attr("stroke-width", 1) .attr("height", y.bandwidth()) .attr("x", 0) .attr("y", ([Control, count]) => y(Control)) .transition(t) .attr("width", ([Control, count]) => x(count)); } return Object.assign(svg.node(), { update }); }31:T892,function barchart2() { const barWidth = scatter_sq; const barHeight = 75; //outer svg const svg = d3 .create("svg") .attr("width", barWidth + marginbar.left + marginbar.right) .attr("height", barHeight + marginbar.top + marginbar.bottom); const g = svg .append("g") .attr("transform", `translate(${marginbar.left}, ${marginbar.top})`); //x scale (bottom axis) const x = d3 .scaleLinear() .domain([0, d3.max(controlCount.values())]) .range([0, barWidth]) .nice(); //y scale - standard const y = d3 .scaleBand() .domain(locale_order) .range([0, barHeight]) .padding(0.2); //Time for axes const xAxis = d3.axisBottom(x); const xAxisGroup = g .append("g") .attr("transform", `translate(0, ${barHeight})`); //gridlines xAxisGroup .call(xAxis) .call((g) => g .selectAll(".tick line") .clone() .attr("stroke", palegrey) .attr("y1", -barHeight) .attr("y2", 0) ); //Y Axis const yAxis = d3.axisLeft(y); const yAxisGroup = g.append("g").call(yAxis); yAxisGroup .append("text") //.attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -margin.left) .attr("y", -margin.top + 5) .attr("fill", "black") .attr("dominant-baseline", "hanging") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Carnegie Locale"); let barsGroup = g.append("g"); function update(data) { const localeCount = d3.rollup( data, (group) => group.length, (d) => d.LOCALE_ABBV ); const t = svg.transition().ease(d3.easeLinear).duration(100); barsGroup .selectAll("rect") .data(localeCount, ([LOCALE_ABBV, count]) => LOCALE_ABBV) .join("rect") .attr("fill", ([LOCALE_ABBV, count]) => localeColor(LOCALE_ABBV)) //.attr("stroke", "black") //.attr("stroke-width", 1) .attr("height", y.bandwidth()) .attr("x", 0) .attr("y", ([LOCALE_ABBV, count]) => y(LOCALE_ABBV)) .transition(t) .attr("width", ([LOCALE_ABBV, count]) => x(count)); } return Object.assign(svg.node(), { update }); }32:T144e,function brushScatter() { const visWidth = scatter_sq; const visHeight = 250; const xCol = "li_pep_pct", xLabel = "Low Income Price to Earning Ratio"; const yCol = "emi", yLabel = "Economic Mobility Percentile Rank"; const initialValue = schoolData; const svg = d3 .create("svg") .attr("width", visWidth + margin_sc.left + margin_sc.right) .attr("height", visHeight + margin_sc.top + margin_sc.bottom) .property("value", initialValue); const g = svg .append("g") .attr("transform", `translate(${margin_sc.left}, ${margin_sc.top})`); //Scales const x = d3 .scaleLinear() .domain([0, d3.max(schoolData, (d) => d[xCol])]) .nice() .range([0, visWidth]); const y = d3 .scaleLinear() .domain([0, d3.max(schoolData, (d) => d[yCol])]) .nice() .range([visHeight, 0]); //x axis const xAxis = d3.axisBottom(x).tickFormat(format_pct); const xAxisGroup = g .append("g") .attr("transform", `translate(0, ${visHeight})`); //Grid Lines; https://observablehq.com/@d3/connected-scatterplot xAxisGroup .call(xAxis) .call((g) => g .selectAll(".tick line") .clone() .attr("stroke", "lightgrey") .attr("y1", -visHeight) .attr("y2", 0) ) .append("text") .attr("x", visWidth / 2) .attr("y", 26) .attr("fill", "black") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text(xLabel); const yAxis = d3.axisLeft(y).tickFormat(format_pct); const yAxisGroup = g.append("g"); yAxisGroup .call(yAxis) .call((g) => g .selectAll(".tick line") .clone() .attr("stroke", "lightgrey") .attr("x1", 0) .attr("x2", visWidth) ) .append("text") .attr("transform", "rotate(-90)") //Flipping X and Y .attr("x", -1 * (visHeight / 2)) .attr("y", -50) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("font-weight", "bold") .text("Economic Mobility Percentile"); //Adding Brush const brush = d3 .brush() //Size of brush area can't go outside plot .extent([ [0, 0], [visWidth, visHeight] ]) .on("brush", onBrush) .on("end", onEnd); g.append("g").call(brush); //Drawing points const radius = 3; //National Data const dots = svg .append("g") .attr("transform", `translate(${margin_sc.left}, ${margin_sc.top})`) .selectAll("circle") .data(schoolData) .join("circle") .attr("cx", (d) => x(d[xCol])) .attr("cy", (d) => y(d[yCol])) .attr("r", radius) //.attr("opacity", 0.7) .attr("fill", UIpaleDarkCyan) .attr("stroke", "white") .attr("stroke-width", 0.1); //Fill function //VA institutions popout const dotsVA = svg .append("g") .attr("transform", `translate(${margin_sc.left}, ${margin_sc.top})`) .selectAll("circle") .data( schoolData.filter(function (d) { return d.stateVA === "Virginia"; }) ) .join("circle") .attr("cx", (d) => x(d.li_pep_pct)) .attr("cy", (d) => y(d.emi)) .attr("r", 3.5) .attr("fill", (d) => colorFunc(d.Control)) .attr("opacity", 1) .attr("stroke", "black") .attr("stroke-width", 0.5); const dotsVAtext = dotsVA.append("title").text((d) => `${d.Institution}\n`); dotsVAtext .append("subtitle") .text( (d) => `EMI Rank in VA: ${d.emi_rank_va}\nEMI Rank Nationally: ${d.emi_rank}\nTotal Undergraduates: ${d.tot_ug}\nControl: ${d.Control}\nCarnegie Classification 2018: ${d.BASIC2018}\nCarnegie Locale: ${d.LOCALE_ABBV}` ); dotsVA .on("mouseover", function () { d3.select(this) .attr("fill", "#EC008B") .attr("stroke", "black") .attr("stroke-width", 1); }) .on("mouseout", function () { d3.select(this) .attr("fill", (d) => colorFunc(d.Control)) .attr("stroke", "black") .attr("stroke-width", 0.5); }); //Event gives the coordinates of the brush box function onBrush(event) { const [[x1, y1], [x2, y2]] = event.selection; //True if dot in brush box, false otherwise function isBrushed(d) { const cx = x(d[xCol]); const cy = y(d[yCol]); return cx >= x1 && cx <= x2 && cy >= y1 && cy <= y2; } //Dot color dots.attr("fill", (d) => (isBrushed(d) ? UIpaleCyan : palegrey)); dotsVA .attr("fill", (d) => isBrushed(d) ? colorFunc(d.Control) : colorFunc(d.Control) ) .attr("opacity", (d) => (isBrushed(d) ? 1 : 0.5)) .attr("stroke-width", (d) => (isBrushed(d) ? 1 : 0)) .attr("stroke", (d) => (isBrushed ? "black" : palegrey)); //Updating the bar chart (I hope) svg.property("value", schoolData.filter(isBrushed)).dispatch("input"); } //Finishing the Brushing function onEnd(event) { if (event.selection === null) { dots.attr("fill", UIpaleDarkCyan); dotsVA .attr("stroke-width", 0.5) .attr("stroke", "black") .attr("opacity", 1) .attr("fill", (d) => colorFunc(d.Control)); svg.property("value", initialValue).dispatch("input"); } } return svg.node(); }33:[{"id":"90650af066220ef53643cac32e5bbb290c0d6becbe9ba2a83df7d721913fc6016fc4791b837761e0be4bfffb11ba15976c0742984c2b4bad6ce6e6e366c87427","href":"https://static.observableusercontent.com/files/90650af066220ef53643cac32e5bbb290c0d6becbe9ba2a83df7d721913fc6016fc4791b837761e0be4bfffb11ba15976c0742984c2b4bad6ce6e6e366c87427","name":"Carnegie_VA-EMI_CSV.geojson","type":"application/geo+json","lastModified":1649711132058.592,"size":26672},{"id":"d7e9b8523b72a4c6ba3141230e3449869db3ebf6b104d969c0628452cfe2937ce66a4a6c54b8f5d421e30b4dbe34f743c18af8d3816d5ce9f09c39a6de31f21d","href":"https://static.observableusercontent.com/files/d7e9b8523b72a4c6ba3141230e3449869db3ebf6b104d969c0628452cfe2937ce66a4a6c54b8f5d421e30b4dbe34f743c18af8d3816d5ce9f09c39a6de31f21d","name":"Virginia City_County Boundaries.geojson","type":"application/geo+json","lastModified":1649711132058.592,"size":13256482},{"id":"991aa36adc610e9c7b04868d082315ffaba1f925b83bdea250a3c0abbe16d3a6c14bb197d818fc985caa6daef46c30325acf821f412638a48c971175aa3362f3","href":"https://static.observableusercontent.com/files/991aa36adc610e9c7b04868d082315ffaba1f925b83bdea250a3c0abbe16d3a6c14bb197d818fc985caa6daef46c30325acf821f412638a48c971175aa3362f3","name":"LongLatEMIall@2.csv","type":"text/csv","lastModified":1649774863855.305,"size":286989},{"id":"250ceefe14baf6aaf1d74cb2b9f1fe99adef1965090604bf30b09894329dc3bdf2126d03a68f912f51d2f81e709b38737151fb1a70801a23e1c4cb498aafc5b9","href":"https://static.observableusercontent.com/files/250ceefe14baf6aaf1d74cb2b9f1fe99adef1965090604bf30b09894329dc3bdf2126d03a68f912f51d2f81e709b38737151fb1a70801a23e1c4cb498aafc5b9","name":"LongLatEMIall@3.geojson","type":"application/geo+json","lastModified":1649775682818.168,"size":961723}] 2d:{"id":"1252795f253edb2b","slug":"cs-725-final-dashboard","title":"CS 725 Final Dashboard","thumbnail":"94b2c317b8f8abe1f3c6d6954b588b22d57215334b48eca8018fdb36f5f23ee9","access_level":"unlisted","create_time":"$D2022-04-11T21:05:32.058Z","update_time":"$D2023-10-21T23:12:07.605Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"081d6eda562d1069","login":"kcossey","name":"Kimberley Cossey","avatar_url":"https://avatars-next.observableusercontent.com/560bc59f97051d463180020d64e26a78b1d9a3dbc1e763aa310996094c590f28","tier":"starter_2024"},"version":840,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9e4a4057ba34720","login":"kcossey","name":"Kimberley Cossey","avatar_url":"https://avatars-next.observableusercontent.com/560bc59f97051d463180020d64e26a78b1d9a3dbc1e763aa310996094c590f28","tier":null}],"members":[{"type":"individual","id":"d9e4a4057ba34720","login":"kcossey","name":"Kimberley Cossey","avatar_url":"https://avatars-next.observableusercontent.com/560bc59f97051d463180020d64e26a78b1d9a3dbc1e763aa310996094c590f28","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"CS 725 Final Dashboard","cells":[{"id":790,"value":"# CS 725 Final Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":0,"value":"### Virginia Universities and Their Performance on Third Way's Economic Mobility Index","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":139,"value":"In February 2023, Third Way published the [Economic Mobility Index (EMI)](https://www.thirdway.org/report/out-with-the-old-in-with-the-new-rating-higher-ed-by-economic-mobility). The EMI ranks universities by the economic mobility of their low-income graduates. Explore how universities in Virginia perform on the EMI compared to their national counterparts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":141,"value":"dashboard = {\n const bar = barchart();\n const bar2 = barchart2();\n const map = va_school_map;\n const splot = brushScatter();\n const mapLegend = Legend(d3.scaleSequential([1, 35], d3.interpolateCividis), {\n title: \"Map Scale: EMI Rank in Virginia\"\n });\n \n\n d3.select(splot).on(\"input\", () => {\n bar.update(splot.value);\n bar2.update(splot.value);\n });\n\n bar.update(splot.value);\n bar2.update(splot.value);\n\n let dash = html`

${bar}
${bar2}
${splot}

${map}
${mapLegend}

`;\n return dash;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":117,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"### Barchart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":126,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"### Scatter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":215,"value":"scatter_sq = width * 0.4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"counties = FileAttachment(\"Virginia City_County Boundaries.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"schools = FileAttachment(\"Carnegie_VA-EMI_CSV.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"//emi_us = FileAttachment(\"emi_national_state.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"//Fix `emi_us` column data types\n//emi_us.forEach((d) => {\n //(d.emi = +d.emi),\n //(d.p_earning = +d.p_earning),\n //(d.li_pep_pct = +d.li_pep_pct),\n //(d.pct_pell = +d.pct_pell);\n//})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"all_geojson = FileAttachment(\"LongLatEMIall@3.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"all_emi_loc = FileAttachment(\"LongLatEMIall@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"//Fixing new datatypes\n\nall_emi_loc.forEach((d) => {\n (d.emi = +d.emi),\n (d.p_earning = +d.p_earning),\n (d.Longitude = +d.Longitude),\n (d.Latitude = +d.Latitude),\n (d.li_pep_pct = +d.li_pep_pct),\n (d.tot_ug = +d.tot_ug),\n (d.pct_pell = +d.pct_pell);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"### Additional Functions & objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":658,"value":"//viewof colorScheme = Inputs.radio(\n //new Map([\n // [\"Control of Institution\", colorFunc()],\n// [\"Carnegie Locale Code\", localeColor()]\n// ]),\n// {\n // value: localeColor(),\n// label: \"Select Scatterplot Color Scheme:\"\n// }\n//)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"//function clicked(event, d) {\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"//Projection for the map\nstateProjection = d3\n .geoAlbers()\n .scale(5500)\n .rotate([80.5, 0])\n .center([0, 38])\n .translate([width / 4, height / 3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"//Path generator - turns latitude/longitude into screen coordinates\nva_geopath = d3.geoPath().projection(stateProjection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"format_pct = d3.format(\".0%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"emiColor = d3.scaleOrdinal().range([UIpaleCyan, \"#EC008B\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"colorScatter = d3.scaleOrdinal().range([UIpaleDarkCyan, \"#EC008B\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"VAscatter = d3.scaleOrdinal().range([\"palegrey\", \"#eb99c2\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"UIpaleCyan = d3.color(\"rgba(22, 150, 210, 0.3)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"UIpaleDarkCyan = d3.color(\"rgba(18, 113, 158, 0.2)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"palesteel = d3.color(\"rgba(70, 130, 180, 0.3)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"palegrey = d3.color(\"rgba(211, 211, 211, 0.3)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"schoolData = d3\n .groups(all_geojson.features, (d) => d.properties.Institution)\n .map(([, [{ properties }]]) => properties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"columns = Object.keys(schoolData[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"viewof emi_univ = brushScatter()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"controlCount = d3.rollup(\n schoolData,\n (group) => group.length,\n (d) => d.Control\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"control_order = [\"Private, non-profit\", \"Public\", \"For-profit\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"localeCount = d3.rollup(\n schoolData,\n (group) => group.length,\n (d) => d.LOCALE_ABBV\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"locale_order = [\"City\", \"Suburb\", \"Town\", \"Rural\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"colorFunc = d3\n .scaleOrdinal()\n .domain(control_order)\n .range([\"#1696d2\", \"#FDBF11\", \"#CFE8F3\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"localeColor = d3\n .scaleOrdinal()\n .domain(locale_order)\n .range([\"#0a4c6a\", \"#e88e2d\", \"#98cf90\", \"#d5d5d4\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"emi_rank_vaRange = d3.extent(schoolData, (d) => d.emi_rank_va)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"continuousColor = d3\n .scaleSequential(d3.interpolateCividis)\n .domain(emi_rank_vaRange)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"Urban institute style guide: http://urbaninstitute.github.io/graphics-styleguide/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"### Values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":64,"value":"width = 940","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"margin = ({ top: 20, bottom: 75, left: 30, right: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"marginbar = ({ top: 20, bottom: 20, left: 100, right: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"margin_sc = ({ top: 10, bottom: 80, left: 80, right: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"totalWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"totalHeight = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"barWidth = 940","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"barHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"scat_width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"scat_height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":24,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"import { printTable } from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"import { inputsGroup } from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"import { visualizeTicks } from \"@d3/continuous-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body" 29:E{"digest":"NEXT_REDIRECT;replace;/@kcossey/cs-725-final-dashboard;307;"}