How to sort ticks on the x-axis

Community Help
1

Hi there,

A while ago I was asked to make a “temporary” graph for a website, and it turns out it wasn’t so temporary after all, which now landed me in a mess with weeknumbers and years. To summarize and not drag you into it, it comes down to the question: in what way can you sort ticks, besides the default alphabetic order?

So I have an array with all my ticks on the X-axis:

x: { 
      label: "Week number →",
      labelAnchor: 'right',  
      ticks: ['12', '14', '16', '18', '20', '22', '24', '26', '28', '30', '32', '34', '36', '38', '40', '42', '44', '46', '48', '50', '52', '02', '04'],
      tickSize: 0, 
},

As you can see I only want to show even week numbers, but I’m going from the data from 2021 to 2022. Unfortunately, the ticks seem to be sorted alphabetically, which means the ‘02’ and ‘04’ ticks get shown all the way on the left before ‘12’, ‘14’ and the rest, which makes my graph get out of order:

// x-axis:
02, 04, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32 .... // you get the gist :)

I couldn’t find anything helpful on this in the API (on Github) or any of the tutorials that came up in Google for Observable Plot. Does anyone have a lead or the knowledge on how to do this? Thanks in advance. I’ve had a really rough year and this issue, as small as it may be, is giving me a lot of stress, so you’d really be helping a colleague out :sob:

2

try maybe x: { type: "ordinal", domain: ['12', '14', '16', '18', '20', '22', '24', '26', '28', '30', '32', '34', '36', '38', '40', '42', '44', '46', '48', '50', '52', '02', '04'] }

3

Hi Fil, thanks for taking a look! Unfortunately that didn’t do what I expected, but it did trigger me to look into the domain property (not sure of the terminology ‘property’), and I got something working with dates. Thank you so much!

For future readers of this, I have not found out any way to sort or order the ticks array, and it still seems to get overwritten and ordered alphabetically. I’ve now resorted to changing from weeknumbers as ticks on my x-axis to month labels, in this example getting every third month between the dates of 28th of march 2021 to today.

ticks: d3.utcMonth.every(3),
domain: [new Date("2021-03-28"), new Date("2022-01-01")],
4

Can you can share the original chart, so I can take a look in context?

5

Yes, it’s here (I’m not really proud of it, but I needed something that’d get the work done a few weeks ago):

6

It seems to work if you use domain: CC_downloads_plot.map((d) => d.weeknr).

7

Wow, thank you so much for your help Fil! :heart: