d3-radviz

The d3-radviz is a d3.js plugin that implements RadViz plots. The dimension arrangement (DA) follows the heuristic described in the paper which minimizes the effectiveness error that degradates the visualization of the radviz. In addition, functions are provided to customize dimension arrangement, interaction and design of the visualization.

• The Observable Notebook shows a simple application of the plugin.

• The Experimental Environment, whose source code is in /docs/prototype, shows the plugin application in a Visual Analytics system.

• The Plugin Demo, source code in /dev, shows a basic usage of the d3-radviz plugin.

Source: CSM Dataset.

Citation Policy

If you use this work in your research, please cite:

M. Angelini, G. Blasilli, S. Lenti, A. Palleschi and G. Santucci, "Effectiveness Error: Measuring and Improving RadViz Visual Effectiveness," in IEEE Transactions on Visualization and Computer Graphics, DOI: 10.1109/TVCG.2021.3104879.

BibTex:

  @ARTICLE{9514468,
  author={Angelini, Marco and Blasilli, Graziano and Lenti, Simone and Palleschi, Alessia and Santucci, Giuseppe},
  journal={IEEE Transactions on Visualization and Computer Graphics}, 
  title={Effectiveness Error: Measuring and Improving RadViz Visual Effectiveness}, 
  year={2021},
  volume={},
  number={},
  pages={1-1},
  doi={10.1109/TVCG.2021.3104879}}

Installing

If you use NPM, npm install d3-radviz, here the d3-radviz NPM page. Otherwise, download the latest release.

<script src="d3-radviz.js"></script>
<script>

var radviz = d3.radviz();

</script>

Content

The plug-in implemented creates Radviz visualization.

• src/arrangement.js – There are the functions that perform the DA
• src/data.js – There are the functions that perform the operation on the data (es. loading of the dataset)
• src/index.js – Addition of the function implemented
• src/radviz.js – All the implementation of the RadViz
• src/utils.js – Contains the addition utils (eg. responsive svg)
• dev/index.html– The example to use the plugin
• dev/data – Contains some samples datasey

API Reference

# d3.radviz() <>

Constructs a new radviz generator with the default settings.

# radviz.data(dataset,classification_attribute) <>

Uploads the dataset in the radviz adding the classification_attributes for the clusters. The classification_attribute is an optional input. By default the numeric values are saved as dimensions, contrary the not numeric values are saved as attributes.

# radviz.data() <>

Returns the datates of the radviz. The data structure contains the following objects:

• radviz.data().angles - the angles of the radviz visualization
• radviz.data().attributes - the attributes of the dataset, so the not numeric values or the classification_attribute before passed.
• radviz.data().dimensions - the dimensions of the dataset, so the numeric values normalized with the min-max normalization.
• radviz.data().entries - all the entries of the dataset.
• radviz.data().original - all dataset with the original values.

# radviz.updateRadviz (dimension arrangement) <>

Sets the anchor points of the radviz as the dimension arrangement array passed. If dimension arrangement is null, the Original Dimension Arrangement is applied.

• dimension arrangement - is an array containing the index of the dimension (e.g., [4,2,1,3,0])

# radviz.getIndex() <>

Return the unique index of the radviz used for the multiple instantiation in the same page of the radviz.

# radviz.setColorClassification(name attribute) <>

Assign name attribute to the color scale classification.

# radviz.setMargin(size) <>

Set the margin equal to size.

# radviz.setLevel(number) <>

Set the levels of the grid to number.

# radviz.setRadiusPoints(size) <>

Set the radius of the points to size.

# radviz.increaseRadius() <>

Increase the radius of the points of 0.25 .

# radviz.decreaseRadius() <>

Decrease the radius of the points of 0.25 .

# radviz.increaseLevelGrid() <>

Add one level to the grid.

# radviz.decreaseLevelGrid() <>

Remove one level to the grid.

# radviz.setQuality() <>

Change the color of the points, by default each point encodes the value of Effectiveness Error, but it is possible to encodes the classification attribute of the dataset.

setDefaultColorPoints # radviz.setDefaultColorPoints(HTMLcolor) <>

Set HTMLcolor as the default color, by default the color is '#67a9cf'

# radviz.showDefaultColor(bool) <>

Change the color of the points to the default color.

# radviz.setColorblindSafe(bool) <>

Change the color of the points to the d3.interpolatePiYG scale <> that is color blind safe.

# radviz.getColorblindSafe() <>

Return the value of the bool related to the colorBlind variable, previously setted and by defualt false.

# radviz.setColorPoint(flag) <>

Change the color of points following these flag rules:

• = 0 encodes ErrorEffectiveness Metric
• = 1 encodes the default color
• = 2 encodes another color

# radviz.disableDraggableAnchors(bool) <>

Disable the Draggable action on the Anchors if the bool is True. By default the drag action is activeted.

# radviz.remove() <>

Delete the radviz.

---

From now on there are all the functions that can enrich the RadViz with custom functions related to the principal interaction that the user can perform on the RadViz chart like:

• DragEnd of anchors
• Click of points inside RadViz
• MouseOver of points inside RadViz
• MouseOut of points inside RadViz
• ContextMenu of points inside RadViz
• UpdateResults after the application of a Dimension Arrangement to RadViz

# radviz.setFunctionDragEnd(customized_function ) <>

Set the customized_function to the drag-and-drop event of the anchor points.

# radviz.setFunctionClick(customized_function ) <>

Set the customized_function to the click event of the points.

# radviz.setFunctionMouseOver(customized_function ) <>

Set the customized_function to the mouse-over event of the points.

# radviz.setFunctionMouseOut(customized_function ) <>

Set the customized_function to the mouse-out event of the points.

# radviz.setFunctionContextMenu(customized_function ) <>

Set the customized_function to the contect menu event of the points.

# radviz.setFunctionUpdateResults(customized_function ) <>

Set the customized_function to update the result of the Effectiveness Error for the current Dimension Arrangement.

Credits

If you use this work in your research, please cite:

M. Angelini, G. Blasilli, S. Lenti, A. Palleschi and G. Santucci, "Effectiveness Error: Measuring and Improving RadViz Visual Effectiveness," in IEEE Transactions on Visualization and Computer Graphics, DOI: 10.1109/TVCG.2021.3104879.

BibTex:

@ARTICLE{9514468,
  author={Angelini, Marco and Blasilli, Graziano and Lenti, Simone and Palleschi, Alessia and Santucci, Giuseppe},
  journal={IEEE Transactions on Visualization and Computer Graphics}, 
  title={Effectiveness Error: Measuring and Improving RadViz Visual Effectiveness}, 
  year={2021},
  volume={},
  number={},
  pages={1-1},
  doi={10.1109/TVCG.2021.3104879}}