I am currently working on creating an interactive visualization using circles that expand over a specified period, all centered at the same point.
I have a script that generates these circles and saves the data in a JSON file. The smallest circle is positioned at the top of the image linked above.
Take a look at the code snippet below. Essentially, the script appends circle data to an SVG element with visibility initially set to hidden. Subsequently, the circles are revealed one by one.
While attempting to append the circles, I experimented with the .lower() function to reverse their order as per the JSON file. If appended in the original order, each subsequent circle would overlay the previous ones. However, this resulted in the animation plotting in reverse where the larger circle appeared first.
Further, I tried including a similar '.lower()' function in the transition method within the reveal function to display each circle behind the previously revealed one, but this caused the code to malfunction. Any guidance here would be greatly appreciated.
html,
body,
#svg {
background-color: #FFFFFF;
}<html>
<head>
<meta charset="utf-8" />
<title>Visualizer</title>
</head>
<body>
<div>
<button onclick="plotStatically(0, 0, 'testingcircle.json')">Draw Static ►</button>
<button onclick="plotConsecutively(0, 0, 'testingcircle.json')">Draw Dynamic ►</button>
</div>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script>
function plotConsecutively(x, y, nameFile) {
d3.json(nameFile).then(function(data) {
var svgHeight = window.innerHeight - 100;
var svgWidth = window.innerWidth - 10;
var svg = d3.select('body').append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);
svg.selectAll("circle")
.data(data)
.enter()
.append('circle')
.attr('r', function(d) {
return d.r;
})
.attr('cx', function(d) {
return d.cx + x;
})
.attr('cy', function(d) {
return d.cy + y;
})
.attr('fill', function(d) {
return d.fill;
})
.attr('visibility', 'hidden')
svg.selectAll("circle")
.transition()
.delay(function(d, i) {
return 3.4 * i;
})
.duration(10)
.attr('visibility', 'visible');
})
}
function plotStatically(x, y, nameFile) {
d3.json(nameFile).then(function(data) {
var svgHeight = window.innerHeight - 100;
var svgWidth = window.innerWidth - 10;
var svg = d3.select('body').append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);
svg.selectAll("circle")
.data(data)
.enter()
.append('circle')
.attr('r', function(d) {
return d.r;
})
.attr('cx', function(d) {
return d.cx;
})
.attr('cy', function(d) {
return d.cy;
})
.attr('fill', function(d) {
return d.fill;
});
})
}
</script>
</body>
</html>