How to get Medium to display visualization instead of code block for HTML

170 Views Asked by At

I'm working on adding an interactive plot in a Medium post.
Plot was created in Altair (I have another one in BERTopic I'm also trying to add), and is saved as .html.

On my computer, the .html opens in Chrome and has the features I want.

I've tried a variety of ways to embed it.
I keep ending up with raw HTML code on the page instead of the interactive plot.

My most recent attempt resulted in putting it in a public gist on GitHub, and it still just shares the code but no visualization.
I've tried both with the script option and with just the link, using embed and code options.

When I search, I keep coming across "help" that is about embedding a code snippet, not the visualization itself.

How do I get the visualization to appear instead?

import altair as alt
from vega_datasets import data
import pandas as pd
# https://towardsdatascience.com/simplest-way-of-creating-a-choropleth-map-by-u-s-states-in-python-f359ada7735e
states = alt.topo_feature(data.us_10m.url, 'states')
url = 'https://gist.github.com/mauvegrrl/40e6279e636b66d0a1f694a850334dc3/raw'
sbl = pd.read_csv(url)
upper_color = round(sbl['count'].max(), -2)

fill = alt.Chart(states).mark_geoshape().encode(
    tooltip=['state:N','count:Q', 'lists:N'],
    color = alt.Color('count:Q', 
                      scale=alt.Scale(domain=[0, upper_color]))
    ).project('albersUsa').properties(
    width=500,
    height=300
).transform_lookup(
    lookup='id',
    from_=alt.LookupData(sbl, 'id', ['state','lists','count'])
)

fill
1

There are 1 best solutions below

6
VonC On

If you need to access a raw gist, adding /raw at the end of the URL is enough.

https://gist.githubusercontent.com/mauvegrrl/921a6e3e76f7660fca71921f3af2a84e/raw

But yes, that would display the raw HTML code, because the response content-type would be text/plain; charset=utf-8.
This is what you see in "Adding GitHub Codes in Medium Articles"

I suspect a GitHub pages might not be easily embedded in Medium.
But a Jupyter Notebook can: if you can make your Altair graph in a Jupyter Notebook, that would be a good workaround.