Insert cell
Insert cell
Insert cell
x=d3.scaleLinear().range([0,width-margin.left-margin.right])
.domain([10,100]).nice()
Insert cell
y=d3.scaleLinear().range([height-margin.top-margin.bottom,0])
.domain(d3.extent(data.map(d=>d.density)))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
margin = ({top: 20, right: 20, bottom: 50, left: 70})
Insert cell
d3=require("d3@6")
Insert cell
d3Legend = require('d3-svg-legend')
Insert cell
yAxis = (text,scale)=>g => g
.attr("transform", `translate(${margin.left-5},${margin.top})`)
.attr("class","axis y")
.call(d3.axisLeft(scale).ticks())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 20)
.classed("axis-label",true)
.attr("id","y-axis-label")
.attr("text-anchor", "start")
.attr("font-family", "sans-serif")
.text(text))
Insert cell
xAxis = (text,scale)=>g => g
.attr("transform", `translate(${margin.left},${height-margin.bottom+5})`)
.call(d3.axisBottom(scale).ticks(10))
.call(g => g.append("text")
.classed("axis-label",true)
.attr("fill","currentColor")
.attr("y", 40)
.attr("x",((width-margin.right-margin.left)/2))
.attr("text-anchor", "middle")
.text(text))
Insert cell

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.
Learn more