Plotting / Y axis, values not ordered

New To Observable
1

Hi everyone,
the solution to this problem is probably very simple but being new to Observable I am struggling to find it.

I am plotting a correlation between two column from a .csv file.
One column is not understood as numeric (would this be the cause?) and values are not ordered.
I am not sure if I am doing something wrong when importing it, or I miss additional parameters when writing the plot function.
Would you have any suggestion?

See notebook

Thank you

2

it’s probably because of the values marked “_”, which are understood as strings and make y defaulting to an ordinal scale.

You can try to specify y: { type: "linear" }

1 Like
3

Solved, thank you.
If I understand correctly, I should avoid “_” in column names.

4

The problem isn’t the column names or the underscores; it’s the type of the values. Even though you’re using {typed: true} to load your CSV, the format of the numbers doesn’t match the requirements of d3.autoType, and so some of your numeric columns are still represented as strings. Note the quotes here on the “EC” and “COD mg/l” columns:

Akaki Water Quality bttgcm Observable
Akaki Water Quality bttgcm Observable1733×1566 182 KB

That’s most likely because these columns have numbers formatted with commas. To fix this, you should either correct the formatting in your CSV file (removing the commas), or you should use array.map after loading the CSV to coerce the numeric strings to numbers.

Plot infers the type of the column from the type of the values: if you give it strings, it’ll assume you have ordinal data rather than numeric data. Adding type: "linear" to the scale definition as @Fil suggests will tell Plot to explicit coerce the string values to numbers. However, Plot’s coercion logic (which simply uses JavaScript’s coercion logic) will consider any number with a comma in it as NaN, and that will get dropped from your dataset. So I don’t recommend that. (Sorry, Fil!)

Here’s how to change your dataset definition to fix the types:

dataset = {
  const data = await FileAttachment("Akaki_WQ-1.csv").csv({typed: true});
  for (const column of data.columns) {
    for (const d of data) {
      // If any string values appear to be comma-formatted numbers,
      // remove the commas and then coerce them to proper numbers.
      if (typeof d[column] === "string" && /^(\d|,)+(\.\d+)?$/.test(d[column])) {
        d[column] = +d[column].replace(/,/g, "");
      }
    }
  }
  return data;
}

Suggestion: Comparing Akaki Water Quality to Akaki Water Quality / Observable

3 Likes