Work sample for the UI/UX Developer position at RiskThinking.AI

You are given a sample Climate Risk Rating dataset in order to solve the following problems.

Objective: Create an interactive map that displays the geographic locations from the provided dataset and highlights the relative risk levels using color-coded markers.

1. Set up a Next.js boilerplate app with the following command under Node v16 environment

   yarn create next-app risk-viz --ts --tailwind --eslint --src-dir --import-alias "@/*" --experimental-app

   or

   npx create-next-app@latest risk-viz --ts --tailwind --eslint --src-dir --import-alias "@/*" --experimental-app

2. Load and parse the sample datasets.
3. Integrate a mapping library (e.g., Mapbox, Leaflet, Google Maps).
4. Implement a control for users to select different decades.
5. Display the locations (Lat, Long) from the dataset as markers on the map of a given decade year.
6. Color-code the markers based on their Risk Rating (climate risk score) derived from the dataset.
7. Add interactivity to the map, such as zooming and panning, and display a tooltip with the Asset Name and Business Category on marker hover.

Objective: Display the climate risk data in a table format, allowing users to sort and filter the dataset.

1. Create a data table component.
2. Load and display the sample dataset with a given year selection (from Problem 1) in the table.
3. Implement sorting functionality on reasonable columns.
4. Implement filter functionality on reasonable columns, especially risk factors.

Objective: Create a line graph to visualize the changes in risk levels over time for a given location, Asset or Business Category.

1. Set up a charting library (e.g., Chart.js, D3.js, Highcharts).
2. Implement a line graph component that displays the Risk Rating over time (Year) for a selected location (Lat, Long), Asset, or Business Category.
3. Add interactivity to the graph, such as tooltips displaying Asset Name, Risk Rating, Risk Factors, and Year.
4. Implement controls for selecting different locations, Assets, or Business Categories to visualize their risk levels over time.
   • You may need to perform some data aggregation in order to achieve this.

Objective: Combine the components from the previous problems into a cohesive web app, ensuring optimal performance and user experience.

1. Design a user interface that integrates the map, data table, and line graph components.
2. Implement state management to handle user interactions and data flow between components (e.g., selecting a location on the map updates the line graph and data table).
3. Optimize the app's performance by implementing lazy loading for components and efficient data handling, such as pagination for the data table.
4. (Bonus) Implement reasonable tests for utility functions, data flow hooks, and React components.

• You are encouraged to use any open source libraries to assist with the given problems.
• You can use AI assistants (such as ChatGPT or GitHub Copilot), but make sure to include the full interaction/chat log along with your solution.
• Attribute tutorials, Stackoverflow Q&As, and any other references along with your solution.
• You are encouraged to ask any questions you may have during the hiring process, including but not limited to questions related to the work sample itself.
• Keep in mind that both the amount and the dimension of the data we work with are much higher in reality, so try to demonstrate that your solutions can handle beyond the sample scale.
• Try to think of yourself as the user of the web app, who may want to have certain questions answered, such as:
  • What are the top risk factors by ranking?
  • What regions are at the most risk?
  • What risk factors impact a particular category the most?
  • Any others that you can think of...
• You are more than welcome to keep your solutions public as a part of your professional portfolio.

1. Host your solution code in a open source repository (e.g. GitHub).
2. Deploy your solutions through a suitable service (see below for recommended services, especially Glitch).
3. Reply to the original work sample email with your solution source and deployment links.

Some recommended services for your deployments are:

• Glitch
• GitHub Pages
• Vercel
• Netlify

https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/ https://blog.devgenius.io/next-js-with-mapbox-gl-js-map-707fed31beea