Docs

Docs

Welcome to Datahub Cloud documentation!

Datahub Cloud is your stupidly simple and fast tool for turning datasets and data-driven content on GitHub into a published, shareable site.

Note: The current version of Datahub Cloud runs only off Github.

Quick Start

There are two ways you can start publishing quickly with Datahub Cloud:

  1. Starting off from our template
  2. Or if you want to live dangerously, you can start from scratch

We recommend starting with the template first to better understand how it works and what's possible.

Starting off from our template

  1. Go to https://github.com/datahubio/datahub-cloud-template
  2. Click "Use this template" at the top right and create the repository (can be public or private - works with both)
  3. Go to the app and create a new site by selecting the repository you just created (leave the "Root Dir" field empty)
  4. That's it! It is now published. Hit the green "Visit" button at the top right to see what it looks like.

Starting from scratch

You can create a new repository in Github. Currently, any Github repository with the following files is supported:

  • Any markdown file (.md) + a datapackage frontmatter field (Frictionless data package spec)
  • Any index.md/README.md + same level datapackage.{json/yaml/yml} file

Note: Having data files that are not specifically listed in the data package are ignored.

I have my site up and running. How do I customize it?

Now that you have created your first site, you can add more features to make it data-richer.

Github is playing the role of your Editor.

Any changes you want to make to your published site, you need to make in your GitHub repository first.
Once you hit "sync" on your Site dashboard, the changes get reflected on your published site.

To start with, please check the full list and API of the available features here https://storybook.portaljs.org

Then follow the steps below:

  1. Upload all relevant data files and/or images to your Github repository.
  2. Select the desired feature you want to add from the sidebar list.
  3. Once you click on the selected feature, you will find 1) docs related to the feature as well as 2) the different ways in which you can import this feature
  4. In any way, navigate to the docs
  5. Hit "Show code" at the bottom right of the showcased feature
Screenshot 2024-04-11 at 14 52 59
  1. Copy-paste the code into your markdown file in your GitHub repository (if you haven't added one while creating the repo, do it now)*
  2. Commit the changes made
  3. Navigate back to the App and hit "Sync"
  4. Visit your site or refresh the page in order to see the reflected changes

To import a feature from URL, simply upload your data file to your Github repository and replace the URL in the copied code. Relative paths are supported.

If you need more detailed instructions on how to customize the copied code in order to make it fit with your data, please continue reading.

What syntax is supported?

Datahub Cloud supports CommonMark and GitHub Flavored Markdown, but also many Obsidian-specific syntax elements, like Wiki links or footnotes[^1].

For more syntax elements supported by Datahub Cloud, see https://flowershow.app/docs/syntax#commonmark

What features are supported?

Depending on the type of feature you selected from the list https://storybook.portaljs.org and the code copied across, you may need to:

  1. update the params (refer to the params in the docs and their description)
  2. update the CSV link with the link of your data file. You can also use a relative path.
  3. or update the URL to one of your own file

Summary

  • Catalog
  • Excel
  • Map
  • Data Table
  • Line Charts and Bar Charts
    • Plotly Charts
    • VegaLite Charts

You can use a number of data preview and data visualization components in order to make your dataset more insightful. Continue reading to explore other currently supported features.

Catalog

If your dataset is part of a larger dataset collection, you may want to start by listing the related datasets here in a catalog-like component with search and facets like this one:

This makes it easy to navigate and quickly find or filter down the data you're looking for. You can add as many facets as you'd like.

Simply copy-paste the code and update the values.

Excel

==Excel==

If you're working a lot with Excel files, you can embed a preview of your file such as this one:

This component allows you to present all tabs in your Excel file. You can sort the rows by clicking on the Column name and you can also filter each column by clicking on the triple bar symbol next to the Column name.

Simply upload your Excel file to your Github repository and replace the URL with the URL of the uploaded file (absolute and relative paths are supported).

Map

In case you're dealing with geo data, you can visualize your data on a GeoJSON polygons and points map with auto zoom in the points layer:

Make sure to upload your geoJSON file to the Github repository and update the params in the code.

Data Table

Let's continue by adding a table of your data like the one below:

To get this data replaced with your data, upload your csv file to your repository and update the URL

Line and Bar Charts

Here's a quick line chart:

You can add this line chart component by simply:

  1. Uploading your data CSV file to your repository
  2. Copy-pasting the below snippet into the markdown file in your repository
  3. Update the params (data, title, xAxis, yAxis) to fit your data
<LineChart
  data="data.csv"
  title="Annual CO2 Emissions"
  xAxis="Year"
  yAxis="Co2"
/>

There are also other types of charts and graphs you can use to enhance your dataset. You can create charts with Plotly or VegaLite.

Plotly charts

Bar Chart

Line Chart

VegaLite Charts

VegaLite Charts are also supported

For a full list and API of available data visualization components visit https://storybook.portaljs.org