Directory structure and Kontrast updates

Directory structure

The files within the directory site/ contain the Kontrast library, examples, the documentation and other useful files for creating and publishing interactive visualizations.

Your visualizations

• site/user/

  This is an (initially) empty directory meant for your visualizations. Keeping all your files in this central location facilitates updates of the Kontrast distribution, as detailed below on this page. Please note that while we have decided on the name user/, there is no technical reason on why you could not pick a different name.

Kontrast

• site/kontrast/

  Contains kontrast.js and kontrast.css, both are necessary to use Kontrast. The bare minimum needed for a working Kontrast visualization consists only of the kontrast folder along with your HTML file containing the visualization.

Documentation and examples

• site/doc/

  Contains the complete documentation.

• site/examples/

  Contains example HTML and JS files that are meant to be copied and modified by you as a starting point for your visualizations.

Style

• site/style/

  Contains CSS files used for the documentation and in the examples. Please refer to style sheet documentation for details.

• site/fonts/

  Contains the fonts (Source Code Pro and Source Sans Pro) used in this distribution.

Third-party libraries and utilities

• site/katex/

  Contains the third-party library KaTeX (https://khan.github.io/KaTeX/) that allows to use math typesetting using the LaTeX syntax. Note that Kontrast itself works independently of KaTeX.

• site/editor/

  Contains the third-party library CodeMirror (https://codemirror.net/), which allows to include interactive text editors in HTML pages. While this feature is used in the documentation and in some of the examples, Kontrast itself works independently of CodeMirror.

• site/utilities/

  Contains two utility scripts for automatic math typesetting on your pages using KaTeX (file math.js) and a utility script for setting up the CodeMirror text editor (file editor.js).

Kontrast updates

We recommend that you store your interactive visualizations and all related files that you created or modified in the folder site/user/ (or in other subdirectories within site/ that do not have a name conflict with the items listed above).

The update then simply involves extracting the new Kontrast distribution as detailed on the download page and copying the contents of the old site/user/ directory (and other custom folders within site/) to the site/ directory of the new Kontrast distribution.