SVG Visualization
The following visualizations show how you can create a visualization using custom SVG elements and d3.js.
Create an index.html with the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Example</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style media="screen">
body, html {
height: 100%;
background: #eee;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
circle {
stroke: red;
stroke-width: 2;
fill: white;
}
circle:hover {
fill: red;
}
</style>
</head>
<body>
<svg id="canvas">
</svg>
<script type="text/javascript">
// set initial data
var data = [
{r: 10}, {r: 45}, {r: 35}, {r: 78},
{r: 98}, {r: 45}, {r: 12}, {r: 45}
];
// define gap size
var gap = 20;
// prepare svg
var svg = d3.select('#canvas')
.attr('width', 1500) // set absolute size!
.attr('height', 500);
// create a selection of circles
svg.selectAll('circle')
// join with data
.data(data)
// compute set of new rows
.enter()
// append a new circle element
.append('circle')
// define click function
.on('click', function(d){
// multiply value 'r' by 1.1
d.r *= 1.1;
// update visualization
update();
});
// the function that recomputes the whole simulation
function update() {
var pos = 0;
// get all circles
svg.selectAll('circle')
// set radius to stored 'r' value
.attr('r', function(d){ return d.r; })
// fix y position to 250
.attr('cy', 250)
// calculate x position
.attr('cx', function(d, i){
// set position of first circle
if(i == 0) {
pos = gap + d.r
return pos;
}
// set position of other circles
else {
pos += data[i - 1].r + gap + d.r
return pos;
}
});
}
// perform an initial update
update();
</script>
</body>
</html>