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?
Published with a code template on GitHub Pages
If you published your visualization from a code template (such as Leaflet or Chart.js) with GitHub Pages, follow these easy steps:
- 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:
- 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>
- Go to the appropriate tutorial to embed your iframe in your personal website: