Graph Selector

A quick example showing how Graph Selector gets us from an encoding to a working graph in seconds.

To add graph-selector to your project, install it with the package manager of your preference.

npm install graph-selector

Use CSS style selectors to add ID's and classes to nodes in your graph.

Create directed edges between nodes using indentation and add labels to them with text before the colon (:).

Use classes to create different types of relationships between nodes and edges in your graph.

Learn how to use data attribute syntax to store data on nodes that impacts the graph that is rendered.

Create a d3 bar graph from data attributes stored on nodes.

Create data-driven Sankey diagrams to visualize flows.

Use different techniques to display images in different contexts in your graph.

Use tabular data to create your graph, such as US-Canada migration data from 1955-1988.

Please consider donating to our open-source efforts to help us develop and improve Graph Selector!

Describe graphs and their associated data in an expressive, agnostic syntax.