Naview: A d3.js Based JavaScript Library for Drawing and Annotating Voltage-Gated Sodium Channels Membrane Diagrams

Abstract

Voltage-gated sodium channels (Nav) are membrane proteins essential to initiating and propagating action potential in neurons and other excitable cells. For a given organism there are often multiple, specialized sodium channels found in different tissues, whose mutations can cause deleterious effects observed in numerous diseases. Consequently, there is high medical and pharmacological interest in these proteins. Scientific literature often uses membrane diagrams to depict important patterns in these channels including the six transmembrane segments (S1-S6) present in four different homologous domains (D1-D4), the S4 voltage sensors, the pore-lining residue segments and the ion selectivity filter residues, glycosylation and phosphorylation residues, toxin binding sites and the inactivation loop, among others. Most of these diagrams are illustrated either digitally or by hand and programs specifically dedicated to the interactive and data-friendly generation of such visualizations are scarce or non-existing. This paper describes Naview, an open-source javascript visualization compatible with modern web browsers for the dynamic drawing and annotation of voltage-gated sodium channels membrane diagrams based on the D3.js library. By using a graphical user interface and combining user-defined annotations with optional UniProt code as inputs, Naview allows the creation and customization of membrane diagrams. In this interface, a user can also map and display important sodium channel properties, residues, regions and their relationships through symbols, colors, and edge connections. Such features can facilitate data exploration and provide fast, high-quality publication-ready graphics for this highly active area of research.

Keywords: d3.js; data visualization; javascript; membrane plot; voltage gated sodium channel (NaV).

FIGURE 1

Naview’s general workflow: UniProt formatted data is initially checked and processed before initial draw areas are pre-calculated from the Style Object width, height and border definitions. These areas define the positioning of each drawn element in the following order: Membrane, Helices, Short Loops, Pore Loops, Long Loops, N and C terminal Loops. As each protein element is rendered, anchorage points are defined for proper loop positioning. Properties defined from the Style Obj or mapped from user selected settings define colors and drawing modes for each of the drawn features.

FIGURE 2

Naview’s style editor. (A) Main options of the styling menu including: 1) Dropdowns for options related to each of the drawn diagrams features such as colors, sizes and proportions. 2) Button for refreshing the currently drawn plot. 3) Button for opening the console that allows entering specific text annotation or color rules. 4) and 5) are buttons for adding property and relationship related data to the plot. 6) button for exporting a Style Object with the currently selected configurations. 7) Buttons for exporting the plot image in the SVG and PNG formats. (B) Console for adding a text annotation or color rule. 1) Dropdown for selecting between the text annotation or color rule modes. 2) Dropdown for selecting the input of free/property based text. 3) Input box for typing the desired text annotation. 4) Text positioning scheme: “absolute” defines text position by the given “x” and “y” 5) and 6) parameters; “relative” defines text position according to a selected element. “dx” and “dy” 7) and 8) shift the text to be drawn in the informed horizontal (“dx”) and vertical direction (“dy”), being especially helpful in the “relative” positioning scheme. 9) Button for appending the currently defined text to the figure. 10) Removes all added text annotations. (C) Color rule addition console. 1) Opens a window for allowing specific residue/elements selections. 2) Opens a window for selecting a specific color/property-based color mapping. 3) Clears the currently selected color rule. 4) Updates plot with the currently selected color rule. 5) Removes all previously added color rules.

FIGURE 3

Naview’s curve drawing logic. (A) “Simple” curve function: a new point p_S is generated in the center of two anchoring ponts drawing functions and scaled by a Δy parameter according to the selected loop length scales. (B) The “Bulb” curve function in which two new points are generated in relation to the “Simple” curve type: p_B1 and p_B1 whose vertical growth is controlled by p_Y, a proportion of the total Δy. The horizontal position of these points is given by the Δx parameter in the opposite direction of their closest anchoring points. (C) “Swirl” curve function is a variation of the “Bulb” curve type whose horizontal position is defined in a symetrical direction by a Δcx parameter, defined as a proportion of the distance of the anchoring points to their centroid. (D) The “Mushroom” curve type includes two new points in relation to the “Bulb” curve type: p_M1 and p_M2. The vertical position of these points is defined by the p_Y2 parameter as a proportion of the total Δy, and their horizontal position is defined from the anchoring points positions towards their centroid by the Δcx parameter.

FIGURE 4

Example of Naview’s relationship drawing. Edges are colored in purple, with their central widths scaled according to the “raw_weight” column weights. This scaling allows the visual perception of stronger (larger width) and weaker (thinner width) relationships within the user inputted data. The membrane is shown as a grey box. All helices are shown as red cartoons except for the voltage-sensing helix 4, colored in blue.

FIGURE 5

Example of Naview’s text annotations. All domain-indicating texts were added by using the Naview Style Editor console in the text edition mode. Text position can be adjusted by clicking and dragging any added text element. A single click highlights the selected text annotation and allows the editing of its current text and font characteristics. In this example such annotations were used to indicate specific domains (I-IV) and the first intracellular loop (ID-LOOP). Helices are shown as black cartoons and the membrane as a lipid bilayer. All loop residues are scaled to two pixels.

FIGURE 6

Example of Naview’s property-based color map from lightblue to blue after loading a CSV containing a randomly valued property named “Conservation” ranging from 0 to 1 for each of the protein’s residues. Used color rule: “ALL, by:Conservation,#ADD8E6;#0000FF, min;max”. As such residues with a higher “Conservation” value are colored in a darker tone of blue. Helices are shown as cartoons and the membrane as a lipid bilayer. All loop residues are scaled to two pixels.