Member-only story
Create Graph
3 min readJul 27, 2024
<!DOCTYPE html>
<html>
<head>
<title>Graph Visualization</title>
<style type="text/css">
#graphCanvas {
width: 600px;
height: 400px;
border: 1px solid lightgray;
background-color: #f9f9f9;
}
.node {
fill: #3498db;
stroke: #2c3e50;
stroke-width: 2px;
}
.edge {
stroke: #7f8c8d;
stroke-width: 2px;
}
</style>
</head>
<body>
<canvas id="graphCanvas"></canvas>
<script type="text/javascript">
// Define the adjacency list
const adjacencyList = [
[1, 3],
[0, 2, 4],
[1, 5],
[0],
[1, 5, 7],
[2, 4, 6],
[5],
[4]
];
// Node positions
const nodePositions = [
{ x: 100, y: 100 },
{ x: 200, y: 100 },
{ x: 300, y: 100 },
{ x: 400, y: 100 },
{ x: 500, y: 100 },
{ x: 200, y: 200 },
{ x: 400, y: 200 },
{ x: 300, y: 300 }
];
// Canvas setup
const canvas = document.getElementById('graphCanvas');
const ctx = canvas.getContext('2d');
// Function to draw edges
function drawEdges() {
ctx.strokeStyle = '#7f8c8d';
ctx.lineWidth = 2;
adjacencyList.forEach((neighbors, node) => {
neighbors.forEach(neighbor => {
const start = nodePositions[node];
const end = nodePositions[neighbor];
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y)…
