UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Jun 7, 2020
Importers
render_data_table(acceptance_data.slice(0, 10))
diversity_data = d3.csvParse(
await FileAttachment("diversity_school.csv").text(),
d3.autoType
)
render_data_table(diversity_data.slice(0, 10))
search_data = {
if (search == "") {
return diversity_data;
} else {
return diversity_data.filter(d => d.name == search);
}
}
total_diversity_data = {
const results = {};
search_data.forEach(d => {
if (d.category in results) {
results[d.category].enrollment += d.enrollment;
} else {
results[d.category] = {
category: d.category,
enrollment: d.enrollment
};
}
});
const final_results = [];
for (const cat in results) {
final_results.push({
category: results[cat].category,
enrollment: results[cat].enrollment
});
}
return final_results;
}
filtered_diversity_data = total_diversity_data.filter(
d => d.category !== "Women" && d.category !== "Non-Resident Foreign"
// d.category !== "Total Minority"
)
diversity_x_scale = d3
.scaleLinear()
.domain([0, d3.max(filtered_diversity_data, d => d.enrollment)])
.range([0, width - 250])
diversity_y_scale = d3
.scaleBand()
.domain(filtered_diversity_data.map(d => d.category))
.range([height - margin.bottom, margin.top])
diversity_x_axis = g =>
g
.attr(
"transform",
`translate(${margin.left + 120}, ${height - margin.bottom})`
)
.call(d3.axisBottom(diversity_x_scale))
diversity_y_axis = g =>
g
.attr("transform", `translate(${margin.left + 120},0)`)
.call(d3.axisLeft(diversity_y_scale))
md`In this graph we can see number of enrollments of United States Universities based on the ethnicities of each student. We can see that a majority of students are white, and only a small group of students are Native Hawaiian / Pacific Islander. We can see by looking at the total minority bar that white students make up more of the student population than all of the minorities combined. The number of enrollments vary between schools, but a many schools have a predominantly white population. `
// sample_size = {
// num_universities;
// return num_universities;
// }
// viewof num_universities = slider({
// min: 20,
// max: 100,
// step: 1,
// value: 50,
// title: "Number of Random Universities to Display",
// description: "Integers from 20 to 100"
// })
// colorLegend()
chart1 = {
const svg = d3
.create("svg")
.attr("viewBox", [-50, -50, width + 100, height + 100]);
svg.append("g").call(xAxis1);
svg.append("g").call(yAxis1);
svg.append("g").attr("transform", "translate(700,390)");
svg
.append("text")
.attr("class", "x label")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height + 30)
.text("Average SAT Score (Out of 1600)");
svg
.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", -height / 2.75)
.attr("y", 6)
.attr("transform", "rotate(-90)")
.text("Acceptance Rate (%)");
svg
.append("text")
.text(
"Average Accepted SAT Score Vs Acceptance Rate of Universities in USA"
)
.style("text-anchor", "middle")
.attr("transform", `translate(${width / 2}, 0)`)
.style("font-size", "1.3em");
svg
.selectAll("circle")
.data(search_university)
.join(enter => enter.append("circle"))
.transition()
.duration(2000)
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr("fill", d => colorScale(d.color))
.style("opacity", 0.7)
.attr("r", 2);
return svg.node();
}
md`## Relationships Between Variables
In this graph we can see the average SAT score of an accepted student Vs Acceptance Rate of Universities in USA. The basic trend of the graph is as the acceptance rate of universities increases their average SAT score decreases This shows that if a student want to get into a university with a lower acceptance rate they have to score better on their SAT/ACT exam. In our final project we are taking diversity in the education sector as a topic. This chart will be the building block for our final project as we will compare the SAT and ACT scores for different ethnicities.`
import { us } from '@d3/bubble-map'
import { legend } from "@d3/color-legend"
color_scale = d3.scaleSequential(
d3.extent(datacvc, d => d.enrollment),
d3.interpolateReds
)
path = d3.geoPath()
color = d3.scaleQuantize([1, 10], d3.schemeBlues[9])
lodash = require('lodash')
topojson = require("topojson-client@3")
d3 = require('d3@5')
margin = ({ top: 30, right: 0, bottom: 50, left: 80 })
height = 500
import { autoSelect, select } from "@jashkenas/inputs"
import { swatches, legend } from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
