Publishing interative visualizations

Publishing interative visualizations#

During this course and partiulalry in this lesson, we have created some interactive maps which we have exported as HTML files. You probabely make more HTML files when working on your final assignment if you create interactive visualizations. Here we will see one way of how you can publish these interactive visualizations and include them on you online portfolio.

For students of University of Helsinki using the university’s Blog pages, there are restrictions on adding blocks or plugins to their WordPress website. If you are hosting your portfolio on your own WordPress website or any other kind of page, adding HTML code is easily doable for example through use of plugins or Block page editors. Here we will see how we can publish the HTML file on GitHUb Pages and then add them to our Blog/Portfolio using iframe.

Remember, while GitHub Pages is recommended for its simplicity and no-cost hosting, you can host your HTML files on any web server that allows direct linking. Just replace the URL in the iframe snippet accordingly.

Part 1: Hosting Your HTML on GitHub Pages

  1. Create a GitHub Account

    • If you don’t already have one, sign up at github.com.

  2. Create a New Repository

    • Once logged in, click the “+” icon in the top right and select “New repository”.

    • Name your repository. Optionally, you can use <username>.github.io for a personal site. For project sites, you can choose any name.

    • Keep the repository public so GitHub Pages can host your site.

    • Click “Create repository”.

  3. Add Your HTML File

    • Click “uploading an existing file” within your new repository.

    • Drag and drop your HTML file (e.g., index.html) or use the file selector.

    • Commit the file to the repository.

Attention!
Note that you need to have one html file neamed index.html which will serve as your home page. You can have more html files with different names which can be accessed by adding /nameOfhtmlFile to the end of your home page address.

  1. Enable GitHub Pages

    • Navigate to your repository settings, find the “Pages” section.

    • Choose the branch where your HTML file is (usually on root in “main”).

    • Click “Save”. GitHub will provide a URL to your hosted page.

Part 2: Embedding HTML in WordPress with an iframe

  1. Prepare the iframe Code

    • With your HTML file now hosted, prepare an iframe snippet like so:

      <iframe src="https://<username>.github.io/<repository>/your_map.html" width="600" height="400" style="border:none;"></iframe>

    • Replace link in src with the address of your hosted map.

  2. Embed in WordPress

    • Log in to your WordPress dashboard and navigate to the page where you want to embed the map.

    • Switch to the Text editor, as you might have restrictions on using Gutenberg blocks or adding plugins.

    • Paste your iframe code into the editor where you want the map to appear.

  3. Publish and Test

    • After adding the iframe code, preview your page to ensure the map displays correctly.

    • Publish or update your page. Your map, hosted on GitHub Pages, should now be embedded within your WordPress site.

[ ]: