Answers.Body: <p>You might have come across the <a href="http://playground.tensorflow.org/" rel="nofollow noreferrer">Tensorflow Playground</a> which has a wonderful visualization of the network connections and the neuron weights.</p>
  
  <p>Their code is available in GitHub (<a href="https://github.com/tensorflow/playground" rel="nofollow noreferrer">here</a>), and the code seems fairly simple. It is coded in typescript but that can be easily transpiled to pure JavaScript.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-17T14:41:59.657Z
Answers.LastActivityDate: 2017-06-17T14:41:59.657Z
Answers.UserDisplayName: Alpha
Answers.Body: <p>I'm the developer of <a href="https://github.com/wagenaartje/neataptic" rel="nofollow noreferrer">Neataptic</a>, a Javascript neural network library. I don't know if it is exactly what you're looking for, but it has a built-in graph creator using <a href="https://d3js.org/" rel="nofollow noreferrer">D3</a> and <a href="http://marvl.infotech.monash.edu/webcola/" rel="nofollow noreferrer">webcola</a>.</p>
  
  <p>Basically, each connection gets an arrow. It also supports self-connections and gates.</p>
  
  <p>There are some examples of images:</p>
  
  <p><img src="https://camo.githubusercontent.com/e5beed80c716d77350100fdea0d359db10266c43/68747470733a2f2f692e6779617a6f2e636f6d2f64323234373064393031656439616662373932653130363135316564376539352e706e67" alt=""></p>
  
  <p><img src="https://camo.githubusercontent.com/d25e2ac003265fc5166924ecd8188cfd39785910/68747470733a2f2f692e6779617a6f2e636f6d2f32376538303033646636306462626432316532343061353366386563303933612e706e67" alt=""></p>
  
  <p>Play around yourself <a href="https://jsfiddle.net/ch8s9d3e/29/" rel="nofollow noreferrer">here</a>.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2017-06-13T08:18:53.317Z
Answers.LastActivityDate: 2020-02-23T23:03:44.780Z
Answers.LastEditDate: 2020-02-23T23:03:44.780Z
Answers.UserDisplayName: Thomas Wagenaar
Body: <p>I've been working with neural networks and artificial intelligence for a while. What I'm trying to do right now is, from a genotype I have (a sum of sensors, neurons and actuators) draw how the neural network is (with recurrent/recursive connections being showed nicely, etc.)</p>
  
  <p>What I have done now in javascript is this:</p>
  
  <p><a href="https://i.sstatic.net/GWl9G.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/GWl9G.png" alt="I know, its ugly"></a></p>
  
  <p>I have achieved this using <a href="http://sigmajs.org/" rel="nofollow noreferrer">SigmaJs</a>, a Javascript drawing library, but I think it's still ugly, and what I'm looking for is a node drawing library that can achieve recursive connections in a nice way (right now, I'm drawing them with a red color as you can see on the image).</p>
  
  <p>I have examined a lot of GitHub repositories and websites that can be helpful but aren't worth it since they aren't that nice.</p>
  
  <p>Has anyone got an idea of what can I use, in javascript?  If not, in any other language, how can I achieve what I want?</p>
  
Tags: <neural-networks><resource-request><javascript>
Title: Is there any way to draw a neural network's connections in a nice way?
UserDisplayName: MiGu3X
ThreadText: # Is there any way to draw a neural network's connections in a nice way?
  
  (Asked by: username_0 on 2017-06-12)
  
  I've been working with neural networks and artificial intelligence for a while. What I'm trying to do right now is, from a genotype I have (a sum of sensors, neurons and actuators) draw how the neural network is (with recurrent/recursive connections being showed nicely, etc.)
  
  What I have done now in javascript is this:
  
  [![I know, its ugly](https://i.sstatic.net/GWl9G.png)](https://i.sstatic.net/GWl9G.png)
  
  I have achieved this using [SigmaJs](http://sigmajs.org/), a Javascript drawing library, but I think it's still ugly, and what I'm looking for is a node drawing library that can achieve recursive connections in a nice way (right now, I'm drawing them with a red color as you can see on the image).
  
  I have examined a lot of GitHub repositories and websites that can be helpful but aren't worth it since they aren't that nice.
  
  Has anyone got an idea of what can I use, in javascript? If not, in any other language, how can I achieve what I want?
  
  **Tags:** neural-networks, resource-request, javascript
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2017-06-13. Score: 6 | Accepted answer
  
  I'm the developer of [Neataptic](https://github.com/wagenaartje/neataptic), a Javascript neural network library. I don't know if it is exactly what you're looking for, but it has a built-in graph creator using [D3](https://d3js.org/) and [webcola](http://marvl.infotech.monash.edu/webcola/).
  
  Basically, each connection gets an arrow. It also supports self-connections and gates.
  
  There are some examples of images:
  
  ![](https://camo.githubusercontent.com/e5beed80c716d77350100fdea0d359db10266c43/68747470733a2f2f692e6779617a6f2e636f6d2f64323234373064393031656439616662373932653130363135316564376539352e706e67)
  
  ![](https://camo.githubusercontent.com/d25e2ac003265fc5166924ecd8188cfd39785910/68747470733a2f2f692e6779617a6f2e636f6d2f32376538303033646636306462626432316532343061353366386563303933612e706e67)
  
  Play around yourself [here](https://jsfiddle.net/ch8s9d3e/29/).
  
  
  ---
  
  ### Answer by username_1 on 2017-06-17. Score: 2
  
  You might have come across the [Tensorflow Playground](http://playground.tensorflow.org/) which has a wonderful visualization of the network connections and the neuron weights.
  
  Their code is available in GitHub ([here](https://github.com/tensorflow/playground)), and the code seems fairly simple. It is coded in typescript but that can be easily transpiled to pure JavaScript.
  
  
  ---
  
  