About
The goal of this project is to re-implementation of the paper ColorMapND: A Data-Driven Approach and Tool for Mapping Multivariate Data to Color using Python (Flask) and D3.js.
The interactive visualization includes the following three main components described in the paper.
Color Legend Panel
Pseudo-Colored Plot
Channel View
Interactive Features
Color Legend Panel
The circular interactive multivariate color mapping display (ICD).
The attributes are arranged on the ICD's boundary in terms of their similarity.
The color of multivariate data sample is then obtained via generalized barycentric coordinate interpolation.
The ring spacing check box allows users to choose the attribute layout scheme along the ring.
- Uniformly spaced
- Correlation-optimized
The bar charts visualize the true values for each attribute of a selected point from the ICD.
Pseudo-Colored Plot
Shows the colorized image and what locations pixels correlated and what the dominant factors are.
Also easy to spot which countries have similar profiles, which could be difficult to do with individual maps.
Channel View
Small multiple view of all attribute / channel images, each colorized by the color selected by their respective node points in the ICD's outer ring.
Allows users to focus on one attribute at a time.
Interactive Features
Small multiple view of all attribute / channel images, each colorized by the color selected by their respective node points in the ICD's outer ring.
Allows users to focus on one attribute at a time.
- Zoom in/out
Users can zoom in/out the map with mouse scroll or double click LMB.
- Mouse hovering
Outline the selected data point or country. The Channel View displays the values when the user hovers over a country.
- Data Linking
Clicking a data point (the white dot on the Color Legend Panel) highlights the corresponding country and displays the values for each attribute for that country. Users can also click a country on the map to highlight the corresponding data point and display the bar chart.
