Treemap-Graph-D3

A treemap based graph layout visualization using D3 based off of the method presented by Chris Muelder and Kwan-Liu Ma.

JSFiddle Example

Link to original paper

Basic Usage

This module is written using the NodeJS module specification and will require module.exports as a globally defined variable to be used. See index.html for an example of using it in a browser setting.

Example

var graph = {'nodes': [...], edges: [...]}

var svg = d3.select('#mySvg')

var treemapper = treemapGraph(d3)

treemapper(graph, svg)

Instantiation

treemapGraph(d3)

Returns treemapper function. Arguments: d3

Running

treemapper(graph, d3Selection)

Applies hierarchical clustering to graph and attaches treemap to d3Selection. Returns nothing.

Arguments: Graph, D3 Selection

Updating Default Parameters

treemapper.settings.x(parameters)

Used to update margin and width of visualization. Returns treemapper for method chaining.

Arguments: Object with 'margin' and 'width' properties.

treemapper.settings.y(parameters)

Used to update margin and width of visualization. Returns treemapper for method chaining.

Arguments: Object with 'margin' and 'width' properties.

treemapper.mode(mode)

Used to update treemap mode. Returns treemapper for method chaining.

Arguments: String

treemapper.colorEdgeByGroup(bool)

If given nodes in graph have a 'group' property, and mode is set to true, this will color edges between nodes of similar group with the same color. Returns treemapper for method chaining.

Arguments: Boolean

treemapper.linkageStrategy(function)

Replaces default complete linkage strategy of hierarchical clustering algorithm. Returns treemapper for method chaining.

Arguments: Function

treemapper.edgeComparator(function)

Replaces default edge comparator of hierarchical clustering algorithm. This function should define edges as a partially ordered set and will define "greatest" edge. Returns treemapper for method chaining.

Arguments: Function

Basic Type Manifest

type Node :: Id {, Group }
type Nodes :: Null | [Node]
type Id :: Number
type Group :: Number

type Edge :: Source, Target, Value
type Edges :: Null | [Edge]
type Source :: Number
type Target :: Number
type Value :: Number

type Graph :: Edges, Nodes

type LinkageStrategy :: Number, Number -> Number
type EdgeComparator :: Edge, Edge -> Boolean