Latex code and other tools for making neural networks diagrams

 PlotNeuralNet generates tikz code (for Latex) for illustrating a network architectures

NN-SVG is an online tool for illustrating simple architectures and that generates SVG code

Tensorspace.js is a web-based tool that takes keras network definitions and produces beautiful 3D representations on the browser that are also functional!

Netscope is a web-based tool for visualizing neural network architectures for the moment only supports Caffe's prototxt format

Have a look at the stackexchange thread about this topic: https://datascience.stackexchange.com/questions/12851/how-do-you-visualize-neural-network-architectures

Sources:

https://github.com/HarisIqbal88/PlotNeuralNet
http://alexlenail.me/NN-SVG/LeNet.html
https://tensorspace.org/html/docs/startHello.html
http://ethereon.github.io/netscope/quickstart.html
https://www.draw.io/ (for manual drawing from elementary shapes)

Ray Marching and Signed Distance Functions

This is generated by intersecting rays with a signed distance function!
Here's an excellent explanation of how it works: http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/

Here's a page from the creator of this model with more examples: http://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm

Create XKCD style graphs with: Gnuplot, Python, Latex, Matlab, Javascript, Mathematica, R or On-Line

Generating XKCD themed plots was a hot topic towards the end of 2012.
Follow the links below to find out how to produce them with your favorite language.

Gnuplot: http://rfonseca.github.io/xkcd-gnuplot/
Javascript, R, Python, Matlab, LaTeX, Mathematica: http://www.walkingrandomly.com/?p=4731
On-Line (with Javascript): http://xkcdgraphs.com/

Show/Hide Content with CSS and JavaScript

Code2HTML is a syntax highlighter which reliefs the painful task of transcribing code to html pages.

Sometimes the code occupies too much of the web page, so it is better to be able to hide it.
It seems that there are many ways of hiding parts of a web page, most rely on CSS and javascript to modify the page.

Here I'm using the script from: http://www.cssnewbie.com/showhide-content-css-javascript/. Below is the code for I'm using in this page.

Some notes:

• the default state (shown/hidden) depends on which tag that has the: style="display: none;"
• The tags ID are very important. The elements MUST be named as id="code123" for the hidden content, and the other id="code123-show" for the visible link to the hidden content.
• The tag ID must be UNIQUE for this element within the current page, otherwise it will affect all the other tags.

See the code

Try it! Hide the code

<script type="text/javascript">
<!-- code from http://www.cssnewbie.com/showhide-content-css-javascript/ -->
function showHide(shID) {
 if (document.getElementById(shID)) {
  if (document.getElementById(shID+'-show').style.display != 'none') {
   document.getElementById(shID+'-show').style.display = 'none';
   document.getElementById(shID).style.display = 'block';
  }
  else {
   document.getElementById(shID+'-show').style.display = 'inline';
   document.getElementById(shID).style.display = 'none';
  }
 }
}
</script>


<a class="showLink" href="#" id="code123-show" onclick="showHide('code123');return false;">
See the code.
</a>
<div id="code123" 
style="display: none; border-top: 1px solid #666; border-bottom: 1px solid #666;">
<!-- PUT YOUR CONTENT FROM HERE -->
YOUR CONTENT

YOUR CONTENT

YOUR CONTENT
<!-- TO HERE -->
<p>
<a href="#" id="code123-hide" class="hideLink" onclick="showHide('code123');return false;">
Hide this content.
</a>
</p>
</div>

<!-- syntax highlighted by <a href="http://www.palfrader.org/code2html">Code2HTML</a>, v. 0.9.1 -->

---