Demonstration of d3-rect, a plugin which simplifies drawing rectangles using path strings instead of rect elements so their shapes can be interpolated.
<html>
<head>
<title>d3-rect example</title>
</head>
<body>
<div class="target"></div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="./d3-rect.min.js"></script>
<script type="text/javascript" src="./halo.js"></script>
</body>
</html>
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.d3=e.d3||{})}(this,function(e){"use strict";var t;t=function(e){var t,i,o,r,n,d,h,f,u;return(t=e.height>0&&e.width>0)?(i=e.x||0,o=e.y||0,r="M "+i+","+o,n="l "+e.width+",0",d="l 0,"+e.height,h="l "+e.width*-1+",0",f="z",u=[r,n,d,h,f].join(" ")):void console.error("rectangle path generator requires both height and width properties")};var i=t;e.rect=i,Object.defineProperty(e,"__esModule",{value:!0})});(function(d3) {
'use strict'
var svg,
wrapper,
height,
width,
increment,
max,
length,
count,
color,
figure,
update,
toggle
// configuration values
width = 960
height = 500
increment = 10
max = increment * 5
length = 1000
count = 100
// set up dom
svg = d3.select('body')
.append('svg')
.attr('height', height)
.attr('width', width)
.style('background-color', '#EEEEEE')
wrapper = svg.append('g')
.classed('wrapper', true)
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
// alternate color based on index
color = function(d, i) {
return i % 2 ? 'green' : 'blue'
}
// render shapes
figure = wrapper
.selectAll('path.figure')
.data(new Array(count))
.enter()
.append('path')
.classed('figure', true)
.style('stroke-width', 3)
.style('stroke', color)
.style('fill', color)
// update shapes
update = function(selection) {
var symbol
// choose symbol shape
symbol = Math.random() > 0.5 ? d3.symbolTriangle : d3.symbolStar
// alternate on each update
toggle = ! toggle
figure
.transition('shape')
.duration(length)
.delay(function(d, i) {
var modifier
modifier = i % 2 ? length * 0.5 : 0
return length / count * i * 0.5 + modifier
})
// change path
.attr('d', function(d, i) {
var path,
height,
width
if (toggle) {
// symbols
path = d3.symbol()
.type(symbol)
// randomize size
.size(Math.random() * max * 50)
.call(this)
} else {
// rectangles
height = Math.random() * max
width = Math.random() * max
path = d3.rect({
// randomize dimensions
height: height,
width: width
})
}
return path
})
// random radial position
.attr('transform', function(d, i) {
var radius,
angle,
x,
y,
transform
// offset by index
radius = height * 0.8 / 2 - (i % 2 * increment * 8)
angle = Math.PI * 2 * Math.random()
x = radius * Math.cos(angle)
y = radius * Math.sin(angle)
transform = 'translate(' + x + ',' + y + ')'
return transform
})
// transparency
.style('fill-opacity', function(d, i) {
var alt
alt = toggle ? 0 : 1
return i % 2 === alt ? 0.9 : 0.2
})
}
// cycle
setInterval(function() {
update()
}, length * 2)
}).call(this, d3)