Published
Edited
Apr 7, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("CLASS.csv").csv({ typed: true })
Insert cell
viewof table = Inputs.table(data, {})
Insert cell
var_x = "Height"
Insert cell
var_y = "Weight"
Insert cell
Insert cell
xScale = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d[var_x]))
.range([0, dms.boundedWidth])
Insert cell
yScale = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d[var_y]))
.range([dms.boundedHeight, 0])
Insert cell
Insert cell
xAxis = d3.axisBottom(xScale).ticks(15)
Insert cell
yAxis = d3.axisLeft(yScale).ticks(15)
Insert cell
function drawAxes(bounds) {
bounds
.append("g")
.attr("transform", move(0, dms.boundedHeight))
.call(xAxis)
.attr("color", "grey");
bounds.append("g").call(yAxis)
.attr("color", "grey");
}
Insert cell
Insert cell
function drawMarks(bounds, data) {
bounds
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => xScale(d[var_x]))
.attr("cy", (d) => yScale(d[var_y]))
.attr("r", 6)
.attr("fill", "darkred")
.attr("opacity", 0.9);

/* bounds
.append("path")
.datum(aq.from(data).orderby(var_x).objects())
.attr("fill", "none")
.attr("stroke", "darkblue")
.attr("stroke-width", 2.5)
.attr(
"d",
d3
.line()
.x((d) => xScale(d[var_x]))
.y((d) => yScale(d[var_y]))
); */
}
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.select("#chart");
svg.selectAll("*").remove();
// clean all the eventual old/unwanted marks
svg.attr("viewBox", [-30, -10, dms.width, dms.height]);

drawAxes(svg);
drawMarks(svg, data);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data[1][var_x]
Insert cell
data[1][var_y]
Insert cell
xScale(data[1][var_x])
Insert cell
yScale(data[1][var_y])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more