svg = {
const svg = html`<svg id = "svg"></svg>`
const container = d3.select(svg)
//Making the x-axis
const xScale = d3.scaleLinear().domain([0,10]).range([30,570])
const xAxis = container.append("g").attr("transform","translate(0,270)")
d3.axisBottom(xScale)(xAxis)
//Making the y-axis
const yScale = d3.scaleLinear().domain([0,10]).range([270,30])
const yAxis = container.append("g").attr("transform","translate(30,0)")
d3.axisLeft(yScale)(yAxis)
for(let i = 0; i < 10; i = i + 1){
const x = Math.random()*10
const y = Math.random()*10
container.append("circle")
.attr("r",5)
.attr("cx",xScale(x))
.attr("cy",yScale(y))
}
return svg
}
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.
