Interactive employability chart
Budget: €8 – €30 EUR
Functional Requirements Document
1. Introduction
1.1 Purpose
This document aims to detail the functional requirements for the development of an interactive web visualization based on a Sankey diagram, using the D3.js library and its d3-sankey extension. The visualization is intended to represent data flows, allowing the user to interact with nodes and links to explore detailed information and relationships between different entities.
1.2 Scope
The project will consist of the development of a web page that incorporates an interactive Sankey diagram. This diagram will allow users to visualize and interact with the represented data. Interactions will include clicks on nodes to highlight paths and display tooltips, as well as visualize related detailed information in a dedicated section of the interface.
2. General Requirements
2.1 Platform and Technology
The visualization must be implemented using HTML, CSS, JavaScript, and the D3.js library along with its d3-sankey module.
It must be compatible with modern web browsers, including Chrome, Firefox, Safari, and Edge.
The interface must be responsive and adaptable to different screen sizes.
2.2 Data and Integration
The application must be designed to consume test data in JSON format. These test data should be easily exchangeable with data from an external API in the future.
The test data must include at least 10 nodes and 15 links to demonstrate the functionality of the visualization.
3. Functional Requirements
3.1 Sankey Diagram Visualization
RF1: The Sankey diagram must display nodes and links that represent data flows between different entities.
RF2: Nodes must be dynamically colored based on predefined categories.
3.2 User Interaction
RF3: The nodes of the diagram must be interactive and respond to click events.
RF3.1: Clicking on a node should highlight the links that connect that node with other nodes.
RF3.2: A tooltip should appear over the highlighted nodes, showing specific information of the node, such as its name and any relevant metrics.
RF4: Clicking on a node should update a section of the interface (to the right of the diagram) to display detailed information related to the selected node. This information will include indicators and a table with broken-down values.
3.3 Test Data and Format
RF5: The test data must be supplied in a well-formed JSON format, which includes the necessary structure for nodes and links.
RF6: There must be documentation describing the JSON data format, to facilitate future integration with an external API.
4. Deliverables
Complete source code of the visualization.
Test data in JSON format.
Technical documentation, including:
Instructions for setting up and deploying the application.
Specification of the JSON data format.
Guide for integration with an external API.
5. Additional Considerations
Attention must be paid to accessibility and user experience when designing interactions.
The application must be easy to maintain and extend, with well-organized and documented code.
6. Mockups
(image1) Initial view without selecting any node
(image2) View after a node has been selected, whether from the left or right section.
1. Introduction
1.1 Purpose
This document aims to detail the functional requirements for the development of an interactive web visualization based on a Sankey diagram, using the D3.js library and its d3-sankey extension. The visualization is intended to represent data flows, allowing the user to interact with nodes and links to explore detailed information and relationships between different entities.
1.2 Scope
The project will consist of the development of a web page that incorporates an interactive Sankey diagram. This diagram will allow users to visualize and interact with the represented data. Interactions will include clicks on nodes to highlight paths and display tooltips, as well as visualize related detailed information in a dedicated section of the interface.
2. General Requirements
2.1 Platform and Technology
The visualization must be implemented using HTML, CSS, JavaScript, and the D3.js library along with its d3-sankey module.
It must be compatible with modern web browsers, including Chrome, Firefox, Safari, and Edge.
The interface must be responsive and adaptable to different screen sizes.
2.2 Data and Integration
The application must be designed to consume test data in JSON format. These test data should be easily exchangeable with data from an external API in the future.
The test data must include at least 10 nodes and 15 links to demonstrate the functionality of the visualization.
3. Functional Requirements
3.1 Sankey Diagram Visualization
RF1: The Sankey diagram must display nodes and links that represent data flows between different entities.
RF2: Nodes must be dynamically colored based on predefined categories.
3.2 User Interaction
RF3: The nodes of the diagram must be interactive and respond to click events.
RF3.1: Clicking on a node should highlight the links that connect that node with other nodes.
RF3.2: A tooltip should appear over the highlighted nodes, showing specific information of the node, such as its name and any relevant metrics.
RF4: Clicking on a node should update a section of the interface (to the right of the diagram) to display detailed information related to the selected node. This information will include indicators and a table with broken-down values.
3.3 Test Data and Format
RF5: The test data must be supplied in a well-formed JSON format, which includes the necessary structure for nodes and links.
RF6: There must be documentation describing the JSON data format, to facilitate future integration with an external API.
4. Deliverables
Complete source code of the visualization.
Test data in JSON format.
Technical documentation, including:
Instructions for setting up and deploying the application.
Specification of the JSON data format.
Guide for integration with an external API.
5. Additional Considerations
Attention must be paid to accessibility and user experience when designing interactions.
The application must be easy to maintain and extend, with well-organized and documented code.
6. Mockups
(image1) Initial view without selecting any node
(image2) View after a node has been selected, whether from the left or right section.