by Jack Dougherty, last updated March 15, 2017
After you publish your data visualization to the web, how do you convert its weblink (or URL) into an iFrame, to embed in your personal website?
The answer depends: did you publish your visualization as a code template on GitHub Pages? Or did you publish it using a drop-and-drag tool such as Google Sheets or Tableau Public?
If you published your visualization from a code template (such as Leaflet or Highcharts) with GitHub Pages, follow these easy steps:
1) Copy the URL of your published visualization on GitHub, which will be in this format:
iframe tags to the beginning and end, insert
src= and enclose the URL inside quotation marks, like this:
3) Optional: Insert preferred width and height (in pixels by default, or percentages), like this:
<iframe src="https://USERNAME.github.io/RESPOSITORY" width="90%" height="400"></iframe>
4) Go to the appropriate tutorial to embed your iframe in your personal website:
Or, if you published your visualization using a drop-and-drag tool, see these tutorials:
Improve this book: Donate to DataViz students and add comments or revisions.