demo/neural-network-demo

[jszuminski]

Added a neural network demo for the demo pages.

---

Demo

Link to a JSFiddle: https://jsfiddle.net/BlackLabel/3whL2sfe/

Things to consider

We might consider (in the future or now in this demo) adding a panel of inputs where the user could choose the number of layers and the number of nodes for each of the layers (but wouldn't this be an overkill in a simplistic demo that we want to release now?).

[highsoft-bot]

File size comparison

No differences found

[highsoft-bot]

Visual test results - No difference found

---

Samples changed

Change type	Sample
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Modified	samples/highcharts/demo/neural-network/demo.js
Added	samples/highcharts/demo/neural-network/demo.js

[pawelfus]

Looks good!

Could you check why we see chart skew in mobile view? See:

I guess this might be related to computed yAxis extremes.- at least I would start there. Alternatively, can we reduce labels to short names (ReLU, tanh etc)?

[jszuminski]

I've added the requested changes. This is an updated demo in JSFiddle: https://jsfiddle.net/47uaj3cs/

Also, I was thinking that maybe instead of layers and activation arrays of numbers, it would be more intuitive for the users to create an array of objects like this:

const layers = [{
  nodes: 6,
  activation: 'tanh'
}, {
  nodes: 6,
  activation: 'ReLU'
}, {
  nodes: 6,
  activation: 'ReLU'
}, {
  nodes: 2,
  activation: 'sigmoid'
}]

What do you think @pawelfus @TorsteinHonsi?

[pawelfus]

Sounds good!

[jszuminski]

Here's an updated JSFiddle: https://jsfiddle.net/4p2bLkhw/

Ready for rereview @pawelfus

[pawelfus]

Thanks!

[pawelfus]

Adding Marita for a11y review

[jszuminski]

Most up to date demo: https://jsfiddle.net/ewcxdh5b/

[TorsteinHonsi]

Thanks! A couple of minor change requests inline.

In addition, I notice that the lines are jagged, like anti-aliasing is off. That's because multiple lines are overlaid, right? Would it be an idea to make the series semi-transparent so that it becomes more visible which paths are more frequent?

[jszuminski]

@TorsteinHonsi most up to date demo: https://jsfiddle.net/BlackLabel/2a1y5zhe/

I've removed the colors array and added it to plotOptions.line.color, but I've also reduced the opacity of the lines.

In my opinion, it looks better now. What do you think?

[TorsteinHonsi]

Looks good, thank you!

[jszuminski]

As discussed with @marvin19, we are removing point.descriptionFormat temporarily as there are a few problems related to it independent to this pull request.

[TorsteinHonsi]

Thanks!

1. The descriptionFormat works for me like this

    accessibility: {
        typeDescription: 'Neural network chart',
        point: {
            descriptionFormat:
                'node on {series.xAxis.options.custom.layers.(x).label}'
        }
    },

Is that okay or are there other problems?

2. The files of the vendor folder are added in this PR. Those should be removed.

[jszuminski]

@TorsteinHonsi

1. Your point.descriptionFormat seems to work as it should, thanks! There were some other problems that @marvin19 found with descriptionFormat, but they are unrelated to this PR so with your change it's good to go.

2. Sorry, I completely overlooked that, don't know where this came from.