I have used an online editor called Codepen, where you can get a real-time preview of your code, to show some examples.
1. Go to the ‘Developers’ section and click on the ‘Mapbox JS’.
2. Import the libraries to your HTML header:
3. Copy the text between the script tags:
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:
6. This website shares the code to add features such as markers, circles, icons…
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:
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:
5. This chart can be personalised adding more numbers, changing colours, transform it into a different graphic form…
1. Use their Spreadsheet Template to copy and paste the information:
2. Introduce the data. I’ve put random text, numbers and pictures to use it as an example:
3. Publish this spreadsheet to the web and copy the shareable link:
4. Paste the link into the Timline JS website and make any changes related to the language, font, etc:
5. Get the embed code:
6. Paste the code into your HTML section to see the visualisation:
Do you have any other examples? Let me know in the comments