Home

Task-Driven Coloring Visualization Tool - Instructions

This tool is an implementation of the paper of Tominski et al.. It shows an application for task-driven color coding. Represented are the results of the Austrian presidential election in 2017, where candidate Alexander van der Bellen won against Norbert Hofer with 50.0% of total votes. The 4 maps show the percentages of people in the respective district who voted for van der Bellen in Austria, Vienna, Carinthia and Lower Austra. The task-color-cube proposed by Tominski et al. maps values to colors according to the task the user is trying to achieve with the visualization.

Prerequisites

Start the webserver with python 2.7 or 3.7: python src/server.py The tool is working with all current browsers (Chrome 67) in consumer resolutions. It is responsive, however you should reload the page if you resize the browser window.

Controls

Start the visualization tool here.

  • Segmentation - does the user want to visualize single values or ranges within the data?

    • Continuous: The data is mapped continuously.
    • Segmented: Ranges of values are mapped to the same color. Used to group values. The number of ranges can be changed with the slider below if this option is chosen.

  • Type of task - does the user want to identify values at predetermined locations or localize predetermined values?

    • Identification: Data is displayed in such a way that for a certain spatial region, the value can be derived.
    • Localization: The inverse of identification: finds spatial regions that match a value. The value to highlight and the sharpness can be changed with the slider below if this option is chosen.

  • Color Scheme - Is the user trying to compare values to each other or just performing lookups of single values?

    • Lookup - the user wants to retrieve single values accurately

      • Linear - Values are mapped to colors linearly in the HSV space.
      • Histogram Normalization - Values are mapped in such a way that the distribution of colors is uniform. This is achieved by calculation the histogram of values and interpreting it as a probabiity density function (PDF). The cumulative distribution function of this PDF is used to map values to normalized values. Thes normalized values are then lineary mapped to colors in HSV space.
      • Box-Plot Normalization - The values are mapped according to a box-whisker-plot. The whiskers are mapped to the darkest, respective brightest color, values in between stretched according to quartiles.
* Compare - the user wants to compare values relative to each other. The solution of overlapping ranges by Tominski allows ranges that differentiate even by orders of magnitude.

Documentation

You can find a detailed documentation of the used functions on the documentation page in the right column.

Sourcecode

Here you can find the most important sources of the colorMapper.js and the mapDrawer.js.