UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = FileAttachment("usschool@3.csv").csv()
chart_data = data
.filter(d => +d[x_variable] >= min_armspan)
.map(d => {
return { x: +d[x_variable], y: +d[y_variable], color: d[color_variable] };
})
margin = ({ top: 50, right: 50, bottom: 50, left: 50 })
height = 750
width = 1000
x_scale = d3
.scaleLinear()
.domain([d3.min(chart_data, d => d["x"]), d3.max(chart_data, d => d["x"])])
.range([margin.left, width - margin.right])
y_scale = d3
.scaleLinear()
.domain([y_min, y_max])
.range([height - margin.bottom, margin.top])
x_axis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x_scale))
y_axis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y_scale))
swatches({
color: d3.scaleOrdinal(colorValue, ["blue", "red"])
})
x_y_axis = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(x_axis);
svg.append("g").call(y_axis);
return svg.node();
}
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(x_axis);
svg.append("g").call(y_axis);
svg
.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height - 10)
.text("Arm Span in CM");
svg
.append("text")
.attr("text-anchor", "end")
.attr("x", -height / 2.5)
.attr("y", 15)
.attr("transform", "rotate(-90)")
.text("Height in CM");
svg
.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", margin.top - 5)
.text("Arm Span vs Height in Genders");
const circles = svg.selectAll('circle').data(chart_data);
circles
.join(
enter =>
enter
.append("circle")
.attr("cx", d => x_scale(d['x']))
.attr("cy", d => y_scale(d['y'])),
update => update,
exit =>
exit
.transition()
.duration(500)
.attr("r", 0)
.remove()
)
.attr('cx', d => x_scale(0))
.attr('cy', d => y_scale(0))
.attr('r', 10)
.style('fill', d => {
if (d["color"] === "Female") {
return "red";
} else {
return "blue";
}
})
.style('opacity', 0.6)
.transition()
.duration(500)
.attr('cx', d => x_scale(d['x']))
.attr('cy', d => y_scale(d['y']));
return svg.node();
}
import {
assignment_instructions,
observable_challenges
} from "@uw-info474/utilities"
import { swatches } from "@d3/color-legend"
import { slider } from "@jashkenas/inputs"
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.
