Add support for three-objective visualisation

GoelBiju / Visualising-Optimisation-Data

COMP3000 Final Year Project - Visualising Optimisation Data

0 stars 0 forks source link

Add support for three-objective visualisation #57

Open GoelBiju opened 3 years ago

GoelBiju commented 3 years ago

Description:

Add support for 3D visualisations. A good way of testing this is through three objective visualisations. This will however be difficult (or not possible) with the default D3.js we have bundled with the frontend.

For this, it may be possible to make use of Plotly.js (https://plotly.com/javascript/) and 3D scatter plots (https://plotly.com/javascript/3d-scatter-plots/). Since this library is originally in JavaScript it will need the correct typings in order to work with TypeScript otherwise the plugin will need to use React with JavaScript instead.

Acceptance criteria:

[ ] Backend supports three objective data and stores them correctly,
[ ] Three objective plugin to visualise the data (scatter graph) using an appropriate library,
[ ] Frontend and plugin work correctly as it should like the other plugins.

GoelBiju commented 3 years ago

An option would be to use react-plotly.js, specifically Plotly.js for React. There are typings for TypeScript through @types/react-plotly.js as indicated in this issue.

GoelBiju commented 3 years ago

An option would be to use react-plotly.js, specifically Plotly.js for React. There are typings for TypeScript through @types/react-plotly.js as indicated in this issue.

There are a couple of issues with setting this up at the moment, specifically with the JavaScript heap running out of memory. There are various solutions as indicated in this issue: https://github.com/plotly/react-plotly.js/issues/135

GoelBiju commented 3 years ago

An option would be to use react-plotly.js, specifically Plotly.js for React. There are typings for TypeScript through @types/react-plotly.js as indicated in this issue.

There are a couple of issues with setting this up at the moment, specifically with the JavaScript heap running out of memory. There are various solutions as indicated in this issue: plotly/react-plotly.js#135

There is a workaround to the issue as mentioned in this comment which displays the demo graph when running a plugin in dev mode. I will have to now build a scatter/scatter3d plot using this.

GoelBiju commented 3 years ago

An option would be to use react-plotly.js, specifically Plotly.js for React. There are typings for TypeScript through @types/react-plotly.js as indicated in this issue.

There are a couple of issues with setting this up at the moment, specifically with the JavaScript heap running out of memory. There are various solutions as indicated in this issue: plotly/react-plotly.js#135

There is a workaround to the issue as mentioned in this comment which displays the demo graph when running a plugin in dev mode. I will have to now build a scatter/scatter3d plot using this.

I have implemented a demonstration of a "scatter3d" plot using Plotly.js in https://github.com/GoelBiju/Visualising-Optimisation-Data/commit/0e027dd5d11054aabfeff1b47ba689125be518e0. This is implemented from this article on creating 3D charts with React.