Home

In this wiki you can find usage and implementation details.

For high overview take a look at 📃 README.md.

How does using sankey.js look like?

High level overview of how to use and how it work.

Points from 1 to 3 are important for those interested in using this library and will be extensively covered in the chapter "2. How to use?". Points from 4 to 12 give a hint of inner workings. More details can be found in chapter "3. Hot it works?".

How to use?

#	Step details
1	Initial setup Load sankey.js, and its dependancies. Define custom entities by extending sankey.EntityBase Define custom shapes by extending sankey.ShapeBase (Shapes are visual representation of entities) Define options (i.e. settings) Load SVG images (only if they are needed for shapes) Define d3.js canvas that will be used for rendering
2	Create new ModelManager() and use it to build your model.
3	Pass your model to sankey.renderModel(model, canvas, options).

How it works?

#	Step details
inside renderModel	What follows is execution order which you do not need to know in order to use this library.
4	Model is validated.
5	Entities are partitioned from model graph into columns of render graph.
6	Partitioned tables are transposed for convenience.
7	Entities are replaced with shapes representations.
8	If there are some shapes that have other shapes from the same column pointing to them they are moved to the next column. This is called normalisation.
9	Layouting is applied according to the options provided.
10	Monochromatic links are rendered with metadata.
11	If options ask for lines with gradients, initial monochromatic lines are replaced by gradient ones. Link metadata is used for rendering.
12	All shapes are rendered on canvas. This does not include links. They have were already rendered in previous step.

---

💈 How to use? (2.) ➡️