Skip to content

Latest commit

 

History

History
97 lines (71 loc) · 3.75 KB

api.md

File metadata and controls

97 lines (71 loc) · 3.75 KB
Raw

kpartite

Generates a D3 compatible node-link structure from a data frame (array of objects).

Parameters

  • data Array array of objects containing the data.
  • keys (Object | Array) object of {key: column/accessor} pairs or an array of [key, column/accessor] pairs
  • values Object object of accessor functions for link values. (optional, default {})

Examples

const data = [
  { Country: "USA", Religion: "Christian" },
  { Country: "UK", Religion: "Christian" },
  { Country: "Iran", Religion: "Muslim" },
];
// List nodes to extract from each row
const keys = {
  Country: "Country", // Create node from "Country" field
  Religion: (d) => d.Religion, // Create node from "Religion" field
};
// Define attributes to add to each node / link
const values = {
  count: 1, // Sum "1" to count the number of rows matching each node / link
  Population: "Population", // Sum the "Population" field from rows matching each node / link
};
const { nodes, links } = kpartite(data, keys, values);

Returns NodeLink { nodes, links } arrays with the node-link structure.

NodeLink

Type: Object

Properties

  • nodes Array unique nodes for each key in each data element

    • nodes[].key string key of the node.
    • nodes[].value string value of the node.
    • nodes[].id string JSON.stringify([key, value]).

  • links Array unique links for each PAIR of keys in each data element

    • links[].source Object link to the nodes object corresponding to the first key.
    • links[].target Object link to the nodes object corresponding to the second key.
    • links[].id string JSON.stringify([source.id, target.id]).

network

Creates a network visualization.

Parameters

  • el (string | HTMLElement) The selector or HTML element for the SVG.

  • params Object Parameters for the visualization.

    • params.nodes Array list of node objects.
    • params.links Array list of {source, target} link objects.
    • params.width number? width of the SVG.
    • params.height number? height of the SVG.
    • params.linkCurvature number curvature of the links. 0 = straight, 1 = half-circle. (optional, default 0)
    • params.nodeTag string SVG tag to use for nodes. (optional, default "circle")
    • params.forces Object? forces to apply to the simulation.
    • params.brush Function? callback function to handle brush events.
    • params.id string? unique identifier for the simulation. Uses el.id if not specified.
    • params.d3 Object D3 instance to use. (optional, default window.d3)

Returns Graph Object containing D3.js selections for nodes and links.

Graph

Define the returned graph

Type: Object

Properties

  • nodes Object D3.js selection for nodes.
  • links Object D3.js selection for links.
  • nodeGroup Object D3.js selection for the node group.
  • linkGroup Object D3.js selection for the link group.
  • simulation Object D3.js simulation object.