<commit_before>model.js
========

A functional reactive model library - Model.js manages the execution flow of the data flow graphs you define.
Kind of like [Backbone](http://backbonejs.org/) and [React](http://facebook.github.io/react/), but _simpler_ and designed specifically for making [D3](http://d3js.org/) easier to use.

 * [Annotated Source](http://curran.github.io/model/docs/model.html)
 * [Unit Tests](http://curran.github.io/model/docs/ModelTests.html)
 * Examples:

[![](http://bl.ocks.org/curran/raw/cf4b98fff0517ca04667/thumbnail.png)](http://bl.ocks.org/curran/cf4b98fff0517ca04667)
[![](http://bl.ocks.org/curran/raw/9e04ccfebeb84bcdc76c/thumbnail.png)](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)
[![](http://bl.ocks.org/curran/raw/3b811f05a0ce39d0d7cd/thumbnail.png)](http://bl.ocks.org/curran/3b811f05a0ce39d0d7cd)
[![](http://bl.ocks.org/curran/raw/015d34d6d3d562877e51/thumbnail.png)](http://bl.ocks.org/curran/015d34d6d3d562877e51)
[![](http://bl.ocks.org/curran/raw/015402cce2caa074551e/thumbnail.png)](http://bl.ocks.org/curran/015402cce2caa074551e)

Installable via [Bower](http://bower.io/): `bower install model`.

Usable as:

 * an AMD (RequireJS) module `define(["model"], function(Model){ ... });`
 * a CommonJS (Node) module `var Model = require("model");`
 * a browser global `<script src="model.js"></script>`

## Public API

`var model = Model([defaults]);`

 * The model constructor function.
 * Using "new" is optional.
 * The optional `defaults` constructor argument is an object with default property values.
 * The returned `model` object can be treated as a plain JavaScript Object
   for setting and getting property values, e.g.
   * `model.x = 5;`
   * `console.log(model.x);`

`var listener = model.when(properties, callback [, thisArg]);`

 * Listens for changes to the given dependency properties.
 * `properties` Either an array of strings or a string.
   Specifies the dependency properties.
 * `callback` A callback function that is called:
   * with dependency property values as arguments,
   * only if all dependency properties have values,
   * once for initialization,
   * whenever one or more dependency properties change,
   * on the next tick of the JavaScript event loop after 
     dependency properties change,
   * only once as a result of one or more changes to
     dependency properties.
 * `thisArg` An optional argument bound to `this` in the callback.
 * Returns a `listener` object that can be used to remove the callback.

`model.cancel(listener)`

 * Removes the listener returned by `when`. This means the callback
   will no longer be called when properties change.

`model.on(property, callback(newValue, oldValue)[, thisArg])`

 * Adds a change listener for the given property.
 * Kind of like [on in Backbone](http://backbonejs.org/#Events-on)

`model.off(property, callback)`

 * Removes a change listener for the given property.
 * Kind of like [off in Backbone](http://backbonejs.org/#Events-off)

`model.set(values)`

 * A convenience function for setting many model properties at once.
 * Assigns each property from the given `values` object to the model.
 * This function can be used to deserialize models, e.g.:
   * `var json = JSON.stringify(model);`
   * ... later on ..
   * `model.set(JSON.parse(json));`

## Data Dependency Graphs

Setting model properties in `when` callbacks enables creating reactive data dependency graphs. . As a simple example, consider a `fullName` property that is computed from `firstName` and `lastName`.

```javascript
model.when(['firstName', 'lastName'], function (firstName, lastName) {
  model.fullName = firstName + ' ' + lastName;
});
```

<img src="http://curran.github.io/model/images/computedProperty.png">

The following example demonstrates construction of a data dependency graph in which the flow propagates two hops from x to y to z.
```javascript
model.when('x', function (x) {
  model.y = x + 1;
});
model.when('y', function (y) {
  model.z = y * 2;
});
```

<img src="http://curran.github.io/model/images/dependencyGraph.png">

This pattern can be used to build up reactive data dependency graphs of arbitrary complexity. 

## Reactive Visualizations

As an example of how data dependency graphs can be used for creating visualizations, consider this [bar chart](http://bl.ocks.org/curran/015d34d6d3d562877e51).

![Bar Chart](http://curran.github.io/images/model/barChart.png)
This is what the bar chart looks like.

![Bar Chart Flow](http://gist.github.com/curran/015d34d6d3d562877e51/raw/7ddf656312f99643980a95d62e4238c91b6481b1/barChartFlow.png)
This is the reactive flow of the bar chart. The diagram was constructed using the [reactive flow diagram renderer](http://bl.ocks.org/curran/5905182da50a4667dc00). Lambdas represent reactive functions, and labeled nodes represent model properties.

Though the entire reactive flow may seem complex, programming it is simple, because each reactive function is defined independently, only knowing about its direct dependencies and the properties that it changes. This is why functional reactive programming is so great.

Multiple reactive visualizations can be combined together to form visualization dashboards with multiple linked views. For example, take a look at the [linked views example](https://github.com/curran/model/tree/gh-pages/examples/d3LinkedViews), which looks like this:

<img src="http://curran.github.io/model/images/linkedViews.png">
Brushing in the scatter plot causes the selected data to be aggregated and plotted in the bar chart ([run it!](http://curran.github.io/model/examples/d3LinkedViews/)).


## See Also

 * [Talk on YouTube](https://www.youtube.com/watch?v=TpZqVAtQs94) This talk presents Model.js and how it can be used to construct reactive data visualizations with D3. Presented in California at the Bay Area D3 Meetup, July 2014.
   * [Presentation on GitHub](https://github.com/curran/screencasts/tree/gh-pages/reactiveDataVis), [Incremental Bar Chart Example Code](http://curran.github.io/screencasts/reactiveDataVis/examples/viewer/index.html#/) (use left/right arrows)
 * Examples
   * D3
     * [Bar Chart](https://github.com/curran/model/tree/gh-pages/examples/d3BarChart)
     * [Line Chart](https://github.com/curran/model/tree/gh-pages/examples/d3LineChart)
     * [Scatter Plot](https://github.com/curran/model/tree/gh-pages/examples/d3ScatterPlot)
     * [Linked Views](https://github.com/curran/model/tree/gh-pages/examples/d3LinkedViews)
     * [Stacked Area Chart](https://github.com/curran/model/tree/gh-pages/examples/d3StackedArea)<commit_msg>Updated image URL<commit_after>model.js
========

A functional reactive model library - Model.js manages the execution flow of the data flow graphs you define.
Kind of like [Backbone](http://backbonejs.org/) and [React](http://facebook.github.io/react/), but _simpler_ and designed specifically for making [D3](http://d3js.org/) easier to use.

 * [Annotated Source](http://curran.github.io/model/docs/model.html)
 * [Unit Tests](http://curran.github.io/model/docs/ModelTests.html)
 * Examples:

[![](http://bl.ocks.org/curran/raw/cf4b98fff0517ca04667/thumbnail.png)](http://bl.ocks.org/curran/cf4b98fff0517ca04667)
[![](http://bl.ocks.org/curran/raw/9e04ccfebeb84bcdc76c/thumbnail.png)](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)
[![](http://bl.ocks.org/curran/raw/3b811f05a0ce39d0d7cd/thumbnail.png)](http://bl.ocks.org/curran/3b811f05a0ce39d0d7cd)
[![](http://bl.ocks.org/curran/raw/015d34d6d3d562877e51/thumbnail.png)](http://bl.ocks.org/curran/015d34d6d3d562877e51)
[![](http://bl.ocks.org/curran/raw/015402cce2caa074551e/thumbnail.png)](http://bl.ocks.org/curran/015402cce2caa074551e)

Installable via [Bower](http://bower.io/): `bower install model`.

Usable as:

 * an AMD (RequireJS) module `define(["model"], function(Model){ ... });`
 * a CommonJS (Node) module `var Model = require("model");`
 * a browser global `<script src="model.js"></script>`

## Public API

`var model = Model([defaults]);`

 * The model constructor function.
 * Using "new" is optional.
 * The optional `defaults` constructor argument is an object with default property values.
 * The returned `model` object can be treated as a plain JavaScript Object
   for setting and getting property values, e.g.
   * `model.x = 5;`
   * `console.log(model.x);`

`var listener = model.when(properties, callback [, thisArg]);`

 * Listens for changes to the given dependency properties.
 * `properties` Either an array of strings or a string.
   Specifies the dependency properties.
 * `callback` A callback function that is called:
   * with dependency property values as arguments,
   * only if all dependency properties have values,
   * once for initialization,
   * whenever one or more dependency properties change,
   * on the next tick of the JavaScript event loop after 
     dependency properties change,
   * only once as a result of one or more changes to
     dependency properties.
 * `thisArg` An optional argument bound to `this` in the callback.
 * Returns a `listener` object that can be used to remove the callback.

`model.cancel(listener)`

 * Removes the listener returned by `when`. This means the callback
   will no longer be called when properties change.

`model.on(property, callback(newValue, oldValue)[, thisArg])`

 * Adds a change listener for the given property.
 * Kind of like [on in Backbone](http://backbonejs.org/#Events-on)

`model.off(property, callback)`

 * Removes a change listener for the given property.
 * Kind of like [off in Backbone](http://backbonejs.org/#Events-off)

`model.set(values)`

 * A convenience function for setting many model properties at once.
 * Assigns each property from the given `values` object to the model.
 * This function can be used to deserialize models, e.g.:
   * `var json = JSON.stringify(model);`
   * ... later on ..
   * `model.set(JSON.parse(json));`

## Data Dependency Graphs

Setting model properties in `when` callbacks enables creating reactive data dependency graphs. . As a simple example, consider a `fullName` property that is computed from `firstName` and `lastName`.

```javascript
model.when(['firstName', 'lastName'], function (firstName, lastName) {
  model.fullName = firstName + ' ' + lastName;
});
```

<img src="http://curran.github.io/model/images/computedProperty.png">

The following example demonstrates construction of a data dependency graph in which the flow propagates two hops from x to y to z.
```javascript
model.when('x', function (x) {
  model.y = x + 1;
});
model.when('y', function (y) {
  model.z = y * 2;
});
```

<img src="http://curran.github.io/model/images/dependencyGraph.png">

This pattern can be used to build up reactive data dependency graphs of arbitrary complexity. 

## Reactive Visualizations

As an example of how data dependency graphs can be used for creating visualizations, consider this [bar chart](http://bl.ocks.org/curran/015d34d6d3d562877e51).

![Bar Chart](http://curran.github.io/images/model/barChart.png)

This is what the bar chart looks like.

![Bar Chart Flow](http://bl.ocks.org/curran/raw/015d34d6d3d562877e51/barChartFlow.png)

This is the reactive flow of the bar chart. The diagram was constructed using the [reactive flow diagram renderer](http://bl.ocks.org/curran/5905182da50a4667dc00). Lambdas represent reactive functions, and labeled nodes represent model properties.

Though the entire reactive flow may seem complex, programming it is simple, because each reactive function is defined independently, only knowing about its direct dependencies and the properties that it changes. This is why functional reactive programming is so great.

Multiple reactive visualizations can be combined together to form visualization dashboards with multiple linked views. For example, take a look at the [linked views example](https://github.com/curran/model/tree/gh-pages/examples/d3LinkedViews), which looks like this:

<img src="http://curran.github.io/model/images/linkedViews.png">
Brushing in the scatter plot causes the selected data to be aggregated and plotted in the bar chart ([run it!](http://curran.github.io/model/examples/d3LinkedViews/)).


## See Also

 * [Talk on YouTube](https://www.youtube.com/watch?v=TpZqVAtQs94) This talk presents Model.js and how it can be used to construct reactive data visualizations with D3. Presented in California at the Bay Area D3 Meetup, July 2014.
   * [Presentation on GitHub](https://github.com/curran/screencasts/tree/gh-pages/reactiveDataVis), [Incremental Bar Chart Example Code](http://curran.github.io/screencasts/reactiveDataVis/examples/viewer/index.html#/) (use left/right arrows)
 * Examples
   * D3
     * [Bar Chart](https://github.com/curran/model/tree/gh-pages/examples/d3BarChart)
     * [Line Chart](https://github.com/curran/model/tree/gh-pages/examples/d3LineChart)
     * [Scatter Plot](https://github.com/curran/model/tree/gh-pages/examples/d3ScatterPlot)
     * [Linked Views](https://github.com/curran/model/tree/gh-pages/examples/d3LinkedViews)
     * [Stacked Area Chart](https://github.com/curran/model/tree/gh-pages/examples/d3StackedArea)
{'fraction_non_alphanumeric': 0.12270546119277935, 'fraction_numerical': 0.03000990174423033, 'mean_word_length': 4.55414551607445, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 16, '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': '6103917', 'n_tokens_mistral': 4276, 'n_tokens_neox': 3954, 'n_words': 1233}