{
const svg = d3
.create("svg")
.attr("width", 1000)
.attr("height", 200)
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const myColorTwoValues = d3
.scaleLinear()
.domain([1,10])
.range(["white", "blue"])
svg
.selectAll()
.data(data)
.join("circle")
.attr("cx", (d, i) => 30 + i*60)
.attr("cy", 50)
.attr("r", 19)
.attr("fill", d => myColorTwoValues(d))
const myColorSequential = d3
.scaleSequential()
.domain([1,10])
.interpolator(d3.interpolatePuRd)
svg
.selectAll()
.data(data)
.join("circle")
.attr("cx", (d,i) => 30 + i*60)
.attr("cy", 150)
.attr("r", 19)
.attr("fill", d => myColorSequential(d))
return svg.node()
}