# ascii-art-graph

> draw graphs in the terminal

Latest version **0.5.0** (published 2021-06-29) · 0 weekly downloads

## Install

```sh
npm install ascii-art-graph
pnpm add ascii-art-graph
yarn add ascii-art-graph
bun add ascii-art-graph
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2021-06-29 |
| First published | 2019-12-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 223.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | khrome |

## Links

- npm: https://www.npmjs.com/package/ascii-art-graph
- npm.io page: https://npm.io/package/ascii-art-graph

## Dependencies (5)

- [d3](https://npm.io/package/d3.md) ^5.14.2
- [json2csv](https://npm.io/package/json2csv.md) ^4.5.4
- [async-arrays](https://npm.io/package/async-arrays.md) ^1.0.1
- [ascii-art-ansi](https://npm.io/package/ascii-art-ansi.md) ^1.4.1
- [ascii-art-braille](https://npm.io/package/ascii-art-braille.md) 0.0.2

## Recent versions

- 0.5.0 (latest) — 2021-06-29
- 0.1.2 — 2021-04-25
- 0.1.1 — 2019-12-02
- 0.1.0 — 2019-12-02
- 0.0.4 — 2019-12-01
- 0.0.3 — 2019-12-01
- 0.0.2 — 2019-12-01
- 0.0.1 — 2019-12-01

## README

Ascii Art Graph
===============

Currently uses d3 internally for domain/range generation, but shifting to a D3 compatible interface and classes built on top of it.

Usage
-----

```javascript
var graph = new Graph.Timeseries({
    height : 20,
    width : 80,
    node : '@',
    line : '`',
    timeField : 'date',
    valueField : 'value',
    colors : ['red', 'blue']
});
graph.render({
    'timeseries-a' : [
      { value: 2, date: '2019-11-25T01:55:45.000Z' },
      { value: 5, date: '2019-11-25T01:56:45.000Z' },
      { value: 3, date: '2019-11-25T01:58:45.000Z' },
      { value: 11, date: '2019-11-25T01:59:45.000Z' }
  ],
  'timeseries-b' : [
    { value: 10, date: '2019-11-25T01:55:45.000Z' },
    { value: 8, date: '2019-11-25T01:56:45.000Z' },
    { value: 4, date: '2019-11-25T01:58:45.000Z' },
    { value: 6, date: '2019-11-25T01:59:45.000Z' }
  ]
}, function(err, result){
    //do something with the result
});
```

will render:

![multi-series](https://github.com/khrome/ascii-art-docs/raw/master/Examples/multi-series.png)

and you can get finer detail by using the `.braille()` method to use the braille charset to subgrid the individual characters.

```javascript
var graph = new Graph.Timeseries({
    height : 20,
    width : 80
});
graph.braille({
    'some-random-timeseries' : [
      { value: 2, date: '2019-11-25T01:55:45.000Z' },
      { value: 5, date: '2019-11-25T01:56:45.000Z' },
      { value: 3, date: '2019-11-25T01:58:45.000Z' },
      { value: 11, date: '2019-11-25T01:59:45.000Z' }
  ]
}, function(err, text, grid){
    //do something with the results
});
```
will render:

![simple-braille](https://github.com/khrome/ascii-art-docs/raw/master/Examples/simple-braille.png)

Experimental D3 Usage
---------------------

This is all very preliminary, so much of the axis layout and placement is only partially complete. An implementation of the existing `Graph.Timeseries` using the d3 implementation is available at `Graph.NewTimeseries` (but does not currently support braille)

```js
var d3 = Graph.d3();

var x = d3.scaleTime()
    .range([0, width])
    .domain(d3.extent(allData, function(d){ return d.date; }));

var y = d3.scaleLinear()
    .range([height, 0])
    .domain(d3.extent(allData, function(d) { return d.value; }));

var xAxis = d3.terminal.axis()
    .scale(x, y) //<- note you also have to pass the scale of the opposing axis
    .tickFormat(formatFn)
    .tickSize(10)
    .orient("bottom");

var yAxis = d3.terminal.axis()
    .scale(y, x) //<- note you also have to pass the scale of the opposing axis
    .orient("left");

var line = d3.terminal.line()
    .x(function(d){ return Math.floor(x(d.date)) })
    .y(function(d){ return Math.floor(y(d.value)) });
var marker = d3.terminal.circle()
    .x(function(d){ return Math.floor(x(d.date)) })
    .y(function(d){ return Math.floor(y(d.value)) });

var svg = d3.select("::screen::")
    .attr("width", width)
    .attr("height", height);

svg.append("g")
    .attr("class", "x axis")
    .attr("height", 10)
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .attr("width", 20)
    .call(yAxis);

Object.keys(series).forEach(function(seriesName, i){
    var data = series[seriesName];
    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr('color', colors[i%colors.length])
        .attr("d", line);

    svg.append("circle")
        .datum(data)
        .attr("class", "circle")
        .attr('r', 5)
        .attr('color', colors[i%colors.length])
        .call(marker);
});

//non-standard `render` function
svg.render(function(err, rendered){
    if(err) console.log('ERR', err);
    callback(null, rendered);
})
```

Renders:

![with-axes](https://github.com/khrome/ascii-art-docs/raw/master/Examples/graph_w_axes.png)

Roadmap
-------
- finish date axes(tick sampling)
- ensure top & right axes function correctly
- remove requirement to provide counter axis (deviation from d3 surface)
- support braille in the d3 interface

---
_Source: https://npm.io/package/ascii-art-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._