<commit_before># Maximum Plaid

[![Build Status](https://travis-ci.org/ivanvanderbyl/plaid.svg?branch=master)](https://travis-ci.org/ivanvanderbyl/plaid)

Template driven data visualisation for ambitious applications.

**WIP**

# Design

Traditional charting libraries often times have poor separation of concerns from
data and presentation. This leads to poor maintainability and code reuse.

Another consideration when visualising a dataset is whether you desire _efficiency_
or _expressiveness_, when you typically can't have both.

`maximum-plaid` is designed to change this by utilising Ember's declaritive templating 
and component composition, with D3's leading primitives for producing easy to
compose data visualisations for both data exploration and explanatory presentation.

# Proposed API

On their own, components for even the simplest elements in a visualisation can
quickly require complicated APIs. To solve this, Ember contextual components can
provide lower level primitive components with the necessary inputs for scaling
and positioning. This reduces the API surface for the user to quickly produce
visualisations in very few lines of code.

```hbs
{{#plaid-plot xScale yScale width height as |plot|}}
  {{plot.right-axis}}
  {{plot.line responseTimes}}
{{/plaid-plot}}
```

# Mixins

## `PlotArea`

Provides simple calculations for specifying the position of the main graphic in
a visualisation.

### Example:

```js
import { PlotArea } from 'plaid/mixins/plot-area';

export default Component.extend(PlotArea, {<commit_msg>Added more API design ideas<commit_after># Maximum Plaid

[![Build Status](https://travis-ci.org/ivanvanderbyl/plaid.svg?branch=master)](https://travis-ci.org/ivanvanderbyl/plaid)

Template driven data visualisation for ambitious applications.

**WIP**

# Design

Traditional charting libraries often times have poor separation of concerns from
data and presentation. This leads to poor maintainability and code reuse.

Another consideration when visualising a dataset is whether you desire _efficiency_
or _expressiveness_, when you typically can't have both.

`maximum-plaid` is designed to change this by utilising Ember's declaritive templating 
and component composition, with D3's leading primitives for producing easy to
compose data visualisations for both data exploration and explanatory presentation.

# Proposed API

On their own, components for even the simplest elements in a visualisation can
quickly require complicated APIs. To solve this, Ember contextual components can
provide lower level primitive components with the necessary inputs for scaling
and positioning. This reduces the API surface for the user to quickly produce
visualisations in very few lines of code.

```hbs
{{#plaid-plot xScale yScale width height as |plot|}}
  {{plot.right-axis}}
  {{plot.line responseTimes}}
{{/plaid-plot}}
```

Or perhaps using [ember-d3-scale](https://github.com/spencer516/ember-d3-scale#linear-scale)

```hbs
{{#plaid-plot (time-scale xDomain xRange) (linear-scale yDomain yRange) width height as |plot|}}
  {{plot.right-axis}}
  {{plot.line responseTimes}}
{{/plaid-plot}}
```

Ideally width and height would be take into account by just supplying the `plotArea`
property.

# Mixins

## `PlotArea`

Provides simple calculations for specifying the position of the main graphic in
a visualisation.

### Example:

```js
import { PlotArea } from 'plaid/mixins/plot-area';

export default Component.extend(PlotArea, {
{'fraction_non_alphanumeric': 0.07947019867549669, 'fraction_numerical': 0.0020155485171321624, 'mean_word_length': 5.282097649186257, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, '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': '1387897', 'n_tokens_mistral': 973, 'n_tokens_neox': 920, 'n_words': 401}