Dynamic Illustration of Marks as Links - Containment from Chapter 5 of Visualization Analysis and Design by Tamara Munzner.
Built with blockbuilder.org
license: mit |
Dynamic Illustration of Marks as Links - Containment from Chapter 5 of Visualization Analysis and Design by Tamara Munzner.
Built with blockbuilder.org
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.com/libraries/svg.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see in this editor! | |
var svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500) | |
var squaresLayer = svg.append("g"); | |
var circlesLayer = svg.append("g"); | |
var jsonCircles = [ | |
{ "x": 100, "y": 100, "radius": 20}, | |
{ "x": 200, "y": 100, "radius": 20}, | |
{ "x": 300, "y": 100, "radius": 20}, | |
{ "x": 400, "y": 100, "radius": 20}, | |
{ "x": 100, "y": 200, "radius": 20}, | |
{ "x": 200, "y": 200, "radius": 20}, | |
{ "x": 300, "y": 200, "radius": 20}, | |
{ "x": 400, "y": 200, "radius": 20}, | |
]; | |
var jsonSquares = [ | |
{ "x": 50, "y": 50, "side": 100}, | |
{ "x": 150, "y": 50, "side": 100}, | |
{ "x": 50, "y": 150, "side": 100} | |
]; | |
var jsonSquares2 = [ | |
{ "x": 50, "y": 50, "side": 100}, | |
{ "x": 150, "y": 50, "side": 100}, | |
{ "x": 50, "y": 150, "side": 100}, | |
{ "x": 250, "y": 50, "side": 100} | |
]; | |
var jsonSquares3 = [ | |
{ "x": 50, "y": 50, "side": 100}, | |
{ "x": 150, "y": 50, "side": 100}, | |
{ "x": 50, "y": 150, "side": 100}, | |
{ "x": 250, "y": 50, "side": 100}, | |
{ "x": 350, "y": 50, "side": 100}, | |
]; | |
function render(jsonSquares, jsonCircles) { | |
var squares = squaresLayer | |
.selectAll("rect") | |
.data(jsonSquares); | |
squares.exit().remove(); | |
squares.enter().append("rect") | |
.merge(squares) | |
.attr("x", d => d.x) | |
.attr("y", d => d.y) | |
.attr("width", d => d.side) | |
.attr("height", d => d.side) | |
.style("fill", "rgba(232, 232, 232, 0.8)"); | |
var circles = circlesLayer | |
.selectAll("circle") | |
.data(jsonCircles); | |
circles.exit().remove(); | |
circles.enter().append("circle") | |
.merge(circles) | |
.attr("cx", d => d.x) | |
.attr("cy", d => d.y) | |
.attr("r", d => d.radius) | |
.style("fill", "rgb(244, 95, 66)"); | |
} | |
render(jsonSquares, jsonCircles); | |
setInterval(function(){render(jsonSquares, jsonCircles);}, 1234); | |
setInterval(function(){render(jsonSquares2, jsonCircles);}, 1345); | |
setInterval(function(){render(jsonSquares3, jsonCircles);}, 1456); | |
</script> | |
</body> |