svg = {
const svg = html`<svg id = "svg"></svg>`
const container = d3.select(svg)
//Making the X Axis
const xScale = d3.scaleLinear().domain([-5,5]).range([30,570])
const xAxis = container.append("g").attr("transform", "translate(0,150)")
d3.axisBottom(xScale)(xAxis)
//Making the Y Axis
const yScale = d3.scaleLinear().domain([-50,50]).range([270,0])
const yAxis = container.append("g").attr("transform", "translate(300,15)")
d3.axisLeft(yScale)(yAxis)
for(let i = 0; i < 5; i = i + 1){
const x = Math.random()*5
const y = Math.random()*5
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.
