A Complete Guide to Build Your own Visualizer Using Viz.js and Animate.css easily!
You can visualize any graph with pure javascript！This tutorial is not specific to visualize circuit, it can be applied to any graph you want.
What is AAG-Visualizer? It is an elegant visualizer which can convert complex circuit format like AIGER (hard to understand for human) into simple and pretty .svg with just one click.
Inspiration by Final project “Fraig” of Data Structure and Programming (held by Professor Ric Huang) In the National Taiwan University Electrical Engineering Department.
A brief introduction of Fraig and AAG
What does FRAIG do?
It Functionally Reduces And-Inverter Graph, making circuit as small as possible.
Still don’t know what it is? See the pic below and you will understand.
What is AAG?
It looks like this:
aag 8 2 0 2 2
2
4
9
10
8 3 16
10 5 2
c
generated by Byron HsuFor details, please check out Brief Guide of Aiger Format.
You don’t need to understand it thoroughly. What you need to know is that it is just a format of And-Inverter Graph.
Ok, so let’s get into the topic. How did I convert .aag to .svg on the browser?
Application Structure
.
├── .gitignore
├── README.md
├── package.json
├── public
│ ├── bundle.js
│ ├── index.html
│ └── assets/
├── server
│ ├── config.js
│ └── server.js
├── src
│ ├── assets
│ ├── js
│ │ └── animate.js
│ │ └── parser.js
│ ├── scss
│ │ └── index.scss
│ ├── index.js
│ └── template.html
├── webpack.dev.config.js
└── webpack.prod.config.jsViz.js
Brief Introduction of Viz.js
This project is a Makefile for building Graphviz with Emscripten and a simple wrapper for using it in the browser — A super fast and convenient way to draw graphs on the browser. If you want to know more about Viz.js, please check official docs.
- Install
npm install viz.js- Basic Usage in javascript
// format ofi .dot
let digraph = 'digraph { a -> b; }';// for svg
let svgXml = Viz(digraph, { format: "svg"});
document.body.innerHtml = svgXml;// for img-element
let img-element = Viz(digraph, { format: "png-image-element"});
document.body.append(img-element);
- Customization
What’s more? You can customize the node color, the vertex width…etc on the graph. Just roll up your sleeves and change the style at your will. See the docs here.
It is just that easy.
Now we only need to parse our input into .dot file. And we can see our string magically turns into pretty .svg circuit!
Parser
- parser.js
Use the mightiness of regexp in javascript, and you can parse anything with ease. Check out this fantastic tutorial: JavaScript: Learn Regular Expressions for Beginners.
In view of different input format should have their own parser; therefore, I skip the part of discussing how to parse them. However, I believe that if you can use regexp well, it is not really a big deal.
//parser.jsfunction parser(args...){
}
export default parser;
Combine
import parser from './js/parser.js'// format of .dot
let digraph = parser(data);//for svg
let svgXml = Viz(digraph, { format: "svg"});
document.body.innerHtml = svgXml;//for img-element
let img-element = Viz(digraph, { format: format: "png-image-element"});
document.body.append(img-element);
Enjoy the fantastic fancy graph you make!
animate.css
Brief Introduction of animate.css
A super easy library to make fantastic animation on dom object. If you want to know more about animate.css , please check official docs.
- Install
<head>
<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>- Basic Usage
// animate.js
$.fn.extend({
animateCss: function (animationName, callback) {
let animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if (callback) {
callback();
}
});
return this;
}
});// index.js
// load animate.js in advance for repeated animation
import './js/animate.js'
document.getElementById('container').animateCss('shake');
Implementation
My goal is to add “shake” animation on visualize button when the format is wrong. And add “squeeze” animation on it when it is visualized successfully.
How to do that? It is unbelievably easy. You don’t need to write a lot of keyframes and some annoying thing. Just call animateCss and the magic will happen.
- Visualize Button
// index.js
function handleFileSelected(event) {
...
if(input.files.length === 0) { // no file in <input>
$('#btn').animateCss('shake');
return;
}else
if(!/.aag/g.test(input.files[0].name)){ // format is wrong
$('#btn').animateCss('shake');
return;
}
...
// Right format and ready to visualize
$('#btn').animateCss('rubberBand');
}
document.getElementById('btn').addEventListener('click', handleFileSelected);
Write 10 lines of code yet impress all the user who step into your website. Why not ?
❤ If this post was helpful, please hit the little heart!
And don’t forget to give a star to my repo 🎉 ✨: AAG-Visualizer.
Any PR and Issue is welcome!
You can clone from Github, and upload any .aag file in the example folders and wait for the magic moments.
git clone https://github.com/ByronHsu/AAG-Visualizer.gitHope you enjoy!
My GitHub Link: https://github.com/ByronHsu/
