Hello! So been using Plot for a while but have finally run into something I couldn’t figure out.
I’ve got a dataset where the shape looks like:
[
{
type: 'data1',
date: [date object],
data: 2.2389035674,
},
{
type: 'data2',
date: [date object],
data: 114.377462020
},
... more data points
]
where there’s two types of data that I’m creating a separate Y-axis for. I’m creating the Y Axis like so:
const data2YAxis = customYAxis(data, {
y: 'data2',
anchor: 'right',
color: 'gray',
ticks: getYAxisTicks(diffDays),
tickFormat: (d) => `${d.toFixed(2)} x-1`
})
/// helpers.ts
export const customYAxis = (data, { y, ticks = 12, tickFormat, ...options }) => {
// First let's create an extent for the y values. (Gives us the min and max y values).
const [y1, y2] = d3.extent(Plot.valueof(data, y))
// Next create the scale for the axis.
const scale = d3.scaleLinear().domain([y1, y2])
// Now create and return the plot axis using the scale and the ticks to print the values on the axis.
return Plot.axisY(d3.ticks(y1, y2, ticks), {
...options,
y: scale,
tickSize: 0,
className: 'yAxisTick',
// If tickFormat is a string use the scale.tickFormat otherwise use the tickFormat passed in.
tickFormat:
typeof tickFormat === 'string'
? scale.tickFormat(ticks, tickFormat)
: tickFormat
})
}
Which works great for creating the Y Axis with ticks and domain values. So then to map the data I’m normalizing the Y value based on the extent to have the bars “scale” appropriately since they have different min/max values:
Plot.barY(
data,
Plot.normalizeY(
'extent',
Plot.groupX(
{ y: 'sum' },
{
x: 'date',
y: 'data',
fill: (d) => {
const isData1 = d.type === 'data1'
return isData1 ? 'url(#chartLinearGradient)' : '#FFF1E0'
}
}
)
)
)
Which gives me the “stacked” bars, but I would rather group the X Axis by type so I have two bars side by side. But if I add fx: 'type' then it creates two side-by-side charts like this for each one rather than grouping the bars:
I also tried changing x: 'type' and then fx: 'date' but then I get nothing rendered and there are no bars being drawn.
Which is really confusing me. Any guidance would be appreciated!