D3 Step-by-step Guide — (Part 4 of 4) Singapore HDB Resale Price on Planning Map — GitHub Pages

This is part 4 of the 4-part guide. In this final part, we upload what we have created onto GitHub Pages to publish it.

This is a practical step-by-step guide to creating a map visualization in d3. In this 4-part guide, we set off to create a visualization to display whether the area where the resale prices of HDB flats have changed throughout the years. Check out Part 1 here.

Here’s a demo of what you will be creating in this tutorial. Here’s where you can find the source code.

Tutorial Parts

• Ideation
• Data Processing
• D3 Visualization development
• Deployment on github.io (this part)

Why Publish Your Work

Now that you have created a d3 visualization, you can put it online and share it. But you might be wondering, why should you do that? Isn’t it just another visualization, that many may have already done? Why should you put it online?

Learning

One word, feedback. Now that you have created it, you’d want feedback. What went well? What could have been done better? What could you do additionally on top of this? You would want others to share feedback to you so that you can learn from this.

Showcasing

Another use is for sharing your work with your friends and colleagues to demonstrate what you have created. You can put this up for sharing with your tech meet-up groups as well. This lets you show off what you have made and you can ‘walk the talk’ when talking about what you have learnt.

Giving Back

Apart from how it will benefit you, consider how it can benefit others as well. Someone who is learning how to do what you already know. Or someone who is interested in information visualizations but wants some inspiration on what else can be done. Your visualization may make the difference.

What is GitHub Pages

GitHub Pages is a free web host for users to create a website and hosts it for you. The interface to add files is via git and GitHub has scripts that will help you to deploy and publish the site.

How to Get Started

First, create a new repository with a name of ‘yourusername.github.io’. Ensure that it is a public repository.

Now, go into your newly created repository and click on ‘Clone or download’. You will see the SSH URL displayed. You can click on the copy button to copy the URL.

Clone and Copy Files In

Go to a folder that is empty and clone the URL that you were given with the following command:

git clone https://github.com/{your-username}/{your-username}.github.io

It will create a new folder called {your-username}.github.io. Now copy the visualization folder that you have created into the newly cloned folder. Give it a name as you will probably be creating more visualizations in the future. You can consider using: hdb-resale-visualizations.

If your file is stored on a folder called hdb-resale-visualizations, it will be hosted on https://{your-username}.github.io/hdb-resale-visualizations/.

Note: Remember to add the “/” when linking to a directory with an index.html file. As https://{your-username}.github.io/hdb-resale-visualizations will be attempting to load a hdb-resale-visualizations.md file from your main directory.

Tip: Remove your node_modules directory or add it to a .gitignore file.

Commit and Push

Once you’re done, run the following commands to add the files to the repository and push it to GitHub.

git add --all
git commit -am "my first github pages commit"
git push

Change “my first github pages commit” with a message that you would like to use. Remember that your commit messages are public and can be viewed by anyone viewing your GitHub account.

And We’re Live!

Go ahead, navigate to https://{your-username}.github.io/hdb-resale-visualizations/ and you will be able to see your newly created page load your newly created visualization.

If you’re still here, thank you for following through the entire tutorial. Do go ahead and Follow my Medium account if you like my articles. If you have any questions please leave them below and I will get to them.