CSS, data, HTML, Interactivity, Javascript

3 useful sources to add interactivity to your website

This post is for beginners (like me) that are learning HTML, CSS and Javascript. Below are three useful websites to embed maps, charts and timelines to your HTML or Javascript code and will help you (me) to not get crazy.

I have used an online editor called Codepen, where you can get a real-time preview of your code, to show some examples.

1. Mapbox

Allows you to import a map into your Javascript code and change features on CSS.

1. Go to the ‘Developers’ section and click on the ‘Mapbox JS’.

2. Import the libraries to your HTML header:

Screen Shot 2016-02-26 at 20.10.21

3. Copy the text between the script tags:

Screen Shot 2016-02-23 at 15.41.58.png

4. Paste the code within the Javascript section on your document:

Screen Shot 2016-02-23 at 20.02.41

If you want to focus the map on a particular location, you will need to get the latitude and longitude of this place. Read this previous post to know how to do it.

5. With the lat/long you can now zoom and focus the map on a particular area:

Screen Shot 2016-02-23 at 16.17.00

6. This website shares the code to add features such as markers, circles, icons…

output_7cu0Tg

2. Chartist

It allows you to embed interactive charts, change their features and graphic forms or add information.

1. Import the library to your HTML header.

Look for the ‘Getting started‘ section and find the ‘One, Two, Three, CSS!’ title. Clik on the ‘Show CDN code’ and copy the script code between the quotation marks:

Screen Shot 2016-02-26 at 23.25.12.png

Copy: //cdn.jsdelivr.net/chartist.js/latest/chartist.min.css

2. Jump into the ‘As simple as it can get’ section so you don’t need to download and install anything on your computer.

3. Copy the <div> code and insert it into your HTML body document:

Screen Shot 2016-02-26 at 23.36.57

4. Copy the data related to the chart and paste it within the Javascript section:

Screen Shot 2016-02-26 at 23.36.45

5. This chart can be personalised adding more numbers, changing colours, transform it into a different graphic form

output_KYoV1o

3. Timeline JS

1. Use their Spreadsheet Template to copy and paste the information:

Screen Shot 2016-02-23 at 19.45.37.png

2. Introduce the data. I’ve put random text, numbers and pictures to use it as an example:

Screen Shot 2016-02-23 at 19.45.20

3. Publish this spreadsheet to the web and copy the shareable link:

Screen Shot 2016-02-23 at 19.51.13.png

Copy the link in the centre of the document

4. Paste the link into the Timline JS website and make any changes related to the language, font, etc:

Screen Shot 2016-02-23 at 19.52.04

Paste the Google Spreadsheet URL

5. Get the embed code:

Screen Shot 2016-02-23 at 19.52.12

6. Paste the code into your HTML section to see the visualisation:

Screen Shot 2016-02-23 at 19.47.01

Do you have any other examples? Let me know in the comments

Advertisements
Standard

One thought on “3 useful sources to add interactivity to your website

  1. Pingback: Just add JavaScript: use these 3 tools to get instant interactivity | Online Journalism Blog

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s