A Simple Structure


The SeeTheDollars application is designed to help you create money flow diagrams all by yourself.

The money flow diagrams have a simple skeleton that consists of geometrical shapes and curves, like the one on this page, which is the skeleton of the home page diagram. To create the skeleton, you just click and drag on a web page and select the shapes, the sizes and the locations.

In the language of web developers, the application is a div and Bézier curve editor. You start with a container div (red border) that you make interactively on a web page. Then you make all the other divs (blue borders) and reference their locations to the container div. The container div has also a canvas of the same size, where the Bézier curves for the dollar paths are drawn.

Once you have the skeleton, it’s up to you to decide how fancy you want the diagram to be. It all depends on what goes inside those geometrical figures. It can be something simple like text, or elaborate like images or videos. The page How to Use SeeTheDollars describes the process of making a diagram.

The dollar paths are Bézier curves that you can design interactively, just like the reference link shows.

The application creates an html file and a folder with the code, images and whatever else is needed.


References

The article Canvas Bézier Curve Example appeared here.