dot and box

dot and box allows drawing dots and boxes and do simple step based animations making it easy to visualise some algorithms or your raw ideas e.g. show event flow in a distributed system.

Documentation and examples

See documentation and examples or play with live editor here

Example use cases

• visualize algorithm ideas e.g. bubble sort
• visualize common CS patterns e.g. request response pattern
• visualize event driven architecture communication

How to use it

dot and box is using HTML web components standard

1. install script by npm

   npm i dot-and-box

2. Add script reference

   <script src="dot-and-box.js"></script>

3. Add dot-and-box tag to your html page e.g.

<dot-and-box controls color="white" code="
   title: sort with bubble sort
   box id: win at: [-6, 0] size: [2, 1] color: rgba(254,193,7,0.6) visible: false
   dots ids: 2 1 5 3 4 at: [-3,0] radius: 20
   step: '(1) select first two numbers' duration: 0.8s
   win <- visible: true, win -> +[3,0]
   step: '(2) swap if left bigger than right'
   2 <-> 1 // swap dot 2 with 1
   step: '(3) select next two numbers'
   win -> +[1,0] // move window by 1 cell right
   step: 'ignore if left is smaller and select next'
   win -> +[1,0]
   step: 'again swap if left bigger'
   5 <-> 3
   step: 'and again'
   win -> +[1,0]
   5 <-> 4
   step: 'repeat from start'
   win -> -[3,0]"
</dot-and-box>

Development

Run in dev mode

npm run dev

Build from source code

npm run build

Test

npm run test

build docs

nvm use 22
cd docs
npm run start