UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3.csvParse(await FileAttachment("cereal.csv").text(), d3.autoType)
render_data_table(data.slice(0, 10))
cereal = data.map(data => {
return {
x: +data['sugars'],
y: +data['rating'],
color: data['mfr'],
name: data['name'],
cal: +data['calories']
};
})
render_data_table(cereal.slice(0, 10))
XD = [
d3.min(data, d => d.sugars),
d3.max(data, d => d.sugars)
]
YD = [
d3.min(data, d => d.rating),
d3.max(data, d => d.rating)
]
x = d3
.scaleLinear()
.domain(XD)
.range([margin.left, width - margin.right])
.nice()
y = d3
.scaleLinear()
.domain(YD)
.range([height - margin.bottom, margin.top])
.nice()
z = d3.scaleOrdinal(
[`N`, `Q`, `K`, `R`, `P`],
[`red`, `yellow`, `green`, `blue`, `purple`]
)
barX = d3
.scaleBand()
.domain(cereal.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
barYDomain = [d3.min(cereal, d => d.cal), d3.max(cereal, d => d.cal)]
barY = d3
.scaleLinear()
.domain(barYDomain)
.range([height - margin.bottom, margin.top])
.nice()
barxAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(barX).tickSizeOuter(0))
baryAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(barY))
.call(g => g.select(".domain").remove())
xa1 = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
ya1 = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
chart1 = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
//xaxis
svg
.append("g")
.attr("class", "x-axis")
.call(xa1);
//yaxis
svg
.append("g")
.attr("class", "y-axis")
.call(ya1);
//title
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(500,20)")
.style("text-anchor", "middle")
.style("font-size", "25px")
.style("font-weight", "bold")
.text("Sugar vs Rating");
//y lab
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(500,500)")
.style("text-anchor", "middle")
.style("font-size", "12px")
.style("font-weight", "bold")
.text("Sugar");
//x lab
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(8,220) rotate(-90)")
.style("text-anchor", "middle")
.style("font-size", "12px")
.style("font-weight", "bold")
.text("Rating");
svg
.selectAll("circle")
.data(cereal)
.join("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5)
.style("fill", d => z(d.color));
svg
.selectAll("circle")
.transition()
.duration(2000)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y));
svg
.append("g")
.attr("transform", "translate(35,20)")
.append(() =>
legend({
color: z,
width: width - 2 * (margin.left + margin.right),
title: ""
})
);
return svg.node();
}
barChart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// title!
svg
.append("text")
.attr("x", width / 2)
.attr("y", 30)
.attr("text-anchor", "middle")
.style("font-size", "22px")
.style("text-decoration", "underline")
.text("Calories by Cereal");
// x-axis label
svg
.append("text")
.attr("x", width / 2)
.attr("y", height - 3)
.style("font-size", "16px")
.style("text-anchor", "middle")
.text("Cereal Name");
//Create Y axis label
svg
.append("text")
.attr("x", (height / 2) * -1)
.attr("y", margin.left - 27)
.style("text-anchor", "middle")
.style("font-size", "16px")
.attr("transform", "rotate(-90)")
.text("Calories");
svg
.append("g")
.attr("class", "bars")
.attr("fill", "steelblue")
.selectAll("rect")
.data(cereal)
.join("rect")
.attr("x", d => barX(d.name))
.attr("y", d => barY(d.cal))
.attr("height", d => barY(0) - barY(d.cal))
.attr("width", barX.bandwidth());
svg
.append("g")
.attr("class", "x-axis")
.call(barxAxis)
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("font-size", "5px")
.style("text-anchor", "end");
svg
.append("g")
.attr("class", "y-axis")
.call(baryAxis);
return svg.node();
}
import { render_data_table, table_styles } from "@info474/utilities"
margin = ({ top: 25, right: 20, bottom: 35, left: 40 })
height = 500
import { 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.
