JSFiddle - React, Tailwind, and code Playground
JavaScript
var viewBoxes = {
normal: { x: 0, y: 0, width: 819.18, height: 596.441 },
neuron: { x: 0, y: 100, width: 560, height: 407.451 },
axon: { x: 289, y: 195, width: 530, height: 385.623 },
synapse: { x: 190, y: 0, width: 525, height: 381.985 }
};
var ractive = new Ractive({
el: example,
template: template,
data: {
viewBox: viewBoxes.normal,
showLabels: false,
info: null,
closeup: null,
fullscreenEnabled: Ractive.fullscreenEnabled, // whether or not to show fullscreen button
detail: {
dendrites: '<strong>Dendrites</strong> conduct electrochemical stimulation from other neurons via synapses. <a href="http://en.wikipedia.org/wiki/Dendrite">Wikipedia article</a>',
axon_hillock: 'The <strong>axon hillock</strong> is a specialized part of the cell body of a neuron that connects to the axon. <a href="http://en.wikipedia.org/wiki/Axon_hillock">Wikipedia article</a>',
ranvier: '<strong>Nodes of Ranvier</strong> are 1 micrometer gaps in the myelin sheaths that insulate the axon. These nodes act as signal boosters. <a href="http://en.wikipedia.org/wiki/Nodes_of_Ranvier">Wikipedia article</a>',
synapse: '<strong>Chemical synapses</strong> transmit signals between cells by releasing neurotransmitter molecules. An adult human brain contains between 100-500 trillion synapses. <a href="http://en.wikipedia.org/wiki/Chemical_synapse">Wikipedia article</a>',
microtubules: '<strong>Microtubules</strong> and <strong>neurofibrils</strong> are bundles of filaments which, among other things, help maintain cell structure. <a href="https://en.wikipedia.org/wiki/Microtubule">Wikipedia article</a>',
synaptic_vesicles: '<strong>Synaptic vesicles</strong> store the neurotransmitters that are released at the synapse to propagate signals. They are constantly regenerated by the cell. <a href="http://en.wikipedia.org/wiki/Synaptic_vesicle">Wikipedia article</a>',
synaptic_cleft: 'The <strong>synaptic cleft</strong> is...