payne8/Lines-Animation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create animation

Browse Source
This commit is contained in:
Mason Payne
2023-05-29 23:09:48 -06:00
commit 95348704e3
5 changed files with 132 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

9
.idea/Lines Animation.iml generated Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="Go" enabled="true" />
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Lines Animation.iml" filepath="$PROJECT_DIR$/.idea/Lines Animation.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

101
index.html Normal file
View File

@ -0,0 +1,101 @@
<!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>