Built with blockbuilder.org
forked from biovisualize's block: Radviz
Built with blockbuilder.org
forked from biovisualize's block: Radviz
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://rawgit.com/biovisualize/radviz/master/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> |
.panel { | |
stroke: black; | |
fill: white; | |
} | |
.bg { | |
fill: white; | |
} | |
.link { | |
stroke: silver; | |
stroke-opacity: 0.05 | |
} | |
.dot { | |
fill-opacity: 0.5; | |
} | |
.label-node { | |
fill: silver; | |
} | |
.active { | |
stroke: black; | |
} | |
.label { | |
fill: gray; | |
pointer-events: none; | |
} | |
#tooltip { | |
font-size: 12px; | |
margin-top: 22px; | |
background-color: rgba(255, 255, 255, 0.8); | |
border-radius: 4px; | |
} | |
#tooltip h1 { | |
font-size: 14px; | |
margin: 0; | |
} |