Generate an interactive webpage from CSV data and markdown
This tutorial will help you get started with the Datahub pages, and how you can use it to create data driven webpages from static data.
Data pages you will create can be deployed with static site hosting providers like Github pages. Cloudfare pages, Netlify, or Vercel.
Here's an example of a hosted Datahub page showing how data, text and simple charts can be displayed.
In this tutorial, we aim to keep things simple, so we'll show you how you can turn a CSV and a ReadMe into a Datahub page.
Prepare your data folder
- Create new data folder and add your CSV data. We'll be using a folder called
my-dataand a CSV data called
- Add a
README.mdfile with some markdown content. You can also add and use custom Datahub components like TableGrid, and LineCharts. See this example
- For example to display your data as a Table in the page, you can add the following to your
<TableGrid url='data.csv' />
- At the end you should have a data folder with the following structure:
├── my-data └── data.csv └── README.md
Initialize Datahub page from template
Now that you have your data folder created and saved. In a new folder, you're going to initialize your datahub page, using a template we have provided. Follow the steps below to achieve this:
- Run the following command in your terminal to install and create your datahub page from our template. You can always change the name of the folder from
datahub-pages-exampleto anything you like:
npx [email protected] --example https://github.com/datopian/portal.js/tree/main/examples/data-literate-template datahub-pages-example
- Navigate into the folder:
- Next you'll copy data files from your data folder into Datahub page. We have provided a handy script to automatically do this for you. All you need to do is pass the full/relative path to your data folder
node datahub-portal-local-cli.js ./my-data
After copying the files with the
datahub-portal-local-cli.js, you should have the data.csv file in the
public folder, and the README.md file in the pages folder under the name
Now we can view the generated page locally by running:
npm run dev
This will start the development server, and you can view the page by navigating to http://localhost:3000
The generated page from above is a static Next.js webpage. As such you can deploy it anywhere Next.Js sites can be deployed. The following platforms support deployment of Next.js sites, and you can yse anyone of your choice:
We are working towards adding new and better features to Datahub pages. You can request or suggest features in your issue tracker on Github here.