Build your own site with Observable
Last updated
Was this helpful?
Last updated
Was this helpful?
This guide outlines an example hosted by the Redivis team. Follow along at the to see all the details and build your own!
It's easy to use of Redivis data anywhere on the web, either by via our client libraries, via one of our export integrations, or directly in another webpage.
To present Redivis data in a fully customizable way, you may want to build your own dashboard-style site. The following example shows a static site built with , deployed via , that connects to Redivis data using our client libraries.
Identify the data sources on Redivis that will provide the content to build your site. You may be interested in presenting facets of a already hosted on Redivis, highlighting tables you yourself, or showing outputs generated in one of your . In our example, we'll use weather station locations contained in the , and outputs from a that uses the same source data, to visualize locations and aggregate precipitation measurements from around the world.
To reference a Redivis table, choose the "Export table" option and navigate to the "Programmatic" tab (e.g., the ), and see the code snippet for unique identifiers for the owner, dataset/workflow, and table. More details about here.
With chosen data content in mind, the next step is to choose a set of tools to build our custom dashboard and deploy it to the web. Of the numerous choices, provides an approachable option with support for working with data in many programming languages (not just javascript), powerful visualization libraries built in, and excellent documentation. To start with a copy of our example dashboard, you can clone our public and follow the README.md instructions to develop a similar site in a local environment. To create a brand new project, and to reference additional details and development strategies, see the Observable guide.
You'll need to generate a Redivis API access token with appropriate permissions. See in our API documentation to create your own token to read data from Redivis.
To successfully authorize data fetching functionality in your development environment, be sure to export a REDIVIS_API_TOKEN
variable to your path, with the following terminal command:
export REDIVIS_API_TOKEN = 'MY_API_TOKEN'
IMPORTANT: API access tokens operate like passwords, and can allow another party to access resources on your behalf.
With our dashboard finalized, you can deploy your project anywhere on the web. Observable provides a quick command (npm run build
) to generate static files to be hosted on a server of your choice, as well as a deployment service if you'd like to host with Observable.
Github Pages provides a hosting service that's easy to integrate with your Github repository and any Github Actions needed to deploy your project.
In our example, we deployed our project to Github Pages in a few simple steps.
First, we need to specify a REDIVIS_API_TOKEN
to support Redivis client library authorization in the live deployment. We used "action secret" within the Settings of the Github repo, which sets an environment variable REDIVIS_API_TOKEN
to our appropriately scoped token, which is completely private while our repository remains public.
Checkout the code
Set up a Node.js environment, with a specific node version (20.6
)
Install our python dependencies (via pip
,specified in requirements.txt
)
Build the static files for the site
Deploy the files (in the generated dist
folder) to Github Pages via a specific branch (gh-pages
)
You should never share tokens, and avoid committing to source control where collaborators may have access (either now or in the future). See the section below for details on how to use secrets to store a Redivis API token necessary for your project.
In Observable, a is a file that accesses data and writes it to a standard output channel for consumption by renderers, to be ultimately displayed on your site.
In our example, we'll illustrate use of both javascript and python to pull data from Redivis into our dashboard, using the via js and python client libraries.
In a web environment, the allows for fetching and manipulating data via simple javascript functions.
In our example, we first install the library by specifying the in our package.json
and running npm install
in our development environment to install or update all specified packages.
Then, in the Observable data loader file , we authorize
access, and then listVariables
and listRows
from our specified precipitation table.
In a python environment, the allows for fetching and manipulating data via simple python functions.
Using the redivis-python client library requires that you develop your web application in a virtual python environment. Observable documents this process – essentially, create an environment with , activate it on your machine, and install relevant packages to the environment.
In our example, we'll create a requirements.txt
file that specifies the of the client library, both for development and future deployment. Running the following command in your virtual python environment will install pip, and then any package specified in the requirements.txt file.
Then, in the Observable data loader file , we create a from our specified stations table, and output the records.
With data loaded and parsed into JSON format, it can now be manipulated and presented as you see fit. Among a wealth of modern web visualization tools is , which provides a polished selection of simple visualizations and corresponding functions to group and filter data, and pairs nicely with our development framework.
In our example, we use several Observable Plot functions to display our data on a map – using with to show a globe – and in a hex-binned histogram – using and for data aggregation. We also add a to allow viewers to rotate the globe visualization.
Then, we use the built-in command to print the JSON-shaped payloads, to give the viewer a quick look at the raw data.
You can run npm run deploy
in the command line, and follow the prompts to your project to an address on Observable. Further configuration and permissioning is available through your Observable account.
Next, we write a Github Action to build and deploy the project, which will run anytime we push to the main branch of our repository. The action is specified via the file, and relies on a set of open-source actions and our own custom code to do the following steps:
After adding this file to your Github repository, any push to the main
branch will trigger a deployment following the steps above, the status of which can be viewed under the tab of the repository.
Finally, Redivis has hosted a number of different team projects at a custom endpoint specified in our organization's Github Pages settings, which you can see at .