Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
let body = d3.select('body');
let svg = body.append('svg')
.attr('width', 800)
.attr('height', 800);
let filter = svg.append('filter')
.attr('id', 'brightness')
.append('feComponentTransfer');
let filterR = filter.append('feFuncR')
.attr('type', 'linear')
.attr('slope', 1.5);
let filterG = filter.append('feFuncG')
.attr('type', 'linear')
.attr('slope', 1.5)
let filterB = filter.append('feFuncB')
.attr('type', 'linear')
.attr('slope', 1.5)
let data = [1, 1, 2, 3, 5, 8, 13, 21];
let makePie = d3.pie();
let pie = makePie(data);
let arc = d3.arc()
.innerRadius(0)
.outerRadius(200)
.startAngle(d => d.startAngle)
.endAngle(d => d.endAngle);
let group = svg.append('g')
.attr('transform', 'translate(250 250)')
let arcs = group.selectAll('path')
.data(pie)
.enter().append('path')
.attr('d', arc)
.attr('fill', () => randomHSL())
.attr('stroke', 'white')
.attr('stroke-width', 2)
.on('mouseenter', function() {
d3.select(this)
.interrupt()
.transition()
.duration(300)
.ease(d3.easeCubic)
.attr('transform', 'scale(1.1)')
.style('filter', 'url(#brightness)')
})
.on('mouseleave', function() {
d3.select(this)
.interrupt()
.transition()
.duration(300)
.ease(d3.easeCubic)
.attr('transform', 'scale(1)')
.style('filter', 'none')
});
function randomRGB() {
let r = Math.floor(Math.random() * 256),
g = Math.floor(Math.random() * 256),
b = Math.floor(Math.random() * 256);
return `rgba(${r}, ${g}, ${b}, 1)`;
}
function randomHSL() {
let h = Math.floor(Math.random() * (240 - 180 + 1)) + 180,
s = Math.floor(Math.random() * (50 - 25 + 1)) + 25,
l = Math.floor(Math.random() * (67 - 34 + 1)) + 34;
return `hsla(${h}, ${s}%, ${l}%, 1)`;
}
</script>
</body>
https://d3js.org/d3.v4.min.js