ascii-art-graph

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:

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:

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:

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