d3 multiple circles per tick from grouped data array - d3.js

Question

I'm trying to learn d3 very quickly and I'm getting pretty stuck on selection and joining.
I want to be able to draw an axis with dots for each member of an array. Some of the array members have the same x value, but I still want to see as many dots as there are with that value. My array (in React with useState) looks like so:
const [data, setData] = useState(
[
{x: 2020, colour: "purple", y1: 0.001, y2: 0.63},
{x: 2027, colour: "red", y1: 0.003, y2: 0.84},
{x: 2031, colour: "yellow", y1: 0.024, y2: 0.56},
{x: 2031, colour: "green", y1: 0.054, y2: 0.22},
{x: 2040, colour: "blue", y1: 0.062, y2: 0.15},
{x: 2050, colour: "orange", y1: 0.062, y2: 0.15}
]
);
You can see there are two values for 2031 and I want to draw a yellow dot, then a purple dot below, at the x axis tick labelled "2031".
So I group my data with this reduce function (purloined from SO):
const dot = data.reduce(
(r, v, _, __, k = v.x) => ((r[k] || (r[k] = [])).push(v), r),
{}
);
...which produces this:
{ 2020: [{x: 2020, colour: "purple", y1: 0.001, y2: 0.63}],
2027: [...] }
I initiate my x axis and create a placeholder for it:
const g = d3.axisBottom( scX ).tickValues(
data.map(d => {
return d.x
})
)
svg.append( "g" )
.attr( "transform", "translate(" + 25 + "," + pxY/2 + ")")
.call( g )
.selectAll(".tick")
And then I want to call my dot variable and iterate over the nested arrays:
svg
.selectAll(".tick")
.call( dot )
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", dot.colour)
What I would like this to do is draw a circle for every one of the nested arrays, with a fill the colour named in that array - this does not work?
Could anyone explain?

Answer 1

There is no need to group your data. You can just see data as an array, where every element will correspond to one circle. Multiple circles can exist with the same x-value, nothing enforces that they can't.
There is also no need to set the axis ticks like that, d3 will most likely do everything for you. d3-axis is an absolute convenience - you're meant to tweak the defaults, not build everything from scratch here.
You need to learn about data joins, since you apparently also don't know that you can access the data of an element using function(d, i) { ... } or (d, i) => ... to set the colour that way.
const data = [{
x: 2020,
colour: "purple",
y1: 0.001,
y2: 0.63
},
{
x: 2027,
colour: "red",
y1: 0.003,
y2: 0.84
},
{
x: 2031,
colour: "yellow",
y1: 0.024,
y2: 0.56
},
{
x: 2031,
colour: "green",
y1: 0.054,
y2: 0.22
},
{
x: 2040,
colour: "blue",
y1: 0.062,
y2: 0.15
},
{
x: 2050,
colour: "orange",
y1: 0.062,
y2: 0.15
}
];
const width = 600,
height = 300;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d.x))
.range([50, 550]);
const y1 = d3.scaleLinear()
.domain(d3.extent(data, d => d.y1))
.range([275, 25]);
const y2 = d3.scaleLinear()
.domain(d3.extent(data, d => d.y2))
.range([3, 10]);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("fill", d => d.colour)
.attr("cx", d => x(d.x))
.attr("cy", d => y1(d.y1))
.attr("r", d => y2(d.y2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>