ascii-art-graph

draw graphs in the terminal

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ascii-art-graph
0.5.03 years ago4 years agoMinified + gzip package size for ascii-art-graph in KB

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

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
and you can get finer detail by using the .braille() method to use the braille charset to subgrid the individual characters.
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

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)
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

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