https://github.com/gram-data/d3-gram

D3 support for gram format.
https://github.com/gram-data/d3-gram

d3 d3-gram gram gram-format

Last synced: 5 months ago
JSON representation

D3 support for gram format.

• Host: GitHub
• URL: https://github.com/gram-data/d3-gram
• Owner: gram-data
• License: mit
• Created: 2020-08-31T19:32:33.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-01-26T11:28:27.000Z (almost 5 years ago)
• Last Synced: 2025-07-22T15:46:32.544Z (6 months ago)
• Topics: d3, d3-gram, gram, gram-format
• Language: JavaScript
• Homepage: https://gram-data.github.io/d3-gram/
• Size: 4.5 MB
• Stars: 4
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - d3-gram - data | 3 | (JavaScript)

README

          
D3 support for the [gram](http://gram-data.github.io) text format of graph data. `(a)-->(b)<--(c)`

## How to d3-gram

`d3Gram()` parses text in the gram format, producing a graph of nodes and links that is

ready to be used in a `d3-force` simulation.

``` TypeScript

import * as d3 from "d3";

import {parse, layout, draw, drag, updateNodes, updateLinks} from 'd3-gram';

d3.text("https://raw.githubusercontent.com/gram-data/d3-gram/master/public/miserables.gram").then( gramSource => {

  let graph = parse(gramSource);

  let simulation = layout(graph);

  const {nodeSelection, linkSelection} = draw(graph, "svg");

  nodeSelection.call(drag(simulation));

  simulation.on("tick", () => {

    updateNodes(nodeSelection);

    updateLinks(linkSelection);

  });

}

```