Visualizing Data with Observable JavaScript

Built-in reactivity is one of the biggest value additions of Observable JavaScript. In two previous articles, I showed you how to use Observable JavaScript in R or Python with Quarto and how to learn Observable JavaScript with Observable Notebooks. In this article, I’ll tackle the fun part of creating interactive tables and graphics using the Observable JavaScript and Observable Plot JavaScript libraries.

Create a basic Observable table

I usually think of tables as “outputs”. In other words, it’s a convenient way to view and explore your data. However, with Observables, the underlying table can also be considered an “input”. This is because Observable tables have rows that are clickable and selectable by default, and those selected values ​​can be used to affect plots and other data on the page. This helps.Explain why it works Inputs.table(your_dataset) Generate a table.

The default table is sortable by clicking on the column headers and displays multiple rows with scroll bars.

To specify the number of lines to display in a scrollable window, rows Quarrel. The arguments shown here display the first 20 lines in a scrollable window.

Inputs.table(mydata, {
rows: 20
})

Note that the table option is enclosed in braces even though there is only one option.

To select specific columns to display in the table, columns option Inputs.table() Use the following syntax:

Inputs.table(mydata, {
 columns: ["column_name_1", "column_name_2", "column_name3"]
 })

Please note columns: followed by a JavaScript array created by [] Brackets like Python and not c() Similar to R. Column names must be enclosed in quotation marks.

To rename a column, use header: Use the following syntax:

header: {
   original_name1: "NewName1",
   original_name2: "NewName2"
}

To combine column selection and renaming, use both columns: When header::

Inputs.table(mydata, {
  columns: [
    "column_name_1",
    "column_name_2"
  ],
header: {
   original_name1: "NewName1",
   original_name2: "NewName2"
}
})

The resulting defaults look like this, using data for US states and their populations:

Sharon Macris, Foundry

Some other options are available Inputs.table()including sorting and inverse sorting, which can be done with the following syntax: sort: "ColumnName", reverse: true.

If you’re coding in a notebook hosted on ObservableHQ.com, you’ll find that there are other built-in table types you can use in your cells. data table cellSome of these types are part of the Observable Web Platform. These are not standard JavaScript functions and cannot be used in Quarto documents. How do I know? If you don’t see a line of code after creating a table, it may not be usable outside the platform unless you code it yourself.

Create interactive filters for data with Observables

One of the biggest value additions of Observables is their built-in reactivity. The syntax for creating interactive filters typically goes along the lines of:

viewof new_variable_name = Inputs.the_filter_type()

Where the_filter_type One of the built-in Observable filter types.

Filter types include checkbox, radio, range (for sliders), selection (for drop-down menus), search, and text (for free-form single-line text).Argument of Inputs Filter functionality depends on the type of filter.

viewof Activate the filter. Mike Bostock, his CTO and founder of Observable, Inc., wrote in his note A brief Introduction to viewof: viewof foo In addition to viewof foo show the input element, viewof create seconds hidden cell foo Exposes the current value of this input element to the rest of the notebook. ”

input.search()

Inputs.search() Create both text search boxes When A reactive data set that is automatically filtered and subset based on what the user types in the boxes. For R Shiny users, text field UI and When Server-side code for reactive data sets.

The syntax is:

viewof my_filtered_data = Inputs.search(mydata)

To use Just refer to the reactive data set elsewhere in the code. my_filtered_data Excluding that mydatalike that:

Inputs.table(my_filtered_data)

The above code will generate a table from my_filtered_dataEvery time the user types something in the search box, the dataset and table are updated to find matches across all columns.

The filtered data set can be used multiple times on the page in different types of plots and other methods.

input.select()

Inputs.search() This is a somewhat special case as it is designed to filter the data set in a specific way by searching for partial matches in all columns. While this is simple, it may not be desirable because you need to search only one column or create numeric filters.

most other observable Inputs Required 2 procedure:

• Create an input.
• Create a function that filters data based on the value of that input.

For example, if a drop-down list displays possible values ​​from a single column in the data and filters the data by that selection, the code that creates the drop-down determines which values ​​to display and which column to use for subsetting. Must be specified. The code below creates a dropdown list based on the unique values ​​sorted. my_column column of mydata data set:

viewof my_filtering_value = 
  Inputs.select(my_initial_data.map(d => d.my_column), {sort: true, unique: true, label: "Label for dropdown:"})

As you can see from the variable name my_filtering_value, which both create a dropdown list and store the selected value.thanks to viewof.

map() Applies a function to each item in an array.In this case we get all the values my_initial_dataof my_column.

The code above uses JavaScript’s new “arrow” (=>) format for writing functions. You can write the same code in old JavaScript. function When return The syntax is also:

viewof my_filtering_value2 = 
  Inputs.select(mydata.map(function(d) {return d.my_column}), {sort: true, unique: true, label: "Label for dropdown:"})

once again, don’t forget viewof before defining Inputs If you want your code to be reactive.

not like Inputs.search()acting automatically on the entire dataset, Inputs.select() just return value from the dropdown. Therefore, you must write code to subset the data set based on the selected values ​​and create a new filtered data set. This code is the same as filtering a static data set.

As Quarto’s Observable documentation explains, “You don’t need any special syntax to refer to dynamic input values. They just ‘just work’, and your filtering code automatically changes when the input changes.” will be re-executed. ” You don’t need viewof Before statements that define datasets. Use only before Inputs.

my_filtered_data2 = 
  mydata.filter(function(d) {return d.my_column === my_filtering_value2})

If you prefer, you can use the old JavaScript syntax like this: function() When return:

my_filtered_data2 = 
  mydata.filter(function(d) {return d.my_column === my_filtering_value2})
  

A filtered data set can be used in the same way as a static data set, such as:

Inputs.table(my_filtered_data2)

Numeric and date filters are Input.select().

Check out the Hello Inputs and Observable Inputs notebooks for more information. Inputs.

Include the value of a variable in a text string

Generating dynamic text by including variable values ​​in a text string is useful for creating chart headings and summary paragraphs that change with data.the variable is ojs A code chunk, which can contain the value of that variable In the Quarto ojs code chunk the variable name ${}like that:

md`You have selected ${my_filtering_value2}.`

Here, md Indicates that anything contained within backticks should be evaluated as Markdown text rather than JavaScript code.You can also use html If you want to write HTML with variable values ​​like this, before the backticks:

html <p>The value of x is <strong>${x}</strong>.

Please note md When html Only required for Quarto documents. If you’re using a notebook hosted on ObservableHQ.com, you can choose Markdown or HTML for your cell mode, so you don’t need to sign it. md Also html.

If you’re storing text in a variable in your notebook, ObservableHQ.com should use backticks to indicate that the content is text, not code. JavaScript cell.