Bringing Data-Driven Neural Networks to openneuronproject.org

The Cochlear Nuclei

The above semi-interactive neural network diagram shows the interactions of the cell types within the cochlear and the cochlear nuclei. As I recently discussed, fitting this interactivity into this website was a bit more complicated due to restrictions on javascript use in wordpress websites. However when I was building a separate page  to run javascript in an alternative website, I figured a workaround that allows me to add the necessary scripts to the wordpress site.

It's not an elegant solution and long-term I will probably need to figure out a better way of doing things, but for now it saves me a lot of time messing around with styling and allows me to focus on the data.

As an edit, I should probably point out that the diagram above won't display on older browsers, data-driven documentation (D3) has not been developed to be compatible with all browsers. Any new browser (firefox, chrome or safari) should be fine though.

The Data...

The data required to produce this diagram is:

{
"locations": [
{"name": "Cochlear", "id": 1},
{"name": "Dorsal Cochlear Nucleus", "id": 2},
{"name": "Anteroventral Cochlear Nucleus", "id": 3},
{"name": "Posteroventral Cochlear Nucleus", "id": 4}
],
"cells": [
{"id": "Inner Hair Cell", "location": 1},
{"id": "Outer Hair Cell", "location": 1},
{"id": "Type I SGN", "location": 1},
{"id": "Type II SGN", "location": 1},
{"id": "Pyramidal", "location": 2},
{"id": "Stellate", "location": 2},
{"id": "Cartwheel", "location": 2},
{"id": "Unipolar Brush", "location": 2},
{"id": "Golgi", "location": 2},
{"id": "Granule", "location": 2},
{"id": "Giant", "location": 2},
{"id": "Tuberculoventral", "location": 2},
{"id": "Spherical", "location": 3},
{"id": "Globular", "location": 3},
{"id": "T-Stellate", "location": 3},
{"id": "D-Stellate", "location": 3},
{"id": "Planar","location": 4},
{"id": "Octopus","location": 4},
{"id": "Radiate","location": 4}
],
"links": [
{"source": "Inner Hair Cell", "target": "Type I SGN", "type": "E"},
{"source": "Outer Hair Cell", "target": "Type II SGN", "type": "E"},
{"source": "Type I SGN", "target": "Pyramidal", "type": "E"},
{"source": "Type I SGN", "target": "Tuberculoventral", "type": "E"},
{"source": "Pyramidal", "target": "Stellate", "type": "E"},
{"source": "Granule", "target": "Cartwheel", "type": "E"},
{"source": "Stellate", "target": "Cartwheel", "type": "I"},
{"source": "Cartwheel", "target": "Cartwheel", "type": "I"},
{"source": "Granule", "target": "Unipolar Brush", "type": "E"},
{"source": "Unipolar Brush", "target": "Granule", "type": "E"},
{"source": "Cartwheel", "target": "Giant", "type": "I"},
{"source": "Type I SGN", "target": "Spherical", "type": "E"},
{"source": "Type I SGN", "target": "Globular", "type": "E"},
{"source": "Type I SGN", "target": "T-Stellate", "type": "E"},
{"source": "D-Stellate", "target": "T-Stellate", "type": "I"},
{"source": "Type I SGN", "target": "Planar", "type": "E"},
{"source": "Type I SGN", "target": "Radiate", "type": "E"},
{"source": "Type I SGN", "target": "Octopus", "type": "E"},
{"source": "T-Stellate", "target": "Pyramidal", "type": "I"},
{"source": "Cartwheel", "target": "Pyramidal", "type": "I"},
{"source": "Tuberculoventral", "target": "Pyramidal", "type": "I"},
{"source": "Tuberculoventral", "target": "T-Stellate", "type": "I"}
]
}

 

I started with the cochlear as it is an area I am already familiar with and the connection to the cochlear nuclei seemed straightforward. These are defined as "locations", and the cell types found within them have been defined as "cells". Cells are then linked to each other using the presynaptic cell as the source and the postsynaptic cell as the target, defined in "links".

Locations are centred around points on the x-axis of the chart and the cells of a given location are clustered around the same points. Offsetting the locations on the Y-axis prevents too much overlap of the links and makes it clearer when one cell-type - e.g. the type I SGN - sends processes to multiple nuclei.