create tutorial

jsdoc.json

@@ -2,7 +2,7 @@
   "plugins": ["plugins/markdown"],
   "recurseDepth": 10,
   "source": {
-    "include": ["src"],
+    "include": ["src","tutorials"],
     "excludePattern": "(node_modules/|docs)",
     "excludePattern": "(^|\\/|\\\\/)_"
   },
@@ -13,13 +13,19 @@
   },
   "templates": {
     "cleverLinks": false,
-    "monospaceLinks": false
+    "monospaceLinks": false,
+    "default": {
+      "staticFiles": {
+        "paths": ["./tutorials/img"]
+      }
+    }
   },
   "opts": {
     "template": "templates/default",
     "encoding": "utf8",
     "destination": "./documentation/",
     "recurse": true,
+    "tutorials": "./tutorials",
     "readme": "README.md"
   }
 }

main.js

@@ -172,7 +172,7 @@ function openFile() {
         checkType = checkType[checkType.length - 1].split('.');
 
         if (checkType[1] == 'csv') {
-            console.log('csv');
+
             csv()
                 .fromFile(fileName)
                 .then((jsonObj) => {
@@ -184,7 +184,7 @@ function openFile() {
                             }
                         }
                     }
-                    console.log(jsonObj);
+
                     mainWindow.webContents.send("file-data", jsonObj)
                 })
         }
@@ -196,7 +196,7 @@ function openFile() {
         if(checkType[1]=='tsv' || checkType[1]=='txt'){
             let jsonObj = fs.readFileSync(fileName, "utf8");
             jsonObj = tsvJSON(jsonObj);
-            console.log(jsonObj);
+
             mainWindow.webContents.send("file-data", jsonObj);
 
         }

src/controllers/controlles-UI-Logical/uiLogic.js

@@ -150,7 +150,6 @@ $(document).ready(function () {
         callback: function (key) {
           if (_data_) {
             let content = $('#' + $(this).attr('data-nodeid')).children('.partition-content')
-            // let content = $("#"+$(this).attr("data-nodeVis")).children(".partition-content");
             let partition = $(this).parents('.partition-node').attr('id')
             content.empty()
             addMenu(content)
@@ -195,6 +194,13 @@ $(document).ready(function () {
           ipc.send('not-data')
         }
       },
+      /**
+       * @description variable with the json object with the name for the button and the name of the library 
+       * view vistechlib that's enough to add a new view
+       * @example {ParallelCoordinates': {name: 'Parallel Coordinates'}} 
+       * @tutorial add_vis
+       *
+       */ 
       items: {
         'ParallelCoordinates': {name: 'Parallel Coordinates'},
         'ParallelBundling': {name: 'Bundled Parallel Coordinates'},
@@ -318,6 +324,7 @@ function updateInteface () {
   /**
    * use **colors()** To create options in the html color menu and add the color selection inputs as needed, you can add various inputs or color range. Use the html element in the html **colorSelector** class to select and update options.
    * @interface
+   * @tutorial menu-color
    * */
   const colors = () => {
     let items = $('.colorSelector').children('.optColor').length
@@ -426,6 +433,7 @@ function updateInteface () {
   /**
    * use **filter()** To create options in the html menu and filter according to the data, selector can be created for categorical attributes or numeric range for continuous attributes. and use the html **filter** class to add options and interactions
    * @interface
+   * @tutorial filter
    * */
 // filter-------------------
   const filter = () => {
@@ -544,6 +552,7 @@ function updateInteface () {
   /**
    * use **hierarchies()** create data hierarchies for hierarchical viewing, and drag and drop control, the hierarchy options html interface is created and multiple hierarchies can also be added or removed through interactions. html **selectHierarchy** class is used to create html elements
    * @interface
+   * @tutorial hierarchy
    * */
 // hieraquies----------
 
@@ -632,6 +641,7 @@ function updateInteface () {
   /**
    * use **defaultMenu()** to create the default item creation color control html and higlight. use html select **input.setColorDefault** and **input.setHighlightColor** to create elements and changes
    * @interface
+   * @tutorial default-colors
    * */
   const defaultMenu = () => {
     $('input.setColorDefault').change(function () {
@@ -649,6 +659,7 @@ function updateInteface () {
   /**
    * use **filter_by_dimension()** create html data dimension filter options, create filter option checbox and use html class **menu-filter_dimension** to add checkboxes
    * @interface
+   * @tutorial filter-dimension
    * */
 // -------filtro nas dimensões--------------------------------------------------
   const filter_by_dimension = () => {
@@ -705,6 +716,7 @@ function clean_menus() {
  * create html menu of settings and control of interfaces of submenus hiden and show
  * @param {string} parentElement - parent element id title where the menu will be added
  * @interface
+ * @tutorial menu-settings
  */
 let addMenu = async(parentElement) => {
   await $(parentElement).load('public/html/menu-settings-vis.html')

src/controllers/controlles-Visualization/visUpdate.js

@@ -8,10 +8,15 @@ let oldColorMin;
 let oldColorMax;
 
 //update functions
-// /** @module visualization */
-
 /**
- * This function redraws all screen views, enters data, and redraws **/
+ * This function redraws all screen views, enters data, and redraws 
+ * @example 
+ * // basic selection for all views using the ".partition-content" class used in all update functions
+ * $(".partition-content").each(function () {
+ *      this.__vis__.data(_data_);
+ *      this.__vis__.redraw();
+    });
+ * **/
 function updatevis() {
     let colorDefault = $("input.setColorDefault").val();
     let highlightDefault = $("input.setHighlightColor").val();
@@ -71,6 +76,11 @@ function updateHie(hie){
  * @param {array.<string>} attr -  array with continuous dimension title.
  * @param {number} min -  minimum value of the dimension continues.
  * @param {number} max -  maximum value of the continuous dimension.
+ * @example  
+ * Scale color linear used     
+ * let c = d3.scaleLinear()
+        .domain([min,max])
+        .range([colorMin,colorMax]);
 
  *
  * */
@@ -133,7 +143,9 @@ function updateColorContinues(attr,min,max,colorMin,colorMax){
  * @param {string} attr - Dimension title selected for coloring.
  * @param {array.<string>} item -  title array of the attr category dimension values.
  * @param {array.<string>} colors - array with title of the selected dimensions of the database to mount the hierarchy.
- *
+ * @example
+ * return  colors[attr.indexOf(d.data[item])];//   d.data[] hierchies visualization  
+ * return colors[attr.indexOf(d[item])];//         d[] other visualizations
  * */
 function updateCategoricalColor(attr, item, colors) {
     attr_global = attr;
@@ -175,13 +187,11 @@ function filterCategoricalValues(attr, select_item) {
         $(".partition-content").each(function (i,index) {
             if($(index).children("svg").length){
                 this.__vis__.setColor(function (d,i) {
-                    if(d.data && d.data[item_name] != select_item){
+                    if(d.data && d.data[attr] != select_item){
                         return "grey";
-                    }else if(!d.data && d[item_name] != select_item) {
+                    }else if(!d.data && d[attr] != select_item) {
                         return "grey";
                     }else{
-                        console.log("deu certo")
-                        console.log(d)
                         return old_Color;
                     }
                 });
@@ -228,6 +238,12 @@ function filterColorContinues(attr,min,max,min_select,max_select){
 }
 
 //detalhes sobre demanda setar os itens
+
+
+/**
+ * activate details on demand use visthechlib  function detail(data,index,items value)
+ * @param  {string} items - list name of dimensions 
+ */
 function details_on_demand(element,items) {
     let parentElement = element.parentElement;
     element.on("datamouseover",function(d,i){
@@ -264,6 +280,11 @@ function detail_on(element){
     });
 }
 
+/**
+ * update filter by dimension use visthechlib function filterByDimension()
+ * @param {Array<string>} dimension_select - list name of dimensions
+ * array dimension_select
+ */
 function updateFilter_by_dimension(){
     const dimension_select = get_values_Filter_by_dimension();
         $(".partition-content").each(function () {

src/models/DataPreparation.js

@@ -1,6 +1,9 @@
 /**
  * Class Class Data preparation and processing class for later use.can return keys, arrays, minimum and maximum as needed for application
  * @param {object} data - Selected database.
+ * @example 
+ * const data = {.......};
+ * const DataPreparation = new DataPreparation(data);
  */
 
 class DataPreparation{

tutorials/add_vis.html

@@ -0,0 +1,3 @@
+<h4>add views on selected partitions</h4>
+
+<img class='icons Color' src='add_vis.png' title='Color by attribute'>

tutorials/anottation.html

@@ -0,0 +1,3 @@
+<p>create annotations in visualization items</p>
+
+<img src='anottation.png' title='anottation'>

tutorials/create-partition.html

@@ -0,0 +1,11 @@
+in the application it is possible to create new horizontal and vertical divisions to insert visualizations
+<p>Crtl+mousepressed</p>
+
+<img class='icons Color' src='create_divison.png' title='crtl+mousepressed'>
+
+<p>move direction</p>
+<img class='icons Color' src='create_divison2.png' title='move direction'>
+
+
+<p>adjust the divisions</p>
+<img class='icons Color' src='create_divison3.png' title='adjust the divisions'>

tutorials/default-colors.html

@@ -0,0 +1,3 @@
+<p>default colors for highlight and default color for standard views</p>
+
+<img class='icons Color' src='default-colors.png' title='colors default'>

tutorials/details.html

@@ -0,0 +1,10 @@
+<p>details on demand selectable and available for all visualization
+
+</p>
+
+<img class='icons Color' src='details-demand.png' title='details on demand'>
+
+
+<p>Exemple in visualization:</p>
+
+<img class='icons Color' src='details-demand_2.png' title='details on demand'>

tutorials/filter-dimension.html

@@ -0,0 +1,15 @@
+<p>Filter by dimension d selectable and available for all visualization
+
+</p>
+
+<img class='icons Color' src='filter-dimension.png' title='Filter by dimension'>
+
+
+<p>Exemple in visualization:</p>
+
+<p>view :</p>
+<img class='icons Color' src='filter-dimension_1.png' title='Filter by dimension'>
+
+<p>filter view :</p>
+
+<img class='icons Color' src='filter-dimension_2.png' title='Filter by dimension'>

tutorials/filter.html

@@ -0,0 +1,5 @@
+<p>filter categorical or continuous for all available views</p>
+
+<img src='filter_1.png' title='filter'>
+
+

tutorials/hierarchy.html

@@ -0,0 +1,3 @@
+<p>control of hierarchies and view size with support for these features</p>
+
+<img class='icons Color' src='hierachies.png' title='control'>

tutorials/highlight.html

@@ -0,0 +1,6 @@
+<p>coordinate highlight for all available views</p>
+
+<img src='highlight.png' title='highlight'>
+
+<img src='cordinate_highliht.png' title='cross highlight'>
+

tutorials/menu-color.html

@@ -0,0 +1,3 @@
+<p>it is possible to color the items to attribute and categorical values and change colors</p>
+<img class='icons Color' src='color-menu.png' title='menu color' width="60%" height="500px">
+

tutorials/menu-settings.html

@@ -0,0 +1,56 @@
+<h4>Menu settings and functionalities</h4>
+
+<img class='icons Color' src='menu-settings.png' title='menu-settings' height="400px">
+
+<div>
+
+    <p>
+        <b>Color by attribute</b>: It is possible to select categorical and continuous attributes, if the attributes are
+        categorical the tool allows the color customization for each attribute, if continuous it is possible to choose
+        the
+        colors of the interval between the minimum and maximum value.
+    </p>
+    <p>
+        <b>hierarchies and Size:</b> In hierarchical views the tool allows adding, removing, and deciding the order of
+        hierarchies and also deciding which attribute will define the size of each item.
+    </p>
+    <p>
+        <b>Default Colors:</b> Configuration of highlight colors and standard colors Definition of the highlight colors
+        and
+        standard colors for generating the visualizations.
+    </p>
+
+    <p>
+        <b>Filter</b> filter by means of both categorical and continuous attributes,
+        if a categorical attribute is chosen a selection button is provided with the options for each attribute, if the
+        attribute is continuous, a slider with the range between maximum and minimum value.
+    </p>
+    <p>
+        <b>Filter dimension</b> Filter in one dimension of data: Also in visualizations such as scatterplot, barchart,
+        histogram, for multivariate data a filter was implemented in one dimension of data reducing the visualization
+        and giving greater emphasis on the parts of interest
+    </p>
+    <p>
+        <b>Selection</b> a selection by means of mouse interaction, creating a loop similar to drawing tools and which
+        data is below that of the selection will be selected and highlighted as well as data with similar attributes or
+        linked to the selected attributes, the selections offered can be made using the following geometric primitives:
+        lines, bezier curves, and polygonal geometric shapes. These forms of interactions through graphic primitives
+        were selected because they allow their use in different types of visualizations, offering an execution with pros
+        and cons depending on the visualization, even so it still remains useful for the purpose.
+    </p>
+
+    <p>
+        <b>Zoom:</b> Interaction of zooming in and out;
+    </p>
+
+    <p>
+        <b>Demand details:</b> Interaction of configurable demand details when mouse is passed over the item </p>
+    </p>
+    <p>
+        <b>Anottation:</b> Interaction of notes on items in the database, which can be customized
+    </p>
+
+    <p>
+        <b>Highlight:</b> Highlight by selecting the mouse and click coordinates in the views.
+    </p>
+</div>

tutorials/tutorials.json

@@ -0,0 +1,31 @@
+{
+    "add_vis":{
+        "title":"Add Visualization"
+
+    },
+    "create-partition":{
+        "title":"Create New Partition"
+    },
+    "menu-settings":{
+        "title":"Menu settings"
+    },
+    "menu-color":{
+        "title":"Color by attribute menu "
+    },
+    "hierarchy":{
+        "title":"hierarchies and size menu "
+    },
+    "anottation":{
+        "title": "Anottation"
+    },
+    "filter":{
+        "title": "Filter by attributes"
+    },
+    "filter-dimension":{
+        "title":"Filter by dimension"
+    },
+    "highlight":{
+        "title":"Highlight"
+    }
+
+}