Published
Edited
Aug 12, 2021
1 star
penguins = FileAttachment("palmer-penguins.csv").csv({typed: true})
xExtent = d3.extent(penguins, d => d.bill_length)
yExtent = d3.extent(penguins, d => d.bill_depth)
xScale = d3.scaleLinear().domain(xExtent).range([10, 290])
yScale = d3.scaleLinear().domain(yExtent).range([290, 10])
{
const svg = d3.create("svg").attr("width", 300).attr("height", 300);
svg.selectAll("circle")
.data(penguins)
.join(enter => {
enter.append("circle")
.attr("r", 2)
.attr("fill", "black")
.attr("cx", d => xScale(d.bill_length))
.attr("cy", d => yScale(d.bill_depth))
});
return svg.node();
}
penguinCols
xColExtent = d3.extent(penguinCols.bill_length);
yColExtent = d3.extent(penguinCols.bill_depth);
{
const svg = d3.create("svg").attr("width", 300).attr("height", 300);
svg.selectAll("circle")
.data(d3.range(penguinCols.bill_length.length))
.join(enter => {
enter.append("circle")
.attr("r", 2)
.attr("fill", "black")
.attr("cx", ix => xScale(penguinCols.bill_length[ix]))
.attr("cy", ix => yScale(penguinCols.bill_depth[ix]))
});
return svg.node();
}
{
const svg = d3.create("svg").attr("width", 300).attr("height", 300);
svg.selectAll("circle")
.data(d3.range(penguinCols.bill_length.length).map(ix => [penguinCols, ix]))
.join(enter => {
enter.append("circle")
.attr("r", 2)
.attr("fill", "black")
.attr("cx", ([data, ix]) => xScale(data.bill_length[ix]))
.attr("cy", ([data, ix]) => yScale(data.bill_depth[ix]))
});
return svg.node();
}
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.
