Thank you for taking the time to complete this exercise.
This project is to build a simple web page with a form, a table and "bubble" chart to display country data as selected by the user.
Please use HTML, JS and native JavaScript (also known as "Vanilla JS", use of jQuery is permissable) for the implementation of the core functionality described below.
Please do not use a JavaScript framework (React, Angular, etc).
To create the "bubble" chart you may use any suitable library; D3.js will, for example, plot a chart similar to the following image:
This exercise is to focus on your JavaScript code and not the appearance of the page.
Please clone (don't fork) this repository, complete the exercises below and then upload to a public repository on GitHub and send us the link.
Please don't spend more than 2 hours on this task. If you reach 2 hours, please commit your code as-is to your repository.
The source data for this exercise can be found within this repository at: data/countries.json
On your form please allow the user to select from the following plot options:
By country:
- Population size
- Number of borders
- Number of timezones
- Number of languages
By region:
- Number of countries in the region
- Number of unique timezones in the region
They should only be allowed to pick one plot point at a time, but also be allowed to change their selection and update the chart.
Please create a basic form for the user to make and update their selection, as described above.
Style as you feel appropriate, you may use any library to assist.
Plot the selected criteria on a "bubble" chart.
Underneath the chart display the same data as shown in the chart in a table.
When hovering over a bubble display a pop-up with more information about that country/region from the JSON data.