UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
df = FileAttachment('heart.csv').csv()
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([d3.min(chart_data, d => d["y"]), d3.max(chart_data, d => d["y"])])
.range([height - margin.bottom, margin.top])
color_scale = d3
.scaleLinear()
.domain(_.uniqBy(chart_data.map(d => d["color"])))
.range([margin.left, width - margin.right])
x_scale(77)
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
const y_axis = d3
.axisLeft()
.scale(y_scale)
.ticks(4, "f");
svg
.append('g')
.call(y_axis)
.attr('transform', 'translate(' + margin.left + ', 0)');
const x_axis = d3.axisBottom().scale(x_scale);
svg
.append('g')
.call(x_axis)
.attr('transform', 'translate(0, ' + (height - margin.bottom) + ')');
svg
.append("text")
.attr("text-anchor", "end")
.attr("x", width - margin.right)
.attr("y", height - margin.top)
.text("Age");
svg
.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", margin.top - 20)
.text("Resting Blood Pressure by Age & Gender");
svg
.append("text")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("y", margin.left - 30)
.attr("x", -margin.left)
.text("Resting Blood Pressure");
const dots = svg
.append('g')
.selectAll('dot')
.data(chart_data)
.enter()
.append('circle')
.attr('cx', d => x_scale(0))
.attr('cy', d => y_scale(0))
.attr('r', 4)
.style('fill', d => {
if (d["color"] === "male") {
return "blue";
} else {
return "orange";
}
})
.style('opacity', 0.4)
.transition()
.duration(500)
.attr('cx', d => x_scale(d['x']))
.attr('cy', d => y_scale(d['y']));
return svg.node();
}
width = 600
height = 400
margin = ({ top: 50, right: 10, bottom: 100, left: 50 })
import {
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.
