This interface is designed with the D3.js library. Please see the documentation for further details about code syntax and functionality: https://github.com/d3/d3/wiki

This folder is updated to only consist of json-files, which is the choice of data format used for the visualizations.

• oxygen.json: A very basic mocked flow from https://www.mockaroo.com/schemas/new
• db_flow1.json: A more realistic attempt on a mocked database flow.
• db_flow2.json: Another realistic version of a mocked database flow.

Each file in this folder has code-comments for guiding. In case the code is unfamiliar or difficult to follow, please look at the documentation. In order to preview the graphs (Not a completed styling!), visit https://soutea.github.io/Data-Viz-Interface/ and add the path to the wanted version. For example, if graph_1.html will be viewed, visit https://soutea.github.io/Data-Viz-Interface/Graphs/graph_1.html

• graph_1.html: This graph has hardcoded values and is based on the data found in oxygen.json
• graph_2.html: This graph has hardcoded values and is based on the data found in db_flow2.json
• graph_generic.html: This graph has a generic approach and is based on the data found in db_flow2.json. Note that it is not available to preview without customization of the code. Instead, the primary purpose is for code review.
• graph_animated.html: This graph is outdated and belongs to an older prototype. Has working transitions, allowing a dynamic toggling.

Feel free to clone and use the repository as you wish. If another data flow is to be bound, just replace the link to another web link hosting the data. Remember to rebound the labels of the new data flow to the scatter points. If the hardcoded version of the interface is to be used, adapt the axes to show the correct time interval. In the case where the generic interface will be used, the axes do not need to be changed and will match accordingly. Note that the generic interface requires jQuery to work. For more information, contact @Soutea.