Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Summary data table display #23

Open
mbostock opened this issue Oct 18, 2023 · 6 comments · May be fixed by #1120
Open

Summary data table display #23

mbostock opened this issue Oct 18, 2023 · 6 comments · May be fixed by #1120
Assignees
Labels
enhancement New feature or request

Comments

@mbostock
Copy link
Member

mbostock commented Oct 18, 2023

We should have the equivalent of Observable’s data table display for a nice visual summary of tabular data.

@mbostock mbostock added the enhancement New feature or request label Oct 18, 2023
@cinxmo
Copy link
Contributor

cinxmo commented Oct 18, 2023

I'm interested in this one

@mootari
Copy link
Member

mootari commented Oct 24, 2023

Do we only want to implement the visual summaries, or do we also want to port the filtering capabilities?

@mbostock
Copy link
Member Author

I would like the visual summaries to support brushing/filtering, yes.

@Fil
Copy link
Contributor

Fil commented Nov 1, 2023

I've shown a quick prototype of this using mosaic, which has the benefit of bringing SQL and using great optimization techniques under the hood, allowing to process millions of rows without a sweat.

Its input is a SQL TABLE definition such as FROM 'my-file.csv' or FROM 'my-file.parquet'; nothing prevents adding a javascript array of objects, a DBClient instance with possibly multiple tables, etc.

We then show the column names of that table, which you can click on to create a default SQL query. The query is shown and editable.

The SQL query creates a VIEW in the DuckDB instance.

The rows from that view are then shown as a series of (cross-filter) synchronized histograms, atop a table showing ~20 rows with infinite scroll (using Inputs.table). In the future, the table could allow operations such as click-to-filter, or color-by-value.

In terms of UX, the workflow works well for the use cases I had in mind, blending data table and SQL concepts. What's interesting is that even if you don't type your own SQL, you can copy the query you obtain by clicking, and paste it in your source code, in effect "ejecting". We could also have a button that ejects/copy the derived query including the transient interactive ordering and filtering.

The UI will need a lot of design, and we'll want to implement each component in the most lightweight way possible. But if you think this is the right way to address this, please hit the 👍 button, not good ? press 👎.

Of course this means that it's quite a bit slower to boot than a javascript component, since the browser first needs to download and instantiate duckdb (wasm). There's also room for a lightweight table component (I think we should just continue developing Inputs.table).

It's a bit ugly, but you have to start somewhere:

summary-table

Note that at this point all of this is defined in user-land, in the notebook—there's no impact on the cli src/, and it might even be built as a completely separate component that a user could choose to add or not, with alternatives like Inputs.table or navio; I also have a prototype that uses navio—it's just 10 lines of javascript.

@mbostock mbostock added this to the Future milestone Nov 13, 2023
@CobusT
Copy link

CobusT commented Dec 14, 2023

+1 to expand Inputs.table

@maelp
Copy link

maelp commented Mar 8, 2024

I'd love that!

@Fil Fil self-assigned this Mar 14, 2024
This was referenced Mar 20, 2024
@mbostock mbostock removed this from the Future milestone Mar 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants