Zach Bogart
02/19/2024, 7:19 PM460k
.
• How can I apply a transform to the result of a reducer from a group transform?Zach Bogart
02/19/2024, 10:02 PMStephan Renatus
02/21/2024, 1:30 PMcreated_at
and last_updated_at
. from those, I’d like to plot the number of “alive” instances per given day. 🧵Zach Bogart
02/21/2024, 6:50 PMGregor Aisch
02/26/2024, 4:04 PMStephan Renatus
03/01/2024, 8:14 AMStephan Renatus
03/01/2024, 12:42 PMPlot.rectX
and I’d like the ticks to only be integer numbers (the bars represent counts)Zach Bogart
03/02/2024, 12:32 AMPierre Vanhulst
03/02/2024, 4:32 PM__data__
property of a D3-generated DOM Element to understand what was the underlying data used to build it (with the aim of annotating data, rather than visualization). Using Observable Plot, I see that the DOM Elements it creates still have the __data__
attribute, but this seems to refer to an ID or something, since it’s a simple integer. Do you know why? Is it still possible to find the underlying data somehow?pat wo
03/06/2024, 12:49 PMZach Bogart
03/06/2024, 6:06 PMFabian Iwand
03/07/2024, 11:51 AMPlot.barX("aaAAAAAabBcCCd", Plot.stackX({
y: d => d.toLowerCase(),
fill: d => d > "Z",
stroke: "white",
filter: d => d > "Z",
})).plot()
Ralph Spandl
03/08/2024, 11:58 PMupdate()
which doesn’t exist on (HTMLElement | SVGSVGElement) & Plot.Plot
.
Can the type be extended to fix this?
I recreated the TS code here. it works, only getting a TypeScript error.
https://stackblitz.com/edit/plot-updates-ts?file=src%2Fmain.ts
**
The second question I have about this example is, how could this work if there are multiple marks to be updated.
I.e. on a resize we also want to animate the numbers and the ticks.
I’m just scratching my head, because this example turns the structure around and starts with the marks.
Is it too early to think that Plot charts can be fully animated on resize?
Thanks!Ralph Spandl
03/11/2024, 4:57 PMconst options = {
x: 'date',
z: 'dimension',
// y: "metric",
order: 'metric',
};
const rank = Plot.stackY2({ ...options, reverse: true });
The y value is not passed to stack function. But the way TS is setup, it would be needed to access it later.
When the y value is passed, the result returns a line graph based on the metric values, not the absolute position.
Because I don’t understand what magic is going on in the background, I struggle to make TS accepting rank.y when passed to the text mark text: rank.y,
### color contrast
I would like to pass the background color to the data label mark, to be able to calculate the color contrast and eventually adapt the text color.
If we look at the data labels, fill is black, bit should be a function like
d => colorContrast('black', background-color)
Plot.text(chartData, {
...rank,
fill: 'black',
dy: 0,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
text: rank.y,
...
}),
The dots use:
fill: rank.z,
to calculate the colors, but there is of course a transformation going on like colorsScale(value)
.
How can I process the color for the text mark?
### Tooltips
There are a few things I don’t understand. How is the content processed? How do channels play into this?
Playing around with channels and tip format
channels: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
'Position': rank.y,
'Date: ': rank.x,
'Format Date: ': (rank) => formatTime(rank.x),
Country: rank.z,
},
tip: {
format: {
// Country: rank.z,
country: 'hello',
y: null, text: null, date: null
},
lineHeight: 1.5,
fontSize: 20,
},
Position and Country return the expected value. But where is the null: date line coming from and why is the date
label in lowercase and not using my custom label?
And anther question would be, how do I get rank.x
into a function, so I can transform it to a human readable date.
LAST QUESTION:
I read that the interaction section in Plot isn’t ready yet, but I’m wondering there are any workarounds for the following use cases:
• Can the dataset from a tooltip rollover event be exposed to the JavaScript? This could be for example by passing a callback function to tip
.
• Is there somewhere a hidden gem that would expose this data on a click event.
The second case would enable cross-filtering with other charts within a system.
The full code sample is here
https://stackblitz.com/edit/plot-bump-chart?file=src%2Fmain.ts
🙏 (I know these are a lot of questions.)H
03/11/2024, 8:50 PMPlot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(timestamps, {x: "event", y: "unixtime"})
]
})
I just want to set the min and max of the y-axis so that the line doesn't look like a horizontal line at this scale. I tried to look how to set a min or max on the y-axis, looked at normalizeY
, mapY
. I'm sure it's something simple for a non-noob. Help pleaseRalph Spandl
03/11/2024, 9:23 PMPlot.dot(chartData, {
...rank,
fill: d => d.isOther ? 'red' : 'blue',
r: dotRadius,
}),
I do get the expected outcome and “other” dots are red. But I can’t seem to mix it with the built-in categorical scheme
Plot.dot(chartData, {
...rank,
fill: d => d.isOther ? 'red' : rank.z,
r: dotRadius,
}),
How could I pass such an exception?Fabian Iwand
03/13/2024, 3:11 PMPlot.areaY(
[
{d: "2023-02-05", v: 100},
{d: "2023-04-01", v: 50},
{d: "2023-08-12", v: 75},
],
{x: "d", y: "v"}
).plot({
x: {type: "utc", domain: ["2023-01-01", "2024-01-01"]}
})
Ralph Spandl
03/14/2024, 4:29 PMtitle
in the channel to format the data slightly different.
I’m wondering, if I’m also somehow magically able to format a title
channel with let’s say HTML tags like <b>
etc.
My experiment says no, just wondering if there is maybe a hidden feature somewhere or if these are the two options I have to compose with.Ralph Spandl
03/14/2024, 5:01 PMtip: {
textPadding: 10,
dy: -1 * dotRadius, // only if we can make this depending on anchor
lineHeight: 1.5,
stroke: '#E7E7E7',
fontSize: 16,
...
But as the anchor point is automatically adjusted, the offset isn’t going into the right direction.
Is there a way to adjust that dynamically? Or would I need to calculate that the anchor?Fil
03/14/2024, 5:05 PMRalph Spandl
03/14/2024, 10:32 PMfill
, but for tooltips, fill
is used for the background color.
Use case would be dark theme, with light text and dark background.
The only workaround I found is to use
style: {
color: 'white',
},
But this is on plot level and can’t be used on marks-level.Speros Kokenes
03/15/2024, 4:01 PMRalph Spandl
03/15/2024, 9:03 PMRalph Spandl
03/20/2024, 2:21 AMticks
.
I’m just wondering:
• Is this the best approach, or is there an easier way to translate and manipulate month and weekday labels?
• I don’t understand why textAnchor: middle
is not centering the month name.
Other than that, I’m more than happy about how versatile these axis are! 🙂Zach Bogart
03/21/2024, 11:33 PMpat wo
03/23/2024, 8:32 AMRalph Spandl
04/02/2024, 8:40 PMZach Bogart
04/03/2024, 5:22 PMisland_name
value I made is getting clipped.Max Bo
04/25/2024, 4:56 PMNathan Agrin
04/26/2024, 8:25 PM[
{date: '2024-04-01', shirts: 100, pants: 1000},
{date: '2024-04-02', shirts: 90, pants: 900}
]
I'd want the x axis to be the date, with shirts and pants stacked on the y-axis per date column. Ideally shirts are red, pants blue.
I've searched high and low for this but can't find an exact example that does this. I suspect I need to use either multiple bar marks, or stackY
/ groupX
(https://observablehq.com/plot/transforms/group)
I have tried a number of combinations of stackY
and groupX
but can't seem to find the right gesture. Any help is appreciated.