Public
Edited
Jan 26, 2024
3 forks
iris = d3.csvParse(await FileAttachment("iris-1.csv").text(), d3.autoType)
margin = {
return {top: 50, right: 120, bottom: 50, left: 120};
}
visWidth = 400;
visHeight = 400;
x = d3.scaleLinear()
.domain(d3.extent(iris, d => d["sepal-length"])).nice()
.range([0, visWidth]);
y = d3.scaleLinear()
.domain(d3.extent(iris, d => d["sepal-width"])).nice()
.range([visHeight, 0]);
xAxis = d3.axisBottom(x);
yAxis = d3.axisLeft(y);
classes = //TO DO
irisColor = //TO DO
{
//create SVG
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// add title
g.append("text")
.attr("x", visWidth / 2)
.attr("y", -margin.top + 5)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "hanging")
.attr("font-family", "sans-serif")
.attr("font-size", "16px")
.text("sepal length vs. sepal width");
// add axes
g.append("g")
// move to bottom of chart
.attr("transform", `translate(0, ${visHeight})`)
// add axis
.call(xAxis)
// remove baseline from axis
.call(g => g.select(".domain").remove())
// add grid lines
// refernces https://observablehq.com/@d3/connected-scatterplot
.call(g => g.selectAll('.tick line')
.clone()
.attr('stroke', '#d3d3d3')
.attr('y1', -visHeight)
.attr('y2', 0))
// add title
.append("text")
.attr("x", visWidth / 2)
.attr("y", 40)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("sepal length (cm)");
g.append("g")
// add axis
.call(yAxis)
// remove baseline from axis
.call(g => g.select(".domain").remove())
// add grid lines
// refernces https://observablehq.com/@d3/connected-scatterplot
.call(g => g.selectAll('.tick line')
.clone()
.attr('stroke', '#d3d3d3')
.attr('x1', 0)
.attr('x2', visWidth))
// add title
.append("text")
.attr("x", -40)
.attr("y", visHeight / 2)
.attr("fill", "black")
.attr("dominant-baseline", "middle")
.text("sepal width (cm)");
// draw points
g.append("g")
.selectAll("circle")
.data(//TO DO) //Hint: look at how the bars are drawn in https://observablehq.com/@nyuvis/bar-chart-walk-through
.join("circle")
.attr("cx", //TO DO)
.attr("cy", //TO DO)
.attr("fill", //TO DO)
.attr("r", 3);
return svg.node(); //this line is what actually displays the visualization in the notebook
}
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.
