Awesome

d3-wave

D3.js based wave (signal) visualizer

This library renders signal dumps into specified svg. (GTKWave for javascript)

Use npm install d3-wave --save to install this library and save it to your package.json file. Installation from git for developers:

npm install            # normal dependencies
npm install --only=dev # developement only dedpendencies
npm run-script build   # build dist js
npm test               # run tests

python -m http.server  # run http server in root directory in order to open the examples in ./examples directory

Features

• Vertical scrolling and zoom in time domain
• Tree based signal hierarchy view (collapsable)
• Signal tree scrollbar with preview
• Drag-and-drop/key based signal organization
• Renderers for int, str, bit, enum and bit vector values (user extendible)
• Dynamic time unit on x-axis
• Responsive design
• Arbitrary integer values

Input JSON format

Signal record

{ "name": "<signal name>",
  "type": {"name": "<vcd signal type>",
           "width": "<bit width of signal (integer)>"},
  "data": ["<data records>"],      // optionally
  "children": ["<signal recors>"], // optionally, if children should be collapsed by default use _children
}

Data record format

["<time (number)>", "<value (string, format dependent on datatype)>"]

There is a special type with name "struct" Signal with this name has stored another signal records in it's data. The type in signal record specifies which renderer should be used and what is the format of values. For more details check src/rowRenderers. For example for type: {"name": "wire", "width": 8} the value may be

Similar opensource

• wavedash SVG-based Waveform Viewer
• Konata pipeline visualizer
• wavedrom static waveform printer
• JSwave Javascript visualizer for vcd
• impulse.vscode event and waveform visualization and analysis workbench