Code Monkey home page Code Monkey logo

mdac's Introduction

Multidisciplinary Analysis Client

DOI

The tool can be used at this link: https://mdac.netlify.app/

How to use

MDAC is an interactive data visualisation tool. It uses a parallel coordinates diagram to display the data, which the user can interact with by adding filters.

Visualise and interact with a dataset.

This guide will go through how to visualize and interact with a dataset.

1. Import data

The data needs to be of CSV-format, delimitted by either commas, semi-colons, or tabs. Load your CSV file using the file selector in the top right corner. If the plot looks strange, then you may need to change delimitor in the drop-down menu next to the file selector.

2. Adjust axes

You can click on a data axis to highlight that axis. Highlighting it causes the data to be colored based on the upper and lower bounds of the data on that axis. Highlighted axes can also be tweaked using the menu that shows up to the left. This menu allows you to change the bounds of the axis, or delete it, etc.

3. Add and adjust filters

Clicking and dragging over an axis creates a filter. Filters causes data that does not pass through it to become hidden. Two filters on two separate axis creates an "AND"-condition. Two filters on the same axis creates an "OR"-condition. When a new filter is created, it is added to the filter list in the menu to the left. Filters can be fine-tuned in the left-hand menu such that the filters act on specific values.

Analysis

Similarity analysis

If your dataset contains two or more types of fidelities (e.g., simulated data vs surrogate model data), then a similarity analysis can be performed. First, determine which of your columns are inputs and outputs by navigating to the data tab or the data settings tab, and configuring your columns accordingly. Then, Navigate to the similarity analysis tool. It is important that your data has a categorical data column that is string-based, which differentiates the two different types of data. Select that column in as the Fidelity column. Then, select which category represents the highest fidelity as the HiFi indicator. Finally, choose if you want to analyse input or output data, and click Calculate inter-similarity. This will result in a new column in the PCP. This can be used to color-code the data, and can also be used in the scatter plot view. If you are not satisfied with your data configuration, then you can tweak your configuration and redo the analysis, which will overwrite the inter-similarity column.

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

mdac's People

Contributors

johnmartins avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

khbalhandawi

mdac's Issues

Convert emits to state

Currently there are a lot of emissions and listeners controlling various aspects of the charts. A more elegant solution would be to utilize a storage for options and state. Options should be reserved for things that the user may want to save between sessions, while state should be reserved for variables that should not be saved between sessions.

Sticky header on data view

The data view has barely been touched since it was introduced. It could be improved significantly. A first step is to introduce some CSS to make it a bit more readable, and a sticky-header to make scrolling more useful.

Count data points

The data point count should be displayed somewhere (both filtered points and total)

Dataset pairing

It could be useful to connect the PCP dataset with resuts data. Selecting sample points in the PCP should then select the corresponding samples in a separate results plot (typically, a plot with a time series).

Feature bloat in side menus

As more features are added, it is no longer feasible to keep adding new blocks into the side menus. Proposed solutions:

  • Add an analysis tab for future analysis functions
  • Make side menu groups collapsable, and collapse all but the essential functionality by default
  • Move our category editing from the side menu, OR make category editing "swap out" the entire side menu

Category update problems

  • When changing the name of a category, it stops working
  • When changing the range of a category, it does not immediately render the change
  • The reset button does nothing

Save plot and settings

A necessary feature is the possibility to save a plot with the data and its settings. This could potentially be done by dumping the data and settings into a JSON-file.

Example data

It would be nice to have the option to load an example file. This could be especially useful when showing the tool for others.

Categorical data can be changed from undefined io in data view

Categorical data is currently not supported by the IO mechanism. Yet, in the data view, categorical data IO can be set. This can cause instability in the other views.

Fix either by adding support for categorical data IO, or disable the ability to change IO for categorical data.

Performance issues with large datasets

When loading large datasets (N > 1000) there is a significant reduction in performance in the PCP. This is because of all the individual SVG elements in the DOM. This could easily be handled with a HTML5 canvas instead of an SVG element.

A step towards solving this issue was done when the path layer (PCPlotPathLayer.vue) was separated from the PCP component (PCPlot.vue) in MR #35. The axes could remain SVG, but the paths could be rendered using a HTML5 canvas, only refreshing when there is a change in the data. This could potentially be done by changing the PCPlotPathLayer component, and moving the PCPlotPathLayer component out from the SVG element in the PCPlot.

Optimization

When the amount of sample points reaches above 1000 the program starts to gradually slow down. At around 20000 it sometimes breaks down. To resolve this, the amount of information stored in the DOM needs to be reduced. This can be achieved by factoring out styles, and other information that is common for multiple elements.

Some identified information that can be refactored:

  • Stroke opacity for paths
  • Stroke color for paths
  • Data attribute for paths

Double sidebar layout resize issue

In the scatter plot view:

If one sidebar is hidden, and you attempt to resize the non-hidden sidebar, then the layout breaks.

The problem is in this line:

doubleSidebarLayoutContainer.value.style.gridTemplateColumns = `${leftWidth}px 10px auto 10px ${rightWidth}px`

Rather than messing with the grid template, the adjust layout method should be called.

Adjust layout method in same component:

function adjustLayout () {
let left = hideMenuL.value ? "" : `${leftWidth}px `
let middle ="10px auto 10px"
let right = hideMenuR.value ? "" : ` ${rightWidth}px`
doubleSidebarLayoutContainer.value.style.gridTemplateColumns = left + middle + right
// Doing this immediately does not work. There needs to be a slight delay.
setTimeout(() => {eventBus.emit('Layout.contentResize')}, 250)
}

Create filters in scatterplot

It should be possible to create filters in the scatter plot in a similar way to how it is done in the PCP. If this is done by "drawing squares", then it could be implemented "easily" using the same filter system that is already in place (no new logic needed except for drawing the squares)

Render filtered data on top of excluded data

When adding data filters, the data that is INCLUDED should be rendered ON TOP of the EXCLUDED data.
Furthermore, it should be possible to change the color of the data based on inclusion/exclusion (e.g. included data is blue, excluded data is grey)

Bug: Filters are added when selecting category

This issue seems to be restricted to large datasets (~1000) on slow computers. Clicking on a category often results in a filter being added. This indicates that the drag drop filter mechanic needs to be adjusted, or remade.

Inter-similarity analysis does not return 0

Bug in code:

// Store nearest similarity value
if (!closestSimilarityValue {
    closestSimilarityValue = s
} else if (closestSimilarityValue > s) {
    closestSimilarityValue = s
}

Proposed solution:

// Store nearest similarity value
if (!closestSimilarityValue && closestSimilarityValue !== 0) {
    closestSimilarityValue = s
} else if (closestSimilarityValue > s) {
    closestSimilarityValue = s
}

Improve error display

Currently, errors are displayed only in the console windows. They should be visualized such that the user knows that something went wrong.

Handle string data

Some categorical data may be in string format. It would thus be useful if that could be parsed and visualized as well.

Flip axis

There is a need to be able to flip axis (e.g. by doubleclicking them)

Color-code tool in PCP side menu

Currently, to color code in the PCP, you click on an axis label. It would be preferable if this worked the same as in the scatter-view, where you have a dedicated tool for color coding. This would enable you to make changes to axes (which is done by clicking on them) without having to re-render the entire plot. This would be especially beneficial for large datasets.

Automatic delimiter detection

Currently the user can select between ",", ";", or "\t". It would be useful if there was a fourth (default) option called "Auto", which detects the latter possibilities.

This could be done with a decent success-rate using a simple "search & count". To avoid unnecessarily long load times it could be done on only a small portion of the file.

Import file via URL query variable

Some users wants to be able to send file locations via URLs to enable easy sharing.

While accessing files locally will not work as the local filesystem is not accessible, data can be sourced from a pre-configured webserver (not ANY server, due to CORS).

Side-menu prevents full PCP potential. Toggle visibility?

The PCP in particular performs better the more horizontal space it has. It would therefore be beneficial, especially for smaller screens, if the side menu visibility could be toggled. Alternatively, the menu could perhaps be moved to the bottom of the screen.

Pull filter bands

Some users wants to be able to pull the entire filter up/down in the PCP view (not just change edge position)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.