Embed interactive viz in blog post

[de-la-viz]

Interactivity is useful in this case. Can we embed the plot in the blog post also?

[de-la-viz]

Solution 1: Embedd html as iframe

I saved the htmlwidget as self-contained .HTML file. It is there: https://github.com/frontpagedata/ctr-study/blob/master/plots/ranking_over_time_widget-self_contained.html (GitHub does not render HTML files, but if you download it or pull the repo, you can open it with the browser)

==> we could save this in a public repo or a public gist, and embed it as an iframe in the blog post.

Drawback: iframes are not responsive + I have never done it and could run into expected troubles, but seems doable....

Potential Issue: I am not 100% sure if it will work. It should, but I am not sure where Rankinks.io blog is hosted, what technology they use, if it allows for the embedding of iframes (it should, but who knows!), ...

---

Documentation:

• https://stackoverflow.com/questions/34439928/embedding-an-r-htmlwidget-into-existing-webpage
• https://rdrr.io/cran/htmlwidgets/man/saveWidget.html
• https://stackoverflow.com/questions/7649361/github-gist-page-wont-load-in-iframe?noredirect=1&lq=1
• https://stackoverflow.com/questions/28338017/is-there-a-way-to-embed-github-code-into-an-iframe
• https://docs.github.com/en/rest/reference/gists
• https://gist.github.com/Albert-W/e37d1c4fa30c430c37d7b1b1fe9b60d8 (not sure if this easy, according to URLs just above)

[de-la-viz]

Solution 2: Reproduce Interactive Charts in DataWrapper

E.g. https://www.datawrapper.de/_/cRGUG/

Drawback: additional work, different design

[de-la-viz]

Solution 3: Use static PNG

--> see there: https://github.com/frontpagedata/ctr-study/blob/master/plots/ranking_over_time.png

[de-la-viz]

==> We go with DataWrapper.

The first chart is there: https://www.datawrapper.de/_/cRGUG/, embeddable with this as an iframe:

<iframe title="Ranking Over Time" aria-label="Interactive line chart" id="datawrapper-chart-cRGUG" src="https://datawrapper.dwcdn.net/cRGUG/9/" scrolling="no" frameborder="0" style="border: none;" width="600" height="400"></iframe>

or a responsive iframe:

<iframe title="Ranking Over Time" aria-label="Interactive line chart" id="datawrapper-chart-cRGUG" src="https://datawrapper.dwcdn.net/cRGUG/9/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="400">
</iframe>
<script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
</script>

This still has to be done for the second chart. The data is there: https://github.com/frontpagedata/ctr-study/blob/master/proc_data/fluctuations_data_chart2.csv

[de-la-viz]

This still has to be done for the second chart. The data is there: https://github.com/frontpagedata/ctr-study/blob/master/proc_data/fluctuations_data_chart2.csv

[de-la-viz]

https://datawrapper.dwcdn.net/cRGUG/10/

<iframe title=“Ranking Over Time” aria-label=“Interactive line chart” id=“datawrapper-chart-cRGUG” src=“https://datawrapper.dwcdn.net/cRGUG/10/” scrolling=“no” frameborder=“0" style=“width: 0; min-width: 100% !important; border: none;” height=“400"></iframe><script type=“text/javascript”>!function(){“use strict”;window.addEventListener(“message”,(function(e){if(void 0!==e.data[“datawrapper-height”]){var t=document.querySelectorAll(“iframe”);for(var a in e.data[“datawrapper-height”])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data[“datawrapper-height”][a]+“px”}}}))}();
</script>   

https://datawrapper.dwcdn.net/vvZum/1/

<iframe title=“Fluctuations of the Rankings Over Time” aria-label=“Interactive line chart” id=“datawrapper-chart-vvZum” src=“https://datawrapper.dwcdn.net/vvZum/1/” scrolling=“no” frameborder=“0" style=“width: 0; min-width: 100% !important; border: none;” height=“400"></iframe><script type=“text/javascript”>!function(){“use strict”;window.addEventListener(“message”,(function(e){if(void 0!==e.data[“datawrapper-height”]){var t=document.querySelectorAll(“iframe”);for(var a in e.data[“datawrapper-height”])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data[“datawrapper-height”][a]+“px”}}}))}();
</script>