d3-network

This is a d3-based gene network visualization. The module is a wrapper for a d3 force-directed layout but customized for visuzalizing weighted gene networks.

Usage

The wrapper uses the design pattern suggested by Mike Bostock: http://bost.ocks.org/mike/chart/

Add the js file:

<script src="d3.network.js" charset="utf-8"></script>`

Create the network:

var network = d3.network()
	.genes(data.genes)
	.edges(data.edges);
d3.select("#chart")
	.append("svg")
	.attr("width",500)
	.attr("height",500)
	.call(network); // associates the network with the svg element
			// drawing is delayed so that a filter can be applied - most
			// likely from a UI element (e.g. slider)
network.showLegend()
	.filter(.5, 10)	// a filter is recommended before drawing fully connected networks
	.draw();

Customize the network styling:

line.edge {
    stroke-opacity: .6;
}

circle.gene {
    stroke-width: 2px;
    stroke: #AAA;
    fill: #FFF;
}

circle.gene-query {
    stroke-width: 3px;
}

text.gene-name {
    font-weight: bold;
}

Examples

Toy example with styling (dongbohu) Change legend text

API Reference

# d3.network()

Constructs a new network instance.

# genes([genes])

Sets the associated genes to the given array. If genes is not specified, returns the genes associated to the network. Provides the same functionality as d3.force.nodes()

# edges([edges])

Sets the associated edges to the given array. If edges is not specified, returns the edges associated to the network. Provides the same functionality as d3.force.links()

# filter(min_edge_cutoff, node_cutoff)

Filters the network to be visualized. min_edge_cutoff specifies the minimum edge weight for an edge to be included in the display. node_cutoff specifies the maximum number of genes to be displayed (beyond any query genes). For example, for a network with 2 query genes and node_cutoff=2, the displayed network will contain 4 genes. Nodes are prioritized by their connectivity to the query genes.

# filterEdgeWeight(min_edge_cutoff, max_edge_cutoff, sign_of_weight)

Filters the network based on edge weight only. min_edge_cutoff and max_edge_cutoff specify the minimum and maximum edge weights for an edge to be included in the display. The optional sign_of_weight specifies the sign of the weight values that will be filtered. The default is 0, which means that both negative and positive weights will be considered; use any positive value to filter positive weights only; use any negative value to filter negative weights only. Note that unlike filter, the input min_edge_cutoff and max_edge_cutoff values must be positive.

# draw()

Draws the gene network with the gene and edge cutoffs applied by filter().

# width(width)

Specifies the width of the network layout. If width is not specified, returns the current width. The default width is the parent svg width. The width and height of this network are applied in d3.force.size([width,height]).

# height(height)

Specifies the height of the network layout. If height is not specified, returns the current height. The default height is the parent svg height. The width and height of this network are applied in d3.force.size([width,height]).

# bindNetworks([networks])

Binds this network to the input array of networks. The layouts of bound networks will be coordinated and will follow the positions of the first networks networks[0].

Visual

# geneText(genetext)

If genetext is specified, sets the displayed text of genes to the specified string. If genetext is not specified, returns the current geneText function. If genetext is a function, the function is evaluated to obtain the displayed text (e.g. standard_name) for a gene.

By default, the standard_name attribute of a gene object is displayed.

# showLegend(show)

If show is true or not provided, a legend mapping edge colors to weights will be drawn when draw() is called.

# legendText(text)

If text is specified, sets the displayed text below the legend gradient. If text is not specified, returns the current legend text.

# edgeColor(color)

If color is specified, sets the color of an edge to the specified color. If color is not specified, returns the current color function. If color is a function, the function is evaluated for each edge from its weight.

Typically, a d3 scale function that maps edge weights to colors is used here.

# edgeWidth(edgewidth)

If edgewidth is specified, sets the width of edges to the specified value. If edgewidth is not specified, returns the current edgeWidth function. If edgewidth is a function, the function is evaluated for each edge when determining the stroke-width of an edge.

# geneRadius(generadius)

If generadius is specified, sets the radius of genes to the specified value. If generadius is not specified, returns the current generadius function. If generadius is a function, the function is evaluated for each gene when determining the radius of each node.

Events

# on(type, listener)

Registers the specified listener to receive custom events of the specified type. Two events are currently supported: geneadd and edgeadd

The geneadd event is dispached when a gene node that was not visible previously is added to the network display. Listeners are called with an array of added genes.

The edgeadd event is dispatched when an edge that was not visible previously is added to the network display. Listeners are called with an array of added edges.

This function is typically used to register tooltip listeners to genes and edges.

# onGene(type, listener)

Registers the specified listener to receive events of the specified type. Specifying listeners, for example mouseover, mouseout, or click (for more detail and a comprehensive list see: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#on) will override the default actions. To add a listener, specify a suffix to the type, for example, network.onGene("mouseover.custom", mouseovercustom)

# onEdge(type, listener)

Registers the specified listener to receive events of the specified type. Specifying listeners for mouseover and mouseout will override the default actions.

aaronkw / d3-network