Hi,
I made this notebook : https://observablehq.com/@mavromatika/untitled
It won’t let me download the vega-lite chart when I click on the 3 dots, the download options won’t show. I can just comment or delete.
Any idea why ? Did I miss something ? Is it a bug ?
Outside of the notebook, you can only refer to named entities within the notebook. Thus, you’ll need to assign the output of the command to a variable name. I sent you suggestion via observable to illustrate.
Thank you for your reply. Does your suggestion solve the problem on your side, i.e. can you download the chart ? Because it doesn’t work for me. I’m using FF 72 on Windows, with some ad-blockers, if that could explain the behaviour.
Hmm… Did you reshare it? The notebook also has to be public.
Yes, I just republished it, and I still can’t download it. Does it work on your side ?
Unfortunately, Observable’s Download SVG and Download PNG feature fails because the vega-lite API wraps the SVG element with a DIV element. (I’m not sure why.) You can workaround that by removing the extra element:
const container = await plot.render({renderer: 'svg'});
return container.removeChild(container.firstChild);
Perhaps worth asking the Vega-Lite team why there’s an extra DIV?
@Mavromatika It’s worth noting, though, that the Embed Code appears to work. At least, I was able to get the following:
<div id="observablehq-8e6d1e51"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@mavromatika/untitled.js?v=3";
const inspect = Inspector.into("#observablehq-8e6d1e51");
(new Runtime).module(define, name => (name === "something") && inspect());
</script>
The Embed Code option is available for any named cell in a shared or public notebook. It doesn’t depend on the cell’s value. The download options, on the other hand, do depend on the value because we only show download options that are appropriate to the type of value (e.g., SVG or PNG for SVG, JSON or CSV for simple arrays).
Any idea why the download buttons do appears in this notebook : https://observablehq.com/@vega/vega-lite-api ?
The code doesn’t seem to be doing neither what you nor mcmcclur suggest. I’m baffled.
As Mike said, The “Download PNG” button appears because those return values are canvases. I don’t use Vega so I’m not sure why the return values are canvases but you can use a browswer’s inspector to see that.
As I said, you need to name the values to get the Embed Code and those cells aren’t named.
I investigated further and realized we’ve since incorporated a slightly more advanced heuristic. In addition to checking if the cell’s value is directly an SVG element (or a Canvas element), we test if it contains a single SVG element that covers more than 50% of the cell’s area.
The reason the Vega-Lite API notebook gets the Download PNG option, then, is that the charts are full-width! Whereas in your notebook, the charts are only 30% of the width (300 / 954) which fails to cross the threshold. You can get the Download SVG and Download PNG options to appear in your notebook if you make the window narrower! 
This is again because of the wrapper DIV element that Vega-Lite applies to the SVG. DIV elements are display: block, which means that the cell appears to be full-width even though the contained chart is only 300px wide.
Indeed, it works ! That explains the apparent magical behaviour. I’m happy you took the trouble to answer my question.
@mbostock I’m also seeing this problem where some of my Plot graphs don’t allow me to Download PNG. Check out the horizontal bars near the bottom, like mostCommonlySeenWithEngagementBold: Does The Algorithm Hate Your Friends? / Tyler Freeman / Observable
There is an outstanding bug which prevents charts with legends from being downloadable. In the meantime, you will need to remove the legend temporarily to download the chart.