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

Introduction to 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

Observable Inputs

I know you won't want to do this, but I found myself wanting to type "species:adelie" as a way of restricting the search term to a specific column.

Shan Carter

Yep. Advanced syntax could also express the relationship between the search term and the property values. For example `species^=ad` could mean the species field starts with “ad” (à la CSS selectors), while `body_mass_g>=4000` could mean that the body_mass_g field is greater than 4,000.

But I think it makes sense to start with something simple, and then see where it needs to go. You can redefine the filtering behavior by passing in a custom filter function if you want to experiment with new syntax.

Should we move this cell up to above the viewof search cell?

Cobus Theunissen

could this somehow work with a map or chart where you might want to visualize the whole dataset but use search to highlight particular entries? like if the components accepted some standard way to filter or accessor or subset? straight-up filter works well for tables but less well when you wanna see something in context

Toph Tucker

Mike, as soon as I added a formatter to a column, the search function broke!). e.g.: replace the above with

Inputs.table(search,{format:{island:x => x.toLowerCase()}})

Dan S. Reznik

I’m not able to reproduce this problem. The provided code snippet worked fine for me. Can you share a notebook that reproduces the problem?

Mike it's been resolved, the issue was I was passing an Arquero data table (column-oriented) to Inputs.search(). I resolved it by doing a Inputs.search(arquero_table.objects()).

Not sure if it would make sense for search() to do this internally.

Dan, a fix for Arquero will soon be released: https://github.com/observablehq/inputs/pull/200