index.html Code Structure

(This page explains the code structure to familiarize a new developer with the project.)

The design explorer index.html code is broken up into different sections of script, identified below by their commented headers in the code.

• Dynamic Divs script
  This section deals with hiding and showing the collapsible page elements: the legend/sliders side bar, the parallel coordinates graph, and the radar chart. The updataLayoutOnSelect function adjusts the page when a user selects an image and the updateLayoutOnDeselect function reverses this selection.

• radar chart
  The radar chart follows from the parallel coordinate graph. The updateRadarChart function draws a radar chart with data from the parallel coordinates graph. The resizeRadarChart scales the chart up and down and is called when the legend/slider side bar opens and closes. And the cleanRadarChart function removes the radar chart.

• process input data
  analyzeInputData does the initial data processing, such as separating inputs, outputs, images, etc. getCaseID creates a unique id for each case, based on the input values. prepareSlidersInfo formats the data to be used in the sliders.

• draw parallel coordinates graph
  This happens in the function drawParallelCoordinates. updateLabels moves every other label up.

• draw legend
  drawLegend creates the toggle legend in the size bar.

• add sorting dropdowns
  addSortDropDowns adds drop down menus to sort the thumbnails based on different parameters.

• add thumbnail images to both thumbnail divs
  getTitle gives a unique title to each image, based on all its input and output parameters. updateImageGrid changes which thumbnails are shown based on data, and addPlaceholderImage adds an image with toggle between 2D and 3D.

• set up events between chart and graphs
  The setupEvents function deals with brushing the parallel coordinate graph, the Reset Selection, Zoom to Selection, and Exclude selection buttons, and the interaction between the legend and the parallel coordinates graph. It also has the updateGraph function, which updates the entire graph with new data.

• import data
  This section of code runs when the window loads, triggering the csv file read and all the set up functions.

• setting up sliders
  These functions set up the sliders and their functionality.

• 3D Viewer
  These functions initiate the 3D viewer and the toggle between 2D and 3D functionality.

• rating system
  This sets up the ability to rate cases.

• save to CSV
  saveToCSV allows the user to download a csv with their selected data.