Skip to content

2. How to use?

Miroslav Jelaska edited this page Sep 13, 2017 · 12 revisions

This chapter will reflect on preview project for how to use sankey.js. Preview project can be found under root of this project in folder "preview". This section will describe how to run preview project.

How to run preview project?

Project uses ES6, and Webpack with Babel.

  1. Change directory to sankey.js/preview
  2. Restore npm packages.
npm install

Tip: Instead of npm you can also use yarn.

yarn install
  1. Run webpack Webpack should be globally installed. For installation instructions visit Webpack > getting-started.
webpack
  1. Run server from project root folder i.e. 'sankey.js'. There are many options available but here I will use node http-server.
http-server
  1. Visit localhost address. http-server runs it by default on http://127.0.0.1:8080.

Chapter content

# Step details
1 Initial setup
  1. Load sankey.js and its dependancies.
  2. Define custom entities by extending sankey.EntityBase
  3. Define custom shapes by extending sankey.ShapeBase (Shapes are visual representation of entities)
  4. Define options (i.e. settings)
  5. Load SVG images (only if they are needed for shapes)
  6. 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).

⬅️ 1. Home 2.1. Loading scripts ➡️