Pareto-front visualisation

[GoelBiju]

Description:

Make use of the scatter graph to create a Pareto front estimation graphs using the DTLZ1 and DTLZ2 sample data.

Acceptance criteria:

• Shows all the generations data as it comes in
• Plots the solutions from each generation on the graph as a Pareto front estimation

[GoelBiju]

One issue that was to be solved was the fact that in the original code I was not scaling each x and y co-ordinate but was instead plotting straight onto the graph. This meant when I plugged in the data all the points were plotted onto one single point. The fix for this was to call xScale and yScale with the x and y values respectively which would then scale it to the correct position on the graph. I had noticed this when testing out some sample code in a basic HTML page.

[GoelBiju]

Another bug I need to fix now is to correct the rendering of points. At the moment points are just appended onto the graph without the old points disappearing. The old points need to be cleared before updating the graph with the new ones (similar to this post).

This is the plot with all the 282 generations (282 * 100 points), we should only have 100 points per generation:

[GoelBiju]

A bug to fix is that the scales increase and decrease as the optimisation run moves onwards. This should not happen as the data values decrease over time. This could be due to the fact the data in the frontend state can change at different times meaning different values get updated out of order.

[GoelBiju]

Another bug I need to fix now is to correct the rendering of points. At the moment points are just appended onto the graph without the old points disappearing. The old points need to be cleared before updating the graph with the new ones (similar to this post).

This is the plot with all the 282 generations (282 * 100 points), we should only have 100 points per generation:

As a follow-up to removing the old points, the update function in the visualisation component for the plugin is now clearing all the circles before appending the new ones (as suggested on this post).

[GoelBiju]

Still, to-do for this issue is:

• Fetch data with confirmation that the last fetched one has been shown and cleared,
• Test out DTLZ2 dataset and check with the sample data plot provided,
• Test both DTLZ1 and DTLZ2 running in parallel,
• Add a queue of the generation to fetch data for,
• Show completed status.

[GoelBiju]

I have not used the GenerationQueue class that was created to manage the queue since it would make it more complex to update the state for an object created from the class. Instead, I have created a list and the functions in the VisualisationContainer to keep a queue of the generations received (similar to this post).

[GoelBiju]

As an update, I am currently working on re-organising the content on the visualisation container to show additional run information.

I want the visualisation to also show a D3 tooltip when hovered indicating the point x,y locations, similar to this example:

• [ ] Show tooltip over each point in the visualisation with the exact X and Y.

[GoelBiju]

As an update, I am currently working on re-organising the content on the visualisation container to show additional run information.

I want the visualisation to also show a D3 tooltip when hovered indicating the point x,y locations, similar to this example:

• [ ] Show tooltip over each point in the visualisation with the exact X and Y.

I have moved this to a new issue (#40) as this will take more time than expected.