101 lines
2.6 KiB
HTML
101 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lines</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js" integrity="sha512-nfUlp2ZWPKWlnAH/OsMeAqRSYBxOdPYeBXwceyw6QqqZ7uTT/s5/eS1hMKphjVBouk0jf/JQ8ULVJRnEqSHkXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
// Sample data
|
|
const data = [
|
|
{ color: 'red', value: 0.8 },
|
|
{ color: 'green', value: 0.4 },
|
|
{ color: 'blue', value: 0.2 },
|
|
{ color: 'yellow', value: 0.7 },
|
|
{ color: 'orange', value: 0.5 },
|
|
{ color: 'purple', value: 0.1 },
|
|
{ color: 'pink', value: 0.6 },
|
|
{ color: 'brown', value: 0.3 },
|
|
{ color: 'gray', value: 0.9 },
|
|
{ color: 'cyan', value: 0.2 },
|
|
{ color: 'magenta', value: 0.8 },
|
|
{ color: 'lime', value: 0.4 },
|
|
];
|
|
|
|
// Set up SVG container
|
|
const svg = d3.select('body')
|
|
.append('svg')
|
|
.attr('width', 500)
|
|
.attr('height', 200)
|
|
.style('background-color', 'black');
|
|
|
|
|
|
|
|
// Update function
|
|
function update() {
|
|
// Sort the data based on the value
|
|
// data.sort((a, b) => a.value - b.value);
|
|
|
|
// Draw initial lines
|
|
const lines = svg.selectAll('.line')
|
|
.data(data, (d) => d.color)
|
|
.enter()
|
|
.append('line')
|
|
.attr('class', 'line')
|
|
.attr('x1', 100)
|
|
.attr('x2', (d) => 100 + d.value * 300)
|
|
.attr('y1', (d, i) => i * 15 + 10)
|
|
.attr('y2', (d, i) => i * 15 + 10)
|
|
.attr('stroke', 'black')
|
|
.attr('stroke-width', 10)
|
|
.attr('stroke-linecap', 'round')
|
|
.transition()
|
|
.delay((d, i) => 500)
|
|
.duration(500)
|
|
.attr('stroke', (d) => d.color);
|
|
|
|
// Animate the lines to their new positions
|
|
svg.selectAll('.line')
|
|
.transition()
|
|
.duration(500)
|
|
.delay((d, i) => i * 50)
|
|
.attr('stroke', (d) => d.color)
|
|
.attr('opacity', (d, i) => 1 - i * i * 0.0075)
|
|
// .attr('x2', (d) => 100 + d.value * 300)
|
|
.attr('y1', (d, i) => i * 15 + 10)
|
|
.attr('y2', (d, i) => i * 15 + 10);
|
|
}
|
|
|
|
// Call the update function initially
|
|
update();
|
|
|
|
setInterval(() => {
|
|
// Update the data
|
|
// data.forEach((d) => {
|
|
// d.value = Math.random();
|
|
// });
|
|
data.unshift({ color: randomColor(), value: Math.random() });
|
|
|
|
if (data.length > 12) {
|
|
data.pop();
|
|
}
|
|
// console.log(data);
|
|
// Call the update function
|
|
update();
|
|
}, 2000);
|
|
|
|
function randomColor() {
|
|
var color = '#';
|
|
var letters = '0123456789ABCDEF';
|
|
for (var i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
</script>
|
|
</html> |