Dates for X Axis

[attilabuturla]

I'm newer to Layercake and I am creating a simple line chart. I'd like to use a numeric value for the Y axis for a point, and a date (either a date type or a string that represents a date) for the X axis. However, based on my testing the points only work if the Y axis is a numeric value, or a string that converts to a number. It doesn't seem to work if I use something like "2024-5-8" for example.

This can be replicated by simply updating the layercake-template repo, and updating the CSV to use a date in the format specified above, as opposed to using a four digit year, for the myX column.

[mhkeller]

What values you use for your x and y axis are not a part of LayerCake and it has no opinions or restrictions. This is a more complex example but you can see that they axis is a date in the time of day plot example.

This isn't LayerCake specific but I can give you some general pointers about how best to work with dates.

You have a few options if you have dates for you axis. You may also want to look at some D3 charts that use dates and also look at d3-time-format.

1. You can keep your dates as strings but use ISO-8061 YYYY-MM-DD format instead of what you have. Always include leading zeros in month and day values. This has the benefit that your strings will always sort in the correct order.
2. Parse your date with a library like d3-time-format (linked above) into a JavaScript date object. You can usually continue using the default scaleLinear but you may want to pass in a specific D3 date scale. See here for more about time scales

[attilabuturla]

Thanks, so what I need to do is use a format function, and then I can translate a number value that represents the dated into a display date. That makes sense.

Having never used D3 before, I'm not sure where Layercake ends and where D3 begins. In the example my-chart template it contains an AxisX.svelte component, which is what I was referencing.

[mhkeller]

You may want to take a look at some introduction to D3 tutorials to understand the basic concepts of scales. LayerCake abstracts away some of that so it help to learn those core concepts without a framework at first.

In your example, try setting your date values to YYYY-MM-DD strings first. That may be an easier path.

[attilabuturla]

I actually got the format function to work without issues. I stored the Y access values in milliseconds, and then had the format function translate it back to a date with the desired formatting.

	function getDateString(milliseconds) {
		const date = new Date(milliseconds);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); 
		const day = String(date.getDate()).padStart(2, '0');

		return `${month}-${day}-${year}`;
	}

Next up I need to learn how to rotate the text labels for the Y axis.