Lightweight interface components for exploring data and building interactive displays

Mike Bostock

These lightweight interface components — buttons, sliders, dropdowns, tables, and the like — help you explore data and build interactive displays.

Observable

Observable Inputs

Hello, Inputs!

Button Input / Observable Inputs

Toggle Input / Observable Inputs

Checkbox Input / Observable Inputs

Date Input / Observable Inputs

Radio Input / Observable Inputs

Range Input / Observable Inputs

Select Input / Observable Inputs

Text Input / Observable Inputs

Textarea Input / Observable Inputs

Color Input / Observable Inputs

File Input / Observable Inputs

Table Input / Observable Inputs

Search Input / Observable Inputs

Synchronized Inputs

Legacy Inputs

Form Input / Observable Inputs

Just getting started or want to level up on visualization techniques or the Observable runtime? You’ve come to the right place.

Tutorials

It seems like if you set {rows : 18} or greater the lazy loading stop working, is it a bug?

Radamés Ajna

Thanks, fixed. https://github.com/observablehq/inputs/releases/tag/v0.7.10

Dear Mike, once I sort by a column (by clicking on its header) is it possible to clear that sort?

Dan S. Reznik

Also: how can I make table entries be hyperlinks. I tried ${md`[...]()`} but to no avail.

For table hyperlinks, you could define a format function, e.g, Inputs.table(penguins, {format: {island: d=>htl.html`<a href="https://www.google.com/search?q=${d}">${d}`}})

Evan Galloway

Would it make sense to be able to rename the column names?  similar to format function but to customize the column names, I know you could just remap the property names.

That’s right, you can use array.map (or pass a lazy iterable that does the same thing). That said there is an open issue requesting the ability to specify derived columns, and to change how the column headers are formatted:

https://github.com/observablehq/inputs/issues/83
https://github.com/observablehq/inputs/issues/103

How do you make the table narrower when you have only a few wide columns like in the example below?

Enrico Bertini

You might play with width and/or layout options:
Table(penguins, {columns: ["species", "culmen_depth_mm", "culmen_length_mm"], layout: 'auto', width: 400})

Éric Mauvière

For right-aligned table cells, consider putting the sort arrow to the right side of the header.

Jacob Rus

Can we have an option to not allow row selection and header sort?

Nicholas Xu

For the first there’s an issue here you can upvote:

https://github.com/observablehq/inputs/issues/136

There’s not currently an issue for disabling sorting (either on a specific column, or on any columns), but you’re welcome to file an issue to track this feature request.

"shift-click to select a range of rows" – what if I want to deselect a range of rows?

I'm not sure how easy it would be to make the selection UI closer to built-in multi-select elements, but those have a much more fluent and capable interface this list of checkboxes (at least in Mac Safari). Click and drag selects multiple elements, command-click or command-drag deselects. Shift-click selects a range, though it behaves a little strangely sometimes when there is a complicated discontinuous selection. It is overall quite fast and easy to get to a desired selection and easy to tweak the selection.

You gotta click the checkboxes to deselect currently (or the top checkbox to deselect all). I like the idea of command-clicking a row to select or deselect, and command-dragging to toggle the selection of whatever rows you drag over. We didn’t want clicking (or shift-clicking) the row to toggle the selection because that would get in the way of selecting text, but I think hiding it behind the command modifier would be a useful power feature.

Filed https://github.com/observablehq/inputs/issues/90

It would be useful to have an option to specify which rows are initially checked.

David Kirkby

You can specify which rows are initially checked by using the value option, which sets the initial value of the table. This is a subset of data to use as the initial selection if multiple is true (the default), or a single data item if multiple is false.

Hi @mbostock, would you kindly give us an example of how to assign a default value?

Fidocia Wima Adityawarman

Aaron Kyle Dennis

Sadly no, it doesn't work. I've tried {value: 0}, {value:"[penguins]"}, {value: "penguins"}, {value: {species: "Gentoo"}}

You can add an option such as `value: penguins.filter((d) => d.species === "Gentoo")`; only the Gentoo penguins will be selected.

Could numbers be formatted with number.toLocaleString() but without the english locale hardcoded, so it would follow the browser locale?

Yes, but you’ll need to specify your own format to do this explicitly. We chose to default to English so as to avoid using non-English number localization when the surrounding content is in English (e.g., as in this notebook). It would be nice if there were a way to change the locale more easily, rather than having to specify the format for each column. Tracking here:

https://github.com/observablehq/inputs/issues/79

A locale option has been added in 0.7.19 to make this easier.

Grateful for an example of how one accesses the width and align properties. Thanks for this amazing tool!

The options for table are in the github: https://github.com/observablehq/inputs#Table

Here is an example: 

Table(penguins, {
  format: {
    culmen_length_mm: x => x.toFixed(1),
    culmen_depth_mm: x => x.toFixed(1),
    sex: x => x === "MALE" ? "M" : x === "FEMALE" ? "F" : ""
  },
  width: {
    culmen_length_mm: 25,
    culmen_depth_mm: 25
  }
})

Maybe use italic for _layout_ in order to indicate that we can use {layout: 'fixed} or {layout: 'auto'}

Sylvain Lesage

Is it possible to download the table as an image?

Shuai Hao

Is there a way to change the text that appears as the column headers?

Maxene Graze

See https://github.com/observablehq/inputs/issues/103

Hi @maxeneg , right now, you would have to remap your data with all its implications, for example

Table(penguins.map(row=> ({
  "Species" : row.species,
  "Island" : row.island,
  "Culmen Length (mm)": row.culmen_length_mm,
  "Culmen Depth (mm)" : row.culmen_depth_mm,
  "Flipper Length (mm)" : row.flipper_length_mm,
  "Body Mass (g)": row.body_mass_g,
  "Sex" : row.sex
})), {
  format: {
    "Culmen Length (mm)": sparkbar(d3.max(penguins, d => d.culmen_length_mm)),
    "Culmen Depth (mm)": sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
    "Flipper Length (mm)": sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
    "Body Mass (g)": sparkbar(d3.max(penguins, d => d.body_mass_g)),
    "Sex": x => x.toLowerCase()
  }
})

I have found it useful to create a formatting function to add a `title` attribute to see long names, e.g., concept: d => htl.html`<div title="${d}">${d}`
Perhaps it would be worthwhile to make this an option (i.e.,  a title attribute equal to the cell value for a given column)? 
Thanks for all the great inputs, like table!

I’ve filed an issue to track this feature request:

https://github.com/observablehq/inputs/issues/153