Skip to content

Data Visualizer

Jump to bottom
Jeff Sieu edited this page Apr 11, 2021 · 8 revisions

Data Visualizer

The data visualizer tool is a tool that allows the visualization of data in a convenient way.

draw_data is the Source function corresponding to the data visualizer.

How to use

draw_data is a varargs function; multiple data structures can be used as parameters in a single draw_datacall. Eachdraw_data` call maps to a single step, which can then be stepped through using the left and right arrow keys (when the side content panel is focused), or the "Prev" and "Next" buttons.

For example, the following will generate a single step containing two drawings, one for each list.

draw_data(list(1,2,3), list(4,5,6));

Code structure

The code for the data visualizer resides in src/features/listVisualizer The main outfacing code is in ListVisualizer.tsx, where the static functions init, drawData, and clear are exposed. This is used by the corresponding side content React component src/commons/sideContent/SideContentListVisualizer.tsx` (the one responsible for rendering the content of the draw data tool at the right side of Source Academy Playground) to render the drawings of the data.

The data visualizer also makes use of:

  • src/commons/saga/WorkspaceSaga.ts
  • src/commons/util/JsSlangHelper.ts

init

ListVisualizer.init is called by SideContentListVisualizer to attach a listener function setSteps. setSteps will be called by ListVisualizer when the steps -- each corresponding to a draw_data call -- are updated.

draw_data

ListVisualizer.drawData is the function that corresponds to draw_data in Source Academy.

The way that draw_data invokes this is via JsSlangHelper.visualizeList, which is called by Source.

clear

ListVisualizer.clear is used to reset the list visualizer's state whenever the code is re-run, so as to clear the drawings.

What happens in a single "run" of the code in Source Academy is:

  1. WorkplaceSaga cleans up the environment, and calls ListVisualizer.clear to reset the list visualizer's state.
  2. Each call of draw_data in the code corresponds to a Step, which corresponds to an array of drawings, one for each structure in the varargs. The internal steps list of ListVisualizer is then appended with the new Step, and ListVisualizer.setSteps is called.
  3. At the end of all the calls, the side content React component has an array of Steps corresponding to the draw_data calls.
Clone this wiki locally