How can I insert a Google Ngram chart relatively easily?

Question

I know this question probably belongs to the Meta of Metas, but I figure this is a more familiar place to me. Plus, Ngram is definitely a very important external feature for ELL and ELU users.

I was trying to insert a Google Ngram chart into this question. Google Ngram has an Embed Chart function that allows users to access the chart content from a link embedded in their web pages. It gives me a long HTML sentence:

<iframe name="ngram_chart" src="https://books.google.com/ngrams/interactive_chart?content=swim+team%2Cswimming+team&year_start=1800&year_end=2000&corpus=15&smoothing=3&share=&direct_url=t1%3B%2Cswim%20team%3B%2Cc0%3B.t1%3B%2Cswimming%20team%3B%2Cc0" width=900 height=500 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

Consulting the site's help section, I see

You can also use standard HTML image syntax, which allows you to scale the width and height of the image.

<img src="http://example.com/sample.png" width="100" height="100">

URLs can be relative or full.

So accordingly I reformatted the Ngram sentence to this:

<img src="https://books.google.com/ngrams/interactive_chart?content=swim+team%2Cswimming+team&year_start=1800&year_end=2000&corpus=15&smoothing=3&share=&direct_url=t1%3B%2Cswim%20team%3B%2Cc0%3B.t1%3B%2Cswimming%20team%3B%2Cc0" width=300>

It didn't work and I had to snap a picture, save, and upload it. Is it because the format is not supported? Or did I miss something here?

Answer 1

The NGrams embed code provides an interactive chart, an SVG chart where mouse-ing over or clicking on particular points or elements produces different effects and behaviors and displays different information. Imgur cannot handle SVGs and seems in no hurry to implement support for them.

The easiest way to embed an NGram is as simple as it is undocumented: use the src URL of the iframe, but replace interactive_chart with chart and strip out the lengthy direct_url parameter, which seems to confuse imgur.

Thus, from

<iframe name="ngram_chart" src="https://books.google.com/ngrams/interactive_chart?content=swim+team%2Cswimming+team&year_start=1800&year_end=2000&corpus=15&smoothing=3&share=&direct_url=t1%3B%2Cswim%20team%3B%2Cc0%3B.t1%3B%2Cswimming%20team%3B%2Cc0" width=900 height=500 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>`

take

https://books.google.com/ngrams/chart?content=swim+team%2Cswimming+team&year_start=1800&year_end=2000&corpus=15&smoothing=3

and supply it as a link from the web.