# DAVIDSTUTZ

## Interactively Comparing Superpixel Algorithms using d3.js and NVD3

This article presents visualizations of the qualitative and quantitative results from the superpixel benchmark published in CVIU. Based on NVD3 and Unite Gallery, the visualizations allow to interactively compare different superpixel algorithms in the browser.

After getting our superpixel benchmark published in CVIU [1], I also wanted to make the results more accessible. To this end, I intended to provide interactive plots of the newly introduced metrics — namely Average Miss Rate (AMR), Average Undersegmentation Error (AUE) and Average Unexplained Variation (AUV) — as well as a gallery of qualitative results. For interactive plots, I decided to use NVD3 (as I did for the results from my bachelor thesis, too). To make the qualitative results available, I chose Unite Gallery.

Both the interactive plots and the gallery can be found online; the source code is available on GitHub:

### Interactive Multi-Bar Plots with NVD3

Based on the multi-bar chart example provided with the latest version of NVD3, the necessary JavaScript for the interactive plots is simple and shown below. The result in illustrated in Figure 1.

```var width = \$('.container').attr('width');
var height = 300;
var data = [/* ... */]

// Set the appropriate height.
// #bsds500-plot is an empty svg element.
\$('#bsds500-plot').attr('height', height + 'px')

generate: function() {
var chart = nv.models.multiBarChart()
.width(width)
.height(height)
.stacked(false)
.showControls(false)
.reduceXTicks(false)
.color(['#337ab7', '#ce4844', '#3c763d']);
var svg = d3.select('#bsds500-plot').datum(data);
svg.transition().duration(0).call(chart);
return chart;
},
callback: function(graph) {
nv.utils.windowResize(function() {
graph.width(width).height(height);
d3.select('#bsds500-plot svg')
.attr('width', width)
.attr('height', height)
.transition().duration(0)
.call(graph);
});
// http://stackoverflow.com/questions/13136964/how-can-i-position-rotated-x-axis-labels-on-column-chart-using-nvd3
var xTicks = d3.select('#bsds500-plot .nv-x.nv-axis > g').selectAll('g');
xTicks
.selectAll('text')
.attr('transform', function(d, i, j) {
return 'translate (-10, 25) rotate(-90 0,0)';
});
}
});
```

The required data format can be found in `bar_chart.html` in the GitHub repository. Here, I extended the original example only by rotating the labels as discussed here.

### Tiles using Unite Gallery

The qualitative results are displayed as tiles using the basic column tiles example. The underlying HTML looks as follows:

```<div id="summary-tiles">
<!-- ... -->
</div>
```

The corresponding JavaScript is a simple call to the Unite Gallery:

```\$('#summary-tiles').unitegallery({
tile_enable_textpanel :true,
tile_textpanel_title_text_align: 'center',
tile_textpanel_always_on: true,
tiles_col_width: '21',
});
```

The result is illustrated in Figure 2.

• [1] David Stutz, Alexander Hermans, Bastian Leibe. Superpixels: An Evaluation of the State-of-the-Art. CoRR abs/1612.01601 (2016).