#graph-container {
position: relative;
}
#graph {
width: 600px;
height: 300px;
border: 1px solid #000;
margin-bottom: 20px;
}
#moving-circle {
position: absolute;
width: 20px;
height: 20px;
background-color: #00f;
border-radius: 50%;
}

Python Straight Line Graph with Moving Circle

// Coordinates for the straight line graph
const graphCoordinates = [
[0, 0],
[100, 200],
[200, 100],
[300, 300],
[400, 150],
[500, 250],
[600, 200]
];

// Function to plot the graph
function plotGraph() {
const graphDiv = document.getElementById(‘graph’);
const graphContext = graphDiv.getContext(‘2d’);

graphContext.beginPath();
graphContext.moveTo(0, 0);

for (let i = 1; i < graphCoordinates.length; i++) {
graphContext.lineTo(graphCoordinates[i][0], graphCoordinates[i][1]);
}

graphContext.lineWidth = 2;
graphContext.strokeStyle = '#000';
graphContext.stroke();
}

// Call the plotGraph function to plot the graph
plotGraph();

// Function to animate the movement of the circle along the graph
function moveCircle() {
const circle = document.getElementById('moving-circle');
let index = 0;

function animate() {
if (index < graphCoordinates.length – 1) {
index++;
} else {
index = 0;
}

const x = graphCoordinates[index][0];
const y = graphCoordinates[index][1];

circle.style.left = x + 'px';
circle.style.top = y + 'px';

requestAnimationFrame(animate);
}

animate();
}

// Call the moveCircle function to start the animation
moveCircle();

In this article, we will create a simple straight line graph using Python and animate a moving circle along the graph using HTML and JavaScript.

We will use the HTML5 canvas element to draw the straight line graph and position the moving circle. We will also use JavaScript to animate the movement of the circle along the graph.

First, let’s create the HTML structure for our graph and moving circle. We will use the canvas element to draw the graph and position the moving circle using absolute positioning.

“`

#graph-container {
position: relative;
}
#graph {
width: 600px;
height: 300px;
border: 1px solid #000;
margin-bottom: 20px;
}
#moving-circle {
position: absolute;
width: 20px;
height: 20px;
background-color: #00f;
border-radius: 50%;
}

Python Straight Line Graph with Moving Circle

// JavaScript code to plot the graph and animate the circle will go here

“`

Next, let’s write the JavaScript code to plot the straight line graph using the coordinates defined in the `graphCoordinates` array and animate the movement of the circle along the graph.

“`

// Coordinates for the straight line graph
const graphCoordinates = [
[0, 0],
[100, 200],
[200, 100],
[300, 300],
[400, 150],
[500, 250],
[600, 200]
];

// Function to plot the graph
function plotGraph() {
const graphCanvas = document.getElementById(‘graph’);
const graphContext = graphCanvas.getContext(‘2d’);

graphContext.beginPath();
graphContext.moveTo(0, 0);

for (let i = 1; i < graphCoordinates.length; i++) {
graphContext.lineTo(graphCoordinates[i][0], graphCoordinates[i][1]);
}

graphContext.lineWidth = 2;
graphContext.strokeStyle = '#000';
graphContext.stroke();
}

// Call the plotGraph function to plot the graph
plotGraph();

// Function to animate the movement of the circle along the graph
function moveCircle() {
const circle = document.getElementById('moving-circle');
let index = 0;

function animate() {
if (index < graphCoordinates.length – 1) {
index++;
} else {
index = 0;
}

const x = graphCoordinates[index][0];
const y = graphCoordinates[index][1];

circle.style.left = x + 'px';
circle.style.top = y + 'px';

requestAnimationFrame(animate);
}

animate();
}

// Call the moveCircle function to start the animation
moveCircle();

“`

The `plotGraph` function uses the coordinates from the `graphCoordinates` array to draw the straight line graph on the canvas element.

The `moveCircle` function uses the `requestAnimationFrame` method to animate the movement of the circle along the graph by updating its position based on the coordinates from the `graphCoordinates` array.

Now, when you open the HTML file in a web browser, you should see a straight line graph with a moving circle animated along the graph.

This simple example demonstrates how to create a straight line graph using Python, and animate the movement of a circle along the graph using HTML and JavaScript. You can modify the coordinates and styles to create different types of graphs and animations.