Public
Edited
Jun 24, 2024
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
combined_df_umap.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
pyodide_version = "v0.21.0"
pyodide = {
const pyodide = await require(`//cdn.jsdelivr.net/pyodide/${pyodide_version}/full/pyodide.js`);
return pyodide.loadPyodide({
indexURL: `https://cdn.jsdelivr.net/pyodide/${pyodide_version}/full/`
});
}
embed = require("vega-embed@6")
import { py }
with { pyodide as pyodide }
from '@gnestor/pyodide@373'
deps_installed = py`import micropip
await micropip.install("altair")
await micropip.install("vega_datasets")`
chart_spec = py`# start with a fake dependency on the libraries being installed:
# ${deps_installed}
# now the basic altair example:
import altair as alt
domain_ = ['train', 'Random', 'Custom']
range_= ['#a8a6a3', '#102ce0', '#fa7907'] #evitare conflitti con funzione predefinita
chart = alt.Chart(combined_df_umap).mark_circle(opacity=0.5, size=50).encode(
alt.X('0:Q'),
alt.Y('1:Q'),
tooltip=['neighbourhood'],
color = alt.Color('neighbourhood', scale=alt.Scale(domain=domain_, range=range_))
).properties(
width=400,
height=400,
title="Train Data and Custom Neighbourhood"
).interactive()
# this outputs Map, not Object:
# chart.to_dict()
# which, we could probably correct for directly
# for now, we'll take the hit of encoding and recoding it to JSON:
chart.to_json()`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
