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 degradate the visualization of the radviz. In addition, functions are provided to customize dimension arrangement, interaction and design of the visualization. An example of the application can be seen in the Demo or in the Experimental Environment

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. 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.

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}}