How to do a group transform bar graph?

[will-moore]

I'm just getting started with Mosaic, and it's a fantastic framework - Thanks for all your work and help so far...

I'd like to create a bar graph in mosaic, and following the link at https://idl.uw.edu/mosaic/api/vgplot/marks.html#bar I find that this one in Observable is the example I want (with a group transform):
https://observablehq.com/plot/transforms/group

That is specified with:

Plot.plot({
  marginBottom: 100,
  x: {label: null, tickRotate: 90},
  y: {grid: true},
  marks: [
    Plot.barY(olympians, Plot.groupX({y: "count"}, {x: "sport"})),
    Plot.ruleY([0])
  ]
})

but I can't work out how to do the equivalent in Mosaic with vg.Plot.
I don't see any groupX option in vg.Plot. Do I need to create some custom sql to group the data before it's passed to the plot?

Many thanks.

[domoritz]

Not sure I get the question so let me know if that's not the answer you are looking for.

Mosaic automatically groups. See https://idl.uw.edu/mosaic/examples/sorted-bars.html for an example.

[will-moore]

I find it tricky to understand the sorted-bars example because I don't know what the table looks like that it's loading the data from.
I see there's a table shown for the https://idl.uw.edu/mosaic/examples/athletes.html example, which I think is the same data data/atheletes.parquet but that doesn't show what the "gold" column looks like. I don't have an easy way to see that whole table for data/atheletes.parquet.

I'm assuming the table looks like this, with gold being a number column?

nationality, gold
-------------------
KOR, 10
CAN, 20
MDA, 34
NZ, 123
...

My data isn't numerical (as in the group transform Observable example above) where the data looks like this (I think):

sport
--------
athletics
fencing
fencing
weightlifting
shooting
gymnastics
fencing

OK, so I I figured it out...
This is almost working for me...

return vg.plot(
    vg.barX(
      vg.from(table_name, {filterBy: selection}),
      {
        x: vg.count(),
        y: yaxis,
        fill: "darkgreen",
        sort: {y: "-x", limit: 20}
      }
    ),
    vg.intervalY({ as: selection }),
    vg.xLabel("Count"),
    vg.yLabel(yaxis),
    vg.yLabelAnchor("top"),
    vg.marginTop(15),
    vg.width(width),
    vg.height(height),
    vg.style({ id: plotId })
  )

Creates this plot on the left...

There's a couple of issues.

• The largest bar is all the data that isn't within the 20 limit. It took me a while to work that out, initially thinking that these were rows that had no "Gene Symbol" value. This kinda distorts the graph so that it's not easy to see the other data. I tried removing the 20 limit, but that doesn't help!

The 20 limit is less of a problem when I filter to show smaller numbers:

I wonder if there's a way to label that bar as "others", at least to avoid confusion?

• I added the vg.intervalY({ as: selection }), directive, hoping to be able to click on a bar and filter by just that category, but that didn't work - I get invert.js:2 Uncaught TypeError: scale3.invert is not a function when I drag to select. Is there a way to have a single click select a bar for filtering?

Many thanks for your help.

[domoritz]

Does this help?

duckdb -c 'DESCRIBE FROM "athletes.parquet"; select * from "athletes.parquet" limit 5'
┌───────────────┬─────────────┬─────────┬─────────┬─────────┬─────────┐
│  column_name  │ column_type │  null   │   key   │ default │  extra  │
│    varchar    │   varchar   │ varchar │ varchar │ varchar │ varchar │
├───────────────┼─────────────┼─────────┼─────────┼─────────┼─────────┤
│ id            │ BIGINT      │ YES     │ NULL    │ NULL    │ NULL    │
│ name          │ VARCHAR     │ YES     │ NULL    │ NULL    │ NULL    │
│ nationality   │ VARCHAR     │ YES     │ NULL    │ NULL    │ NULL    │
│ sex           │ VARCHAR     │ YES     │ NULL    │ NULL    │ NULL    │
│ date_of_birth │ DATE        │ YES     │ NULL    │ NULL    │ NULL    │
│ height        │ DOUBLE      │ YES     │ NULL    │ NULL    │ NULL    │
│ weight        │ BIGINT      │ YES     │ NULL    │ NULL    │ NULL    │
│ sport         │ VARCHAR     │ YES     │ NULL    │ NULL    │ NULL    │
│ gold          │ BIGINT      │ YES     │ NULL    │ NULL    │ NULL    │
│ silver        │ BIGINT      │ YES     │ NULL    │ NULL    │ NULL    │
│ bronze        │ BIGINT      │ YES     │ NULL    │ NULL    │ NULL    │
│ info          │ VARCHAR     │ YES     │ NULL    │ NULL    │ NULL    │
├───────────────┴─────────────┴─────────┴─────────┴─────────┴─────────┤
│ 12 rows                                                   6 columns │
└─────────────────────────────────────────────────────────────────────┘
┌───────────┬────────────────┬─────────────┬─────────┬───────────────┬────────┬────────┬───────────┬───────┬────────┬────────┬─────────┐
│    id     │      name      │ nationality │   sex   │ date_of_birth │ height │ weight │   sport   │ gold  │ silver │ bronze │  info   │
│   int64   │    varchar     │   varchar   │ varchar │     date      │ double │ int64  │  varchar  │ int64 │ int64  │ int64  │ varchar │
├───────────┼────────────────┼─────────────┼─────────┼───────────────┼────────┼────────┼───────────┼───────┼────────┼────────┼─────────┤
│ 736041664 │ A Jesus Garcia │ ESP         │ male    │ 1969-10-17    │   1.72 │     64 │ athletics │     0 │      0 │      0 │ NULL    │
│ 532037425 │ A Lam Shin     │ KOR         │ female  │ 1986-09-23    │   1.68 │     56 │ fencing   │     0 │      0 │      0 │ NULL    │
│ 435962603 │ Aaron Brown    │ CAN         │ male    │ 1992-05-27    │   1.98 │     79 │ athletics │     0 │      0 │      1 │ NULL    │
│ 521041435 │ Aaron Cook     │ MDA         │ male    │ 1991-01-02    │   1.83 │     80 │ taekwondo │     0 │      0 │      0 │ NULL    │
│  33922579 │ Aaron Gate     │ NZL         │ male    │ 1990-11-26    │   1.81 │     71 │ cycling   │     0 │      0 │      0 │ NULL    │
└───────────┴────────────────┴─────────────┴─────────┴───────────────┴────────┴────────┴───────────┴───────┴────────┴────────┴─────────┘

You can also see the dataset at https://manzt.github.io/quak/?source=https://pub-2fc10ef67241467c8327dac35d878da9.r2.dev/athletes.parquet.

[will-moore]

Thanks @domoritz - That's helpful.

I found the Seattle weather example is doing something like what I'm trying here (filtering by bar and plot area), so I need to study that and work out what I'm doing differently that's causing the error invert.js:2 Uncaught TypeError: scale3.invert is not a function.

Any idea how I can label the "others" bar above (the unlabelled bar in those screenshots)?

[jheer]

You can not apply an interval interactor over a discrete domain (such as the ordinal domain used by a bar chart). That is why you are seeing this invert error. Non-continuous scales have no invert function defined.

Intervals are only defined over continuous numerical or temporal data. So you need to use a different interactor, such as toggleY (to click bars) or region (to select individual bars using a brush and select their underlying discrete values rather than a [min, max] interval). Hope that helps!

[will-moore]

OK, thanks - I'll give it a try...

[jheer]

I'm guessing the unlabeled bar corresponds to NULL or missing values in your dataset? If so one way to add the label would be to update your dataset to use "Others" rather than NULL in the data. Depending on how you are using Mosaic, you could do this via a SQL query that you apply when loading the dataset. Or you could do this separately before loading.

[will-moore]

@jheer - Ah, you're right. I was not checking very carefully for missing values - I simply tried sorting that column table by "Gene Symbol" in the table widget UI and assumed that any empty values would show at the top of the column when sorted either by ascending OR descending. But that's not what I'm seeing - the empty values are actually sorted to the bottom of the table in both cases, and I just never saw them since it's a big table.

The app is currently deployed at https://deploy-preview-58--parade-crossfilter.netlify.app/ if you're interested.

Thanks

[will-moore]

Oh, and thanks for the quak link. It was actually knowing @manzt and then quak that led me to finding out about mosaic.
But I didn't realise you could use it outside of a notebook or that it was hosted there. That could actually be really useful for our users