Reference local .csv file in altair chart

Question

I'm trying to use altair to visualize data, but I struggle to use it in the way I would like to use it: by not embedding the data inside the generated .html chart, but by referencing the local .csv file that contains the data. Otherwise, it would result in duplicating the data and therefore doubling the required storage.

Here's what I tried:

import os
import altair as alt
import numpy as np
import pandas as pd

# Dummy data.

n = 100
df = pd.DataFrame({
    "x": np.arange(n),
    "y": np.random.randn(n),
})

# Using the dataframe directly.

chartdf = alt.Chart(df).mark_line().encode(
    x='x:Q',
    y='y:Q',
)
chartdf.save('chartdf.html') 

# Now referencing the local .csv file.

filename = "data.csv"
df.to_csv(filename)
directory = os.getcwd()
fullpath = "file://" + os.path.join(directory, filename)

alt.data_transformers.enable('csv')
chartcsv = alt.Chart(fullpath).mark_line().encode(
    x='x:Q',
    y='y:Q',
)
chartcsv.save('chartcsv.html')

As a result, I get two .htmlfiles. Here's chartdf.html, correctly showing the plot, but storing the data in the source code.

And here's the chartcsv.html file, not displaying the chart.

What's the correct way to implement altair charts that use data stored in a local file?

user_2937831 · Answer

To use a local data file in an Altair chart, two conditions need to be met:

The file must be specified as a URL valid for the frontend (i.e. browser) displaying the chart
The URL must satisfy the security requirements of the browser (e.g. must satisfy cross-origin policies)

Unfortunately, the approach to ensuring (1) and (2) are met is highly dependent on what frontend you're using (i.e. JupyterLab vs. Jupyter Notebook vs. Colab vs. Streamlit vs. ...) and within each of these can even depend on what version of the notebook/server you're running, what browser you're using, what browser security settings you have enabled, whether you're using http or https, whether or not you use an ad-blocker, what operating system you're using, the precise details of how you launched your notebook server or opened your HTML file, and probably many other variables.

For this reason, as the primary author of Altair, I generally discourage people from attempting to use local data files, because it's quite difficult to answer seemingly simple questions like "how do I reference a local CSV file in an Altair chart?".

If you want to press forward, I would suggest opening your browser's javascript console, where you'll see warnings or errors that could help in diagnosing how you can change things to meet requirements (1) and (2) above within your own setup. If you want something that will just work, I would suggest using pandas to load the file into a dataframe, and create the chart that way.

user_5763327 · Answer

CORS issue

You can not load data from file:// as it creates Cross-Origin error in Firefox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///data/data.csv. (Reason: CORS request not http).

The easiest is to start de dummy http server in the same directory as the HTML file generates python -m http.server

delimiter issue

By default, a csv is supposed to be delimited by comma (,), a tsv by tabs and a dsv by any character that must be specified.

I manage to instruct altair to do it with : altair.Chart({"url":'data/data.csv',"format":{'type':"dsv"}})

The python dict passed to altair.Chart method mimics the json object that must be passed to vega.

Reference local .csv file in altair chart

2 Answers

CORS issue

delimiter issue