hirosassa / visstr

String Visualizer

VisStr

VisStr is a library to visualize a string and its properties such as repetitions, occurrences, and redundancies.

The following image visualizes all palindromes that occurs as substrings in "mississippi$".

See demos and API documents.

Usage

Put a canvas in your html, and then import vis_str.js like the following. (vis_str.js is output to ./bundles by compile.)

<canvas id="canvas" style="border:1px solid #000000;"> </canvas>
<script type="text/javascript" src="./vis_str.js"></script>

Create an visstr object in your js.

const visstr = window.visstr

const canvas = document.querySelector('#canvas')
// input string
const s = 'abaababaabaab'
// create visstr object.
const vstr = new visstr.VisStr(canvas)

Create a range list you want to draw, and add line style and color, and then group them so that they do not overlap with each other.

// create occurrences of aba.
const occ_aba = [[0, 2], [3, 5], [5, 7], [8, 10]]
// add line style and color.
const ranges = vstr.makeRanges(occ_aba, 'arrow', '#ff0000')
// make group so that they are not overlap with each others.
const range_groups = vstr.nonOverlapRanges(ranges)

Draw the range list by vstr.draw.

// draw the occurrences.
vstr.draw(s, range_groups)

The canvas draws the range list as following.

See the demo.

Compile

Run the following commands.

$ git clone https://github.com/kg86/visstr.git
$ cd visstr
$ npm install
$ npm run build

Libraries are output in ./lib.