From 92d1323b9987f8d4775d947902422116d4b86aa5 Mon Sep 17 00:00:00 2001
From: Karenzz <karen.zeng@outlook.com>
Date: Thu, 13 Apr 2023 22:01:34 +0200
Subject: [PATCH] Delete 'index.html'

---
 index.html | 146 -----------------------------------------------------
 1 file changed, 146 deletions(-)
 delete mode 100644 index.html

diff --git a/index.html b/index.html
deleted file mode 100644
index cbd847e..0000000
--- a/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>D3.js Image Loading Time Graph</title>
-        <script src="https://d3js.org/d3.v5.min.js"></script>
-        <style>
-            /* Add some basic styling for the chart */
-            .bar {
-                fill: steelblue;
-            }
-    
-            .bar:hover {
-                fill: brown;
-            }
-    
-            .axis {
-                font: 10px sans-serif;
-            }
-    
-            .axis path,
-            .axis line {
-                fill: none;
-                stroke: #000;
-                shape-rendering: crispEdges;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="chart"></div>
-        <div id="stats"></div>
-        <script>
-        // Generate the list of image URLs named kublai0.jpg to kublai118.jpg
-        const numberOfImages = 119;
-        const imagePrefix = 'http://localhost:8000/kublai';
-        const imageExtension = '.jpg';
-        const images = [];
-
-        for (let i = 0; i < numberOfImages; i++) {
-            const imageName = `${imagePrefix}${i}${imageExtension}`;
-            images.push(imageName);
-        }
-
-        // Disable caching using cache-buster technique
-        const cacheBuster = (url) => `${url}?${new Date().getTime()}`;
-
-        // Load images and measure their loading times
-        const loadImages = async () => {
-            const loadingTimes = [];
-
-            for (const url of images) {
-                const startTime = performance.now();
-                const img = new Image();
-                img.src = cacheBuster(url);
-                img.style.display = 'none';
-                document.body.appendChild(img);
-
-                await new Promise((resolve) => {
-                    img.onload = () => {
-                        const endTime = performance.now();
-                        loadingTimes.push(endTime - startTime);
-                        resolve();
-                    };
-                });
-            }
-
-            return loadingTimes;
-        };
-
-        // Create a D3.js bar chart to visualize loading times
-        const createChart = (data) => {
-            const margin = { top: 20, right: 20, bottom: 30, left: 40 },
-                width = 1280 - margin.left - margin.right,
-                height = 500 - margin.top - margin.bottom;
-
-            const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
-            const y = d3.scaleLinear().rangeRound([height, 0]);
-
-            const svg = d3.select('#chart')
-                .append('svg')
-                .attr('width', width + margin.left + margin.right)
-                .attr('height', height + margin.top + margin.bottom)
-                .append('g')
-                .attr('transform', `translate(${margin.left},${margin.top})`);
-
-            x.domain(data.map((d, i) => i));
-            y.domain([0, d3.max(data)]);
-
-            svg.append('g')
-                .attr('class', 'axis axis--x')
-                .attr('transform', `translate(0,${height})`)
-                .call(d3.axisBottom(x));
-
-            svg.append('g')
-                .attr('class', 'axis axis--y')
-                .call(d3.axisLeft(y).ticks(10))
-                .append('text')
-                .attr('transform', 'rotate(-90)')
-                .attr('y', 6)
-                .attr('dy', '0.71em')
-                .attr('text-anchor', 'end')
-                .text('Loading Time (ms)');
-
-            svg.selectAll('.bar')
-                .data(data)
-                .enter().append('rect')
-                .attr('class', 'bar')
-                .attr('x', (d, i) => x(i))
-                .attr('y', (d) => y(d))
-                .attr('width', x.bandwidth())
-                .attr('height', (d) => height - y(d));
-
-            const stats = document.getElementById('stats');
-            let textContent = '';
-            let average = 0;
-            let sum = 0;
-            let min = parseFloat(data[0]);
-            let max = parseFloat(data[0]);
-            for(datum of data) {
-                loadingTime = parseFloat(datum)
-                sum = sum + loadingTime
-                if(loadingTime > max) {
-                    max = loadingTime;
-                }
-                if(loadingTime < min) {
-                    min = loadingTime;
-                }
-            }
-            average = sum / data.length
-            textContent = 
-                'Total: ' + sum + 
-                ' Average: ' + average + 
-                ' Min: ' + min + 
-                ' Max: ' + max;
-            stats.textContent = textContent;
-        };
-
-        // Load images and create the chart
-        (async () => {
-            const loadingTimes = await loadImages();
-            createChart(loadingTimes);
-        })();
-    </script>
-</body>
-</html>