Old school D3 from simpler times

All examples By author By category About

biovisualize

Full window Github gist

Radviz

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/biovisualize/radviz/radviz-min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container"></div>
  <div id="tooltip"></div>
  <script>
    var dimensions = ['sepalLength', 'sepalWidth', 'petalLength', 'petalWidth'];
    var radviz = radvizComponent()
        .config({
            el: document.querySelector('.container'),
            colorAccessor: function(d){ return d['species']; },
            dimensions: dimensions,
            size: 500,
            margin: 100,
            useRepulsion: true,
            drawLinks: true,
            tooltipFormatter: function(d){
                return '<h1>' + d.species 
                  + '</h1>' +dimensions.map(function(dB){
                  return dB + ': ' + d[dB]; }).join('<br />');
            }
        });

d3.json('https://rawgit.com/biovisualize/radviz/master/data/iris.json', function(error, data){
        console.log(data);
        radviz.render(data);
    });
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/biovisualize/radviz/radviz-min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
​
<body>
  <div class="container"></div>
  <div id="tooltip"></div>
  <script>
    var dimensions = ['sepalLength', 'sepalWidth', 'petalLength', 'petalWidth'];
    var radviz = radvizComponent()
        .config({
            el: document.querySelector('.container'),
            colorAccessor: function(d){ return d['species']; },
            dimensions: dimensions,
            size: 500,
            margin: 100,
            useRepulsion: true,
            drawLinks: true,
            tooltipFormatter: function(d){
                return '<h1>' + d.species 
                  + '</h1>' +dimensions.map(function(dB){
                  return dB + ': ' + d[dB]; }).join('<br />');
            }
        });
​
    d3.json('https://rawgit.com/biovisualize/radviz/master/data/iris.json', function(error, data){
        console.log(data);
        radviz.render(data);
    });
  </script>
</body>
​
    

Updated missing url https://rawgit.com/biovisualize/radviz/master/radviz-min.js to https://cdn.jsdelivr.net/gh/biovisualize/radviz/radviz-min.js

https://d3js.org/d3.v3.min.js

https://rawgit.com/biovisualize/radviz/master/radviz-min.js