vega-embed | Publish Vega visualizations as embedded web components | Data Visualization library

The issue is that you have special characters in your column name, which need to be escaped in Altair (see e.g. the field documentation in https://altair-viz.github.io/user_guide/generated/core/altair.Color.html?highlight=escape)

Why is this? Characters like . and [] in Vega-Lite are used to access nested attributes of columns.

The easiest approach would be to avoid such special characters in your dataframe column names. Alternatively, you can escape the special characters with a back-slash (\) though be careful about the effect of back-slashes in Python strings (use an r prefix for raw string encoding). For example:

Bring the entire encoding outside to keep it common for both layers and provide fill in mark text to apply some color.

Refer below code or editor link:

The chart variable in the javascript should not be a string, it should be a JSON object. Also, django's default behavior of escaping special charcters will result in invalid JSON. To fix this, you can use something like this (notice there are no quotes):

We resolved an identical problem by adding "esModuleInterop": true and "allowSyntheticDefaultImports": true to our tsconfig.json file:.

The complete file now looks like this:

The problem was that del is a windows command. We need to switch to del-cli. I fixed it in https://github.com/vega/vega-embed/commit/eaa96696e8f7c1a1f6950968a0f5494e6b73ce91.

There are at least 2 ways to do so as far as I know:

1. Band : Adding bandPosition in x encoding (easier as designed) See Vega Editor

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

1. The file must be specified as a URL valid for the frontend (i.e. browser) displaying the chart
2. 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.

Since canvas is an HTML element, you would use CSS and the box-shadow property to alter its presentation.

Also, it is invalid to have any content after the closing body tag and before the closing html tag. So, if you were going to need that last script element (which you don't now), it should be just prior to the closing body tag.

Lastly, the following line:

Passing opt={renderer: 'svg'} as an argument to the embed function allows one to access and modify the different visualization elements through the DOM. Find below a simple example where I access and change the color of the first bar using D3: