<commit_before>Force-Directed Graph
===
[![NPM version][npm-image]][npm-url] [![Bower version][bower-image]][bower-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Dependencies][dependencies-image]][dependencies-url]

> A [Polymer](https://www.polymer-project.org/) web component for displaying force-directed graphs.


## Install

``` bash
$ bower install figure-io/polymer-graph-force-directed
```


## Usage

To use the component,

``` html
<!DOCTYPE html>
<html>
	<head>
		<script src="path/to/webcomponentsjs/webcomponents.min.js"></script>
		<link rel="import" href="path/to/polymer-graph-force-directed">
	</head>
	<body>
		<polymer-graph-force-directed id="chart"></polymer-graph-force-directed>
	</body>
</html>
```

and

``` javascript
var el = document.querySelector( '#chart' );
```

The component has the following public attributes and methods...



### Attributes

#### el.vertices

Graph vertices, where each `array` element is an `object`.

``` javascript
el.vertices = [
	{'id': 0, 'name': 'beep'},
	{'id': 1, 'name': 'boop'},
	{'id': 2, 'name': 'foo'},
	...
];
```

Note: when storing associated node data, the following attributes are [reserved](https://github.com/mbostock/d3/wiki/Force-Layout#nodes) for internal use: `index`, `x`, `y`, `px`, `py`, `fixed`, and `weight`.

TODO: define vertex data behavior. How is that data made meaningful? Is it provided on events (hover, click, etc) along with position for the user to deal with, or some other mechanism?


#### el.edges

Graph edges, where each `array` element is an `object` having `source` and `target` attributes. The source and target values should correspond to vertex indices in `el.vertices`.

``` javascript
el.edges = [
	{'source': 0, 'target': 5},
	{'source': 2, 'target': 14},
	{'source': 7, 'target': 8},
	...
];
```


#### el.config

Configuration `object` containing parameters corresponding to known attributes, as defined below.

``` javascript
el.config = {};
```

TODO: implement and define. Vega reference. Specification.


#### el.width

Chart canvas width. If not explicitly set, defaults to the width of the parent node.

``` javascript
el.width = 600; // px
```


#### el.height

Chart canvas height. If not explicitly set, default to the height of the parent node.<commit_msg>[UPDATE] README.<commit_after>Force-Directed Graph
===
[![NPM version][npm-image]][npm-url] [![Bower version][bower-image]][bower-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Dependencies][dependencies-image]][dependencies-url]

> A [Polymer](https://www.polymer-project.org/) web component for displaying force-directed graphs.


## Install

``` bash
$ bower install figure-io/polymer-graph-force-directed
```


## Usage

To use the component,

``` html
<!DOCTYPE html>
<html>
	<head>
		<script src="path/to/webcomponentsjs/webcomponents.min.js"></script>
		<link rel="import" href="path/to/polymer-graph-force-directed">
	</head>
	<body>
		<polymer-graph-force-directed id="chart"></polymer-graph-force-directed>
	</body>
</html>
```

and

``` javascript
var el = document.querySelector( '#chart' );
```

The component has the following public attributes and methods...



### Attributes

#### el.vertices

Graph vertices, where each `array` element is an `object`.

``` javascript
el.vertices = [
	{'id': 0, 'name': 'beep'},
	{'id': 1, 'name': 'boop'},
	{'id': 2, 'name': 'foo'},
	...
];
```

Note: when storing associated node data, the following attributes are [reserved](https://github.com/mbostock/d3/wiki/Force-Layout#nodes) for internal use: `index`, `x`, `y`, `px`, `py`, `fixed`, and `weight`.

TODO: define vertex data behavior. How is that data made meaningful? Is it provided on events (hover, click, etc) along with position for the user to deal with, or some other mechanism?


#### el.edges

Graph edges, where each `array` element is an `object` having `source` and `target` attributes. The source and target values should correspond to vertex indices in `el.vertices`.

``` javascript
el.edges = [
	{'source': 0, 'target': 5},
	{'source': 2, 'target': 14},
	{'source': 7, 'target': 8},
	...
];
```

Note: once the graph is initialized, the `source` and `target` values are [__overwritten__](https://github.com/mbostock/d3/wiki/Force-Layout#links) to point to the vertex `array` element, rather than the element index.


#### el.config

Configuration `object` containing parameters corresponding to known attributes, as defined below.

``` javascript
el.config = {};
```

TODO: implement and define. Vega reference. Specification.


#### el.width

Chart canvas width. If not explicitly set, defaults to the width of the parent node.

``` javascript
el.width = 600; // px
```


#### el.height

Chart canvas height. If not explicitly set, default to the height of the parent node.
{'fraction_non_alphanumeric': 0.16874616485988955, 'fraction_numerical': 0.005931683370832481, 'mean_word_length': 4.620689655172414, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 5, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6970543', 'n_tokens_mistral': 1635, 'n_tokens_neox': 1497, 'n_words': 499}