Radviz in D3.js
JavaScript HTML CSS Makefile
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
data
example
img
lib
src
README.md
makefile
radviz-min.js
radviz.js compile Mar 4, 2016

README.md

What is Radviz?

Radviz Screenshot

Here's a definition, taken from this excellent article:

Radviz, described in this article, attaches to each data point fixed springs each of which is also attached at points around a circle. The springs represent dimensions of the data. The data points are displayed at the position where the sum of the spring forces is zero. The spring force K for each spring is the value of the data point for that dimension.

Examples

Let's try a few examples, from the /example folder:

You can also try it live on Blockbuilder

Minimal Documentation

Simply add the compiled version to your HTML:

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

And use it like this:

var data = [
    {"sepalLength": 5.1, "sepalWidth": 3.5, "petalLength": 1.4, "petalWidth": 0.2, "species": "setosa"},
    {"sepalLength": 4.9, "sepalWidth": 3.0, "petalLength": 1.4, "petalWidth": 0.2, "species": "setosa"},
    {"sepalLength": 4.7, "sepalWidth": 3.2, "petalLength": 1.3, "petalWidth": 0.2, "species": "setosa"},
    {"sepalLength": 4.6, "sepalWidth": 3.1, "petalLength": 1.5, "petalWidth": 0.2, "species": "setosa"}
];

var radviz = radvizComponent()
    .config({
        el: document.querySelector('.container'), // container node or selector
        size: 400, // size of the whole SVG
        margin: 50, // margin around the circular panel, to leave some room for the labels
        dimensions: ['sepalLength', 'sepalWidth', 'petalLength', 'petalWidth'], // data keys to use as dimensions
        useTooltip: true, // a simple tooltip component is provided
        tooltipFormatter: function(d){ return d.foo; }, // the datum for the hovered node is given as argument
        colorAccessor: function(d){ return d['species']; }, // dimension to use for coloring
        colorScale: d3.scale.ordinal().range(['skyblue', 'orange', 'lime']), // color palette
        drawLinks: true, // wether to draw links or not
        zoomFactor: 1, // gets the dimension nodes on a bigger radius than the panel, to pull nodes away from the center
        dotRadius: 4, // radius of each dot
        useRepulsion: false // special repulsion effect to spread the nodes from each others so they can be better selected
    })
    .on('panelEnter', function() {
        // mouse entered the circular panel
    })
    .on('panelLeave', function() {
        // mouse left the circular panel
    })
    .on('dotEnter', function() {
        // mouse entered a dot
    })
    .on('dotLeave', function() {
        // mouse left a dot
    })
    .render(data);