Adding a date to a scatterplot - remove locale formatting

New To Observable
1

I’m new to Observablehq and am trying to create a relatively simple scatterplot.

I’ve imported an Excel spreadsheet and parsed the data it contained into a JS array. I’ve managed to work out most things so far, but I am struggling with the date format.
To make things simple, I changed all dates into years (initially the prices in the spreadsheet were divided into yearly quarters but it produced some weird results).

So even the simplified version of the years’ sequence (2019, 2020, and so on) is unfortunately formatted with a , (comma) - due to my locale, I presume, although I am not 100% sure.
It looks really ugly to have 2,019 2,020 etc :confused:

It’s been a while since I’ve dabbled with js, so I’m a bit lost on how to best manage it - docs mention (1234).toLocaleString(undefined, {useGrouping: false})

So I guess I’d have to iterate over the array to access the Year property and strip it of the default formatting using the above mention method…

Or perhaps there’s another way of handling this? :upside_down_face:

Any help will be much appreciated :slight_smile:

Snippet of the array

wtorny = Array(93) [
  0: Object {
  city: "Krakow"
  Year: 2006
  medianPrice: 7114
}
  1: Object {
  city: "Krakow"
  Year: 2007
  medianPrice: 8369
}

Observable_2022-11-03_162245_observablehq.com
Observable_2022-11-03_162245_observablehq.com719×389 27.1 KB

2

It appears you’re using Observable Plot? Here are two solutions that come to mind.

You could define your Year column as Date objects rather than as numbers. For example, use new Date("2006-01-01") instead of 2006. If you have a CSV file, then the string 2006-01-01 (ISO 8601 format) will be converted to a Date automatically when you use {typed: true} or d3.autoType.

Alternatively, you can set the tickFormat on the x scale to the empty string "" so that thousands grouping is disabled. That would look something like this:

Plot.plot({
  x: {
    tickFormat: ""
  },
  marks: [
    Plot.lineY(data, {x: "Year", y: "medianPrice", z: "city"})
  ]
})
1 Like
3

I tried the second solution adding the tickFormat: "" and it did the trick, yay!

Thanks so much for your help much appreciated :bowing_woman: :slight_smile:

1 Like