UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = FileAttachment("heart.csv").csv()
series = d3.stack().keys(newData.columns.slice(1))(newData)
grouped = d3.rollup(data, v => d3.count(v, d => d["cp"]), d => +d["cp"])
y = d3
.scaleLinear()
.domain([0, d3.max(grouped, d => d[1])])
.range([height - margin.bottom, margin.top])
x = d3
.scaleLinear()
.domain([d3.min(data, d => +d["cp"]), d3.max(data, d => +d["cp"]) + 1])
.range([margin.left, width - margin.right])
yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(5))
sales = FileAttachment("sales.csv").csv()
d3.map(sales, d => {
return d["Year"], d["NA_Sales"];
})
ySales = d3
.scaleLinear()
.domain([
0,
d3.max(
[
d3.max(sales, d => +d["Global_Sales"]),
d3.max(sales, d => +d["NA_Sales"])
],
d => d
)
])
.range([height - margin.bottom, margin.top])
xSales = d3
.scaleLinear()
.domain([d3.min(sales, d => +d["Year"]), d3.max(sales, d => +d["Year"])])
.range([margin.left, width - margin.right])
yAxisSales = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(ySales))
xAxisSales = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xSales).tickFormat(d3.format("")))
import {
displayCaution,
assignment_instructions,
observable_challenges
} from "@uw-info474/utilities"
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.
