How to build a Dynamic Bar Chart in Observablehq through sqlite3
By: Angelica Lo Duca
Tags: Data Visualisation, D3js, Sqlite3, Data Science, Tutorial

Data Visualisation

How to build a Dynamic Bar Chart in Observablehq through sqlite3

Photo by Luke Chesser on Unsplash

Recently, the Observablehq team has released a new feature, which permits to import sqlite3 databases into a notebook. This features is very powerful, since it permits to dynamically query the dataset through the classical SQL syntax. The original tutorial provided by Mike Bostock is available at this link.

In this tutorial, I exploit the new sqlite3 feature to build a simple bar chart, which updates dynamically, according to users’ selection.

As example dataset, I use the Generic Food Database, provided by data.world and available at this link. The following table shows a snapshot of the Generic Food Database:

Image by Author

In this tutorial, we will build a dynamic bar chart, which shows the number of items for each sub group, provided the group. The group choice is done through a dropdown selection.

Convert the CSV file to .db

The Generic Food Database is released as a CSV file, thus, after downloading it, it must be converted to a .db file. Then it can be uploaded as a file attachment into an Observable notebook.

In order to perform the conversion to .db, firstly we must download sqlite3 from its official Website. We can unzip the downloaded folder and enter the folder from command line. From the sqlite3 folder, we can launch the sqlite3 command:

./sqlite3

Now the sqlite3 terminal opens thus we can create a new database, namely food_db :

.open food_db

We can import the generic food table as follows:

.mode csv .import /path/to/your/file/generic-food.csv food_table

In the previous example, we have imported the CSV file into the food_table table. Now we can check if the table has been correctly imported:

.schema

the output should look like as the following one:

CREATE TABLE food_table(

"FOOD NAME" TEXT,

"SCIENTIFIC NAME" TEXT,

"GROUP" TEXT,

"SUB GROUP" TEXT

);

If we look at the folder where we run the sqlite3 command, we can see that there is file named food_db . This file can be given as input to the sqlite() function provided by Observablehq.

Load the database into Observable

Now we can create a new notebook in Observable and import the database. We can click on the three dots in the top right part of the page and select File Attachments:

Image by Author

We select the file from the file system and we upload it in the Observable notebook. We can load the database through the following line of code:

db = FileAttachment("food_db").sqlite()

We can list all the tables contained in the database through the describe() function:

db.describe()

which gives the following output:

Image by Author

The describe() function can receive also the table name as input:

db.describe('food_table')

which gives the following output:

Image by Author

Query the database

We are ready to query the database. We can use the SQL syntax to build any query. For example, if we want to list all the groups, we can run the following query:

groups = db.query('SELECT DISTINCT(`GROUP`) from food_table')

The following figure shows a snapshot of the group variable:

Image by Author

And we can build a dropdown menu with all the groups:

viewof term = Inputs.select(groups.map(d => d.GROUP), {value: "Vegetables", label: "Group"})

Note that we have transformed the group variable to a list of objects. The output of the dropdown selection looks like the following one:

We can query again the database by asking to all the subgroups belonging to the group selected through the dropdown selection:

data = db.query('SELECT count(*) AS value, `SUB GROUP` AS name FROM food_table WHERE `GROUP` LIKE $1 GROUP BY name ORDER BY value DESC', [`%${term}%`])

We can show the results as a table:

Inputs.table(data)

which gives the following output:

Image by Author

Build the Bar Chart

Finally, we can build the bar chart, following the example provided at this link. The result looks like the following one:

If you go back in this article and select another group on the dropdown selection, you should see a change in the bar chart. That’s all!

Summary

In this tutorial I have illustrated how to exploit the new sqlite3 feature provided by Observable to build a dynamic bar chart.

The complete notebook can be downloaded from here.

If you wanted to be updated on my research and other activities, you can follow me on Twitter, Youtube and Github.

Related Articles