Tutorial: The first visualization with Kontrast
In this document we want to show you step-by-step how you can create your own interactive visualization with Kontrast.
We use the following HTML file as a template:
Please write (or copy-and-paste) the above content as a
.html file. The filename is arbitrary. We recommend that
you place the file inside the folder
user within the
Kontrast distribution to facilitate later updates of Kontrast.
Some things to note about the above file are:
You need to include some
.cssfiles using the
linktags inside the
Of course, you also must include your code somehow. You can also
choose to add your code inside the HTML file directly, but in this
tutorial we assume that you write your code in a separate
.jsfile that will be included from the HTML file.
The first figure
As a first step, let’s draw a figure with a single graph that
simply shows a coordinate system consisting of two axes. Write the
following code and save as a
.js file. Of course the name
of this file must be the same as the filename which you specified in
.html file. If you just copy-and-pasted the HTML code
tutorial.js and has to be placed in the same folder.
The specified range (
max) of each
axis is used as the initial range. You (and viewers of your page) can
change the range using the mouse or touch gestures.
You can use arbitrary (but unique) strings as axis names (
'y' in this example). We refer to these names later.
Now open your
.html file in your browser. You can enter
the path of your
.html file as
file:///SOME/DIRECTORY/tutorial.html (on Unix-like
systems such as Linux and MacOS) or
(Windows) in the address bar of your browser.
Do you see a graph like the one below?
If you don’t see this, have a look at the console log to check for possible reason(s) of the problem. See Notes on web development for more details on how to open the console.
The most likely mistake is specifying the wrong path(s) for the
external resources. In this case, you’ll see a message like
ReferenceError: kontrast is not defined
Resource not found
in the console log.
You may want to create a label for each axis. To do this, modify your
.js file as follows:
If you wish to adjust the position of the axis label, you can use
addition, you may want to modify the labels to allow for
mathematical notation. To realize these, modify the
label as follows (i.e. change the
Kontrast is distributed with a helper utility for typesetting math
formulas with the library
KaTeX. As you see, you can
specify the label text using LaTeX syntax. Unfortunately, each
backslash must be escaped with another backslash, i. e. you need to
\\ for a single backslash. The label text in the
above example corresponds to
in the normal LaTeX notation. (The sequence
\, results in
a small horizontal space.)
Now you can write mathematical notation like
\int\mathrm dx x^2 (
\int\mathrm dx x^2) etc.
Draw a graph
A single line
It’s time to draw a graph!
A line (more precisely, a line segment) can be drawn as follows:
This code creates a line from (0, 0.1) to (1, 0.9).
To specify the coordinates of the line, we used the axis names in
data:. If you use, e. g.,
time as the
internal name for the abscissa, you need to change the corresponding
You just need to repeat
to draw two or more lines.
As you see, you can specify a color of the line using
. If you want to specify it as RGB color, use an array like this:
or use an HTML color expression such as
color: [1, 0.5, 0], // R, G, B. (0-1)
In Kontrast you can draw a curve from contiguous data using a line plot (consisting of a set of line segments).
A good starting point to explore all mathematical functions available
MDN page on the
PointsTo draw the point(s), use
We show you here how to write an interactive graph using a slider.
For this, you need to change your HTML file as follows:
inside Kontrast. In the HTML file, you can simply place an empty
<div> (with a unique ID).
Unfortunately, there is a lot happening at once in the above example. If you want to write the function separately, you can also write as follows:
If the slider is changed, the function
changeY()should be called.
Inside the function
changeY()we can describe what should be done, when the event (change of slider) occurs. In this case, the value is updated explicitly and the
update()function is called.
In general, a function for such purpose is called an
event handler. To tell the system which handler will be
invoked for which event, you need to connect the event and event
handler. This is done by
That’s the end of the tutorial! We hope this document helps you to write your own interactive visualizations using Kontrast. Please refer to the documentation for more information.
We appreciate your feedback, in case you have any comments about this page and/or Kontrast itself.