Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
img
 
 
lib
 
 
src
 
 
 
 
 
 
 
 

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);

About

Radviz in D3.js

Resources

Releases

No releases published
You can’t perform that action at this time.