整理桌面
This commit is contained in:
81
node_modules/neataptic/graph/README.md
generated
vendored
Normal file
81
node_modules/neataptic/graph/README.md
generated
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
## Drawing a graph
|
||||
Visualising neural networks gives insight on which node have a larger effect on the output. And especially in evolving neural networks, it shows the characteristics of an ideal network. Setting up a graph is fairly easy:
|
||||
|
||||
#### Index.html
|
||||
The html file should include [d3v3](http://d3js.org/d3.v3.min.js) and [webcola](http://marvl.infotech.monash.edu/webcola/cola.v3.min.js). Ofcourse you should also provide the neataptic.js file and the graph.js file from above. This is an example of the html file:
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script src="libs/d3v3.js"></script>
|
||||
<script src="libs/webcola.js"></script>
|
||||
|
||||
<script src="/libs/neataptic.js"></script>
|
||||
<script src="/libs/graph.js"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/libs/graph.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<svg class="draw" width="1000px" height="1000px"/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Script.js
|
||||
If you want to work from a script, make sure to use the jquery `$( document ).ready()` function. Drawing the graph looks something like this then:
|
||||
|
||||
```javascript
|
||||
|
||||
// Global var
|
||||
var network;
|
||||
|
||||
$( document ).ready(function() {
|
||||
network = new neataptic.Architect.Perceptron(2, 10, 6, 5, 35, 1);
|
||||
drawGraph(network.graph(1000, 1000), '.draw');
|
||||
});
|
||||
```
|
||||
|
||||
You can draw a graph using:
|
||||
```javascript
|
||||
drawGraph(data, dom_element);
|
||||
```
|
||||
|
||||
Retrieve your networks graph:
|
||||
```javascript
|
||||
var data = myNetwork.graph(width, height);
|
||||
```
|
||||
|
||||
#### Graph.js
|
||||
In the graph.js file, make sure to set the `WIDTH` and `HEIGHT` to the desired amount.
|
||||
|
||||
```javascript
|
||||
[...]
|
||||
var NODE_RADIUS = 7; // radius of circles on graph
|
||||
var REPEL_FORCE = 10; // force power between circles
|
||||
var LINK_DISTANCE = 100; // length of a connection
|
||||
|
||||
var WIDTH = 1000; // width of your graph
|
||||
var HEIGHT = 500; // height of your graph
|
||||
[...]
|
||||
```
|
||||
|
||||
#### Graph.css
|
||||
Make sure to include graph.css in your html file. This makes sure your connections are visible and makes the nodes more eye-appealing.
|
||||
|
||||
## Disable constraints
|
||||
Normally graphs look like the network on the left. If you want a more fluid design, disable constraints, and you'll get a graph like on the right:
|
||||
|
||||
<img src="https://i.gyazo.com/d22470d901ed9afb792e106151ed7e95.png" width="50%"/><img src="https://i.gyazo.com/8626b66afc8881ab6e535ed9c00d46cf.png" width="50%"/>
|
||||
|
||||
In `graph.js`, remove line 60:
|
||||
|
||||
```js
|
||||
.constraints(graph.constraints) // remove this line
|
||||
```
|
||||
|
||||
This basically makes the input and output nodes less distinguishable.
|
97
node_modules/neataptic/graph/graph.css
generated
vendored
Normal file
97
node_modules/neataptic/graph/graph.css
generated
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
.node {
|
||||
cursor: move;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
.link {
|
||||
fill: none;
|
||||
stroke: #BDBDBD;
|
||||
stroke-width: 1.5px;
|
||||
opacity: 0.4;
|
||||
marker-end: url(#end-arrow);
|
||||
}
|
||||
.label {
|
||||
fill: #CCCCCC;
|
||||
font-size: 9px;
|
||||
text-anchor: middle;
|
||||
cursor: move;
|
||||
font-family: Arial;
|
||||
}
|
||||
#end-arrow{
|
||||
opacity: 0.4;
|
||||
}
|
||||
.INPUT{
|
||||
fill: #ff6666;
|
||||
stroke: #ff4d4d;
|
||||
}
|
||||
.OUTPUT{
|
||||
fill : #ff8c66;
|
||||
stroke: #ff794d;
|
||||
}
|
||||
.LOGISTIC{
|
||||
fill: #ffb366;
|
||||
stroke: #ffa64d;
|
||||
}
|
||||
.TANH{
|
||||
fill: #ffd966;
|
||||
stroke: #ffd24d;
|
||||
}
|
||||
.IDENTITY{
|
||||
fill: #ffff66;
|
||||
stroke: #ffff4d;
|
||||
}
|
||||
.STEP{
|
||||
fill: #d9ff66;
|
||||
stroke: #d2ff4d;
|
||||
}
|
||||
.RELU{
|
||||
fill: #b3ff66;
|
||||
stroke: #a6ff4d;
|
||||
}
|
||||
.SOFTSIGN{
|
||||
fill: #8cff66;
|
||||
stroke: #79ff4d;
|
||||
}
|
||||
.SINUSOID{
|
||||
fill: #66ff66;
|
||||
stroke: #4dff4d;
|
||||
}
|
||||
.GAUSSIAN{
|
||||
fill: #66ff8c;
|
||||
stroke: #4dff79;
|
||||
}
|
||||
.BENT_IDENTITY{
|
||||
fill: #66ffd9;
|
||||
stroke: #4dffd2;
|
||||
}
|
||||
.BIPOLAR{
|
||||
fill: #66d9ff;
|
||||
stroke: #4dd2ff;
|
||||
}
|
||||
.BIPOLAR_SIGMOID{
|
||||
fill: #66b3ff;
|
||||
stroke: #4da6ff;
|
||||
}
|
||||
.HARD_TANH{
|
||||
fill: #668cff;
|
||||
stroke: #4d79ff;
|
||||
}
|
||||
.ABSOLUTE{
|
||||
fill: #6666ff;
|
||||
stroke: #4d4dff;
|
||||
}
|
||||
.GATE{
|
||||
fill: #003300;
|
||||
stroke: #001a00;
|
||||
}
|
||||
.CONSTANT{
|
||||
fill: #ff00ff;
|
||||
stroke: #e600e6;
|
||||
}
|
||||
.INVERSE{
|
||||
fill: #ff0080;
|
||||
stroke: #e60073;
|
||||
}
|
||||
.SELU{
|
||||
fill: #ff0040;
|
||||
stroke: #e60039;
|
||||
}
|
139
node_modules/neataptic/graph/graph.js
generated
vendored
Normal file
139
node_modules/neataptic/graph/graph.js
generated
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
var NODE_RADIUS = 7;
|
||||
var GATE_RADIUS = 2;
|
||||
var REPEL_FORCE = 0;
|
||||
var LINK_DISTANCE = 100;
|
||||
|
||||
var WIDTH = 1000;
|
||||
var HEIGHT = 500;
|
||||
|
||||
function drawGraph (graph, panel) {
|
||||
var d3cola = cola.d3adaptor()
|
||||
.avoidOverlaps(true)
|
||||
.size([WIDTH, HEIGHT]);
|
||||
|
||||
var svg = d3.select(panel);
|
||||
|
||||
d3.selectAll(panel + '> *').remove();
|
||||
|
||||
// define arrow markers for graph links
|
||||
svg.append('svg:defs').append('svg:marker')
|
||||
.attr('id', 'end-arrow')
|
||||
.attr('viewBox', '0 -5 10 10')
|
||||
.attr('refX', 6)
|
||||
.attr('markerWidth', 4)
|
||||
.attr('markerHeight', 4)
|
||||
.attr('orient', 'auto')
|
||||
.append('svg:path')
|
||||
.attr('d', 'M0,-5L10,0L0,5');
|
||||
|
||||
graph.nodes.forEach(function (v) {
|
||||
v.height = v.width = 2 * (v.name === 'GATE' ? GATE_RADIUS : NODE_RADIUS);
|
||||
});
|
||||
|
||||
d3cola
|
||||
.nodes(graph.nodes)
|
||||
.links(graph.links)
|
||||
.constraints(graph.constraints)
|
||||
.symmetricDiffLinkLengths(REPEL_FORCE)
|
||||
.linkDistance(LINK_DISTANCE)
|
||||
.start(10, 15, 20);
|
||||
|
||||
var path = svg.selectAll('.link')
|
||||
.data(graph.links)
|
||||
.enter().append('svg:path')
|
||||
.attr('class', 'link');
|
||||
|
||||
path.append('title')
|
||||
.text(function (d) {
|
||||
var text = '';
|
||||
text += 'Weight: ' + Math.round(d.weight * 1000) / 1000 + '\n';
|
||||
text += 'Source: ' + d.source.id + '\n';
|
||||
text += 'Target: ' + d.target.id;
|
||||
return text;
|
||||
});
|
||||
|
||||
var node = svg.selectAll('.node')
|
||||
.data(graph.nodes)
|
||||
.enter().append('circle')
|
||||
.attr('class', function (d) {
|
||||
return 'node ' + d.name;
|
||||
})
|
||||
.attr('r', function (d) {
|
||||
return d.name === 'GATE' ? GATE_RADIUS : NODE_RADIUS;
|
||||
})
|
||||
|
||||
.call(d3cola.drag);
|
||||
|
||||
node.append('title')
|
||||
.text(function (d) {
|
||||
var text = '';
|
||||
text += 'Activation: ' + Math.round(d.activation * 1000) / 1000 + '\n';
|
||||
text += 'Bias: ' + Math.round(d.bias * 1000) / 1000 + '\n';
|
||||
text += 'Position: ' + d.id;
|
||||
return text;
|
||||
});
|
||||
|
||||
var label = svg.selectAll('.label')
|
||||
.data(graph.nodes)
|
||||
.enter().append('text')
|
||||
.attr('class', 'label')
|
||||
.text(function (d) {
|
||||
return '(' + d.index + ') ' + d.name;
|
||||
})
|
||||
.call(d3cola.drag);
|
||||
|
||||
d3cola.on('tick', function () {
|
||||
// draw directed edges with proper padding from node centers
|
||||
path.attr('d', function (d) {
|
||||
var deltaX = d.target.x - d.source.x;
|
||||
var deltaY = d.target.y - d.source.y;
|
||||
var dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
||||
var normX = deltaX / dist;
|
||||
var normY = deltaY / dist;
|
||||
|
||||
if (isNaN(normX)) normX = 0;
|
||||
if (isNaN(normY)) normY = 0;
|
||||
|
||||
var sourcePadding = d.source.width / 2;
|
||||
var targetPadding = d.target.width / 2 + 2;
|
||||
var sourceX = d.source.x + (sourcePadding * normX);
|
||||
var sourceY = d.source.y + (sourcePadding * normY);
|
||||
var targetX = d.target.x - (targetPadding * normX);
|
||||
var targetY = d.target.y - (targetPadding * normY);
|
||||
|
||||
// Defaults for normal edge.
|
||||
var drx = 0;
|
||||
var dry = 0;
|
||||
var xRotation = 0; // degrees
|
||||
var largeArc = 0; // 1 or 0
|
||||
var sweep = 1; // 1 or 0
|
||||
|
||||
// Self edge.
|
||||
if (d.source.x === d.target.x && d.source.y === d.target.y) {
|
||||
xRotation = -45;
|
||||
largeArc = 1;
|
||||
drx = 20;
|
||||
dry = 20;
|
||||
targetX = targetX + 1;
|
||||
targetY = targetY + 1;
|
||||
}
|
||||
return 'M' + sourceX + ',' + sourceY + 'A' + drx + ',' + dry + ' ' + xRotation + ',' + largeArc + ',' + sweep + ' ' + targetX + ',' + targetY;
|
||||
});
|
||||
|
||||
node
|
||||
.attr('cx', function (d) {
|
||||
return d.x;
|
||||
})
|
||||
.attr('cy', function (d) {
|
||||
return d.y;
|
||||
});
|
||||
|
||||
label
|
||||
.attr('x', function (d) {
|
||||
return d.x + 10;
|
||||
})
|
||||
.attr('y', function (d) {
|
||||
return d.y - 10;
|
||||
});
|
||||
});
|
||||
}
|
Reference in New Issue
Block a user