Public
Edited
Jan 29, 2023
iris = FileAttachment("iris@2.csv").csv().then((d) => {
d.forEach(e => {
e.sepal_length = +e.sepal_length
e.sepal_width = +e.sepal_width
})
return d
})
Inputs.table(iris)
{
const height = 300
const svg = d3.create("svg")
.attr("viewBox", [-300, 0, width, height]);
let data = iris
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const h = 300 - margin.top - margin.bottom
const w = height - margin.left - margin.right
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.sepal_length)])
.range([margin.top + 20, h + 100])
const y = d3.scaleLinear()
.domain([d3.max(data, d => d.sepal_width), 0])
.range([height - margin.bottom , margin.top ])
// const x = d3.scaleLinear()
// .domain([d3.min(data, d => d.sepal_length),
// d3.max(data, d => d.sepal_length)])
// .range([margin.top, h])
// const y = d3.scaleLinear()
// .domain([d3.min(data, d => d.sepal_width),
// d3.max(data, d => d.sepal_width)])
// .range([margin.left, w])
const color = d3.scaleOrdinal(d3.schemeCategory10)
svg.selectAll("#circle")
.data(data)
.enter()
.append("circle")
.attr("id","circle")
.attr("cx", d => x(d.sepal_length))
.attr("cy", d => y(d.sepal_width))
.attr("fill", d => color(d.species))
.attr("r", 2)
svg.selectAll("rect").data(color.domain())
.enter()
.append("rect")
.attr("x", 500)
.attr("y", (d, i) => 10 + i * 20)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => color(d))
svg.selectAll("text").data(color.domain())
.enter()
.append("text")
.attr("x", 410)
.attr("y", (d, i) => 20 + i * 20)
.text(d => d)
const xAxis = g => g
.attr("transform", `translate(0, ${h + 20})`)
.call(d3.axisBottom(x))
const yAxis = g => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
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.
