Scatter plots and dot charts in terminal text

Use glyphChartDot(data, { x, y, fill? }, options?) for scatter plots. Braille gives sub-cell point resolution; box and ASCII use whole-cell glyphs.

Iris measurements

This thirty-flower excerpt follows the Iris dataset in the charts workbench: sepal length against petal length in centimetres. It samples ten observations from each species, rather than the complete 150-flower distribution.

                         Iris: three species                        
                                                                    
Petal (cm)                                                          
                                                                    
8 ┤                                                                 
  │                                                                 
  │                                                          ⣤      
6 ┤                                                      ⣤    ⣤     
  │                                     ⠛     ⣤  ⣤    ⠛             
  │                                      ⠛ ⣤  ⠛                     
  │                        ⣤  ⣤  ⠛ ⣤         ⣤⣤    ⠛                
4 ┤                        ⣤  ⠛                                     
  │                ⠛                                                
  │                                                                 
2 ┤                                                                 
  │             ⣤  ⣤     ⣤    ⣤                                     
  │             ⠛  ⠛ ⠛                                              
  │                                                                 
0 └┬───────┬───────┬───────┬───────┬───────┬───────┬───────┬───────┬
   4      4.5      5      5.5      6      6.5      7      7.5      8
                              Sepal (cm)                            
     ⣤  setosa           ⣤  versicolor          ⣤  virginica        

Code

import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  marks: [
    {
      type: "dot",
      data: [
        {
          sepal: 5.1,
          petal: 1.4,
          species: "setosa"
        },
        {
          sepal: 5.4,
          petal: 1.7,
          species: "setosa"
        },
        {
          sepal: 5.4,
          petal: 1.5,
          species: "setosa"
        },
        {
          sepal: 5.7,
          petal: 1.5,
          species: "setosa"
        },
        {
          sepal: 5.4,
          petal: 1.7,
          species: "setosa"
        },
        {
          sepal: 5,
          petal: 1.6,
          species: "setosa"
        },
        {
          sepal: 4.8,
          petal: 1.6,
          species: "setosa"
        },
        {
          sepal: 5,
          petal: 1.2,
          species: "setosa"
        },
        {
          sepal: 5,
          petal: 1.3,
          species: "setosa"
        },
        {
          sepal: 4.8,
          petal: 1.4,
          species: "setosa"
        },
        {
          sepal: 7,
          petal: 4.7,
          species: "versicolor"
        },
        {
          sepal: 5.7,
          petal: 4.5,
          species: "versicolor"
        },
        {
          sepal: 5,
          petal: 3.5,
          species: "versicolor"
        },
        {
          sepal: 6.7,
          petal: 4.4,
          species: "versicolor"
        },
        {
          sepal: 5.9,
          petal: 4.8,
          species: "versicolor"
        },
        {
          sepal: 6.6,
          petal: 4.4,
          species: "versicolor"
        },
        {
          sepal: 5.5,
          petal: 3.8,
          species: "versicolor"
        },
        {
          sepal: 6,
          petal: 4.5,
          species: "versicolor"
        },
        {
          sepal: 5.5,
          petal: 4.4,
          species: "versicolor"
        },
        {
          sepal: 5.7,
          petal: 4.2,
          species: "versicolor"
        },
        {
          sepal: 6.3,
          petal: 6,
          species: "virginica"
        },
        {
          sepal: 7.6,
          petal: 6.6,
          species: "virginica"
        },
        {
          sepal: 6.5,
          petal: 5.1,
          species: "virginica"
        },
        {
          sepal: 6.4,
          petal: 5.3,
          species: "virginica"
        },
        {
          sepal: 6.9,
          petal: 5.7,
          species: "virginica"
        },
        {
          sepal: 7.2,
          petal: 6,
          species: "virginica"
        },
        {
          sepal: 7.4,
          petal: 6.1,
          species: "virginica"
        },
        {
          sepal: 7.7,
          petal: 6.1,
          species: "virginica"
        },
        {
          sepal: 6.7,
          petal: 5.6,
          species: "virginica"
        },
        {
          sepal: 6.7,
          petal: 5.2,
          species: "virginica"
        }
      ],
      channels: {
        x: "sepal",
        y: "petal",
        fill: "species"
      }
    }
  ],
  axes: {
    x: {
      title: "Sepal (cm)"
    },
    y: {
      title: "Petal (cm)"
    }
  },
  title: "Iris: three species",
  scales: {
    x: {
      domain: [4, 8],
      nice: false
    },
    y: {
      domain: [0, 8],
      nice: false
    }
  }
}, {
  target: "web",
  width: 68,
  height: 22
});
console.log(text);

import { glyphChartDot, renderGlyphChart } from "@glyphcss/charts";
const result = renderGlyphChart(glyphChartDot([
  { sepal: 5.1, petal: 1.4, species: "setosa" },
  { sepal: 7.0, petal: 4.7, species: "versicolor" },
], { x: "sepal", y: "petal", fill: "species" }), { target: "terminal" });

Dots in the same cell may overlap. Increase width/height or aggregate dense data before rendering. There is no 2D point-size or shape option. Add text annotations for selected observations, or use 3D scatter for a third numeric coordinate.