Search code examples
vega-lite

How to load my own csv into vega-lite online editor?


I would like to use the online vega-lite editor to do some quick prototyping of some graphs I want to build. The examples use

  "data": {
    "url": "data/penguins.json"
  },

Is there a way to load data from a .csv file from within the editor?


Solution

  • Here is a concrete example of how to load .csv data from a GitHub page. For this example, consider the "Bubble Plot (Gapminder)" example (link) on the online Vega editor. This example uses the following line to load data, similar to the example you provided: "data": {"url": "data/gapminder-health-income.csv"}. However, we can change this link to a direct GitHub link as follows.

    First, find the data that you want to use on GitHub. This particular dataset is hosted on the Vega GitHub under the vega-datasets repository at this link. From this GitHub page, you can select the "raw" button to get a link to only the raw data (link), which can then be used in the online editor as follows: "data": {"url": "https://raw.githubusercontent.com/vega/vega-datasets/main/data/gapminder-health-income.csv"}. The resulting visualization will be exactly the same as the default one, but this approach can work for any datasets that you host for yourself on GitHub.

    GitHub screenshot highlighting the "raw" button