for hw8

httpserver.py

@@ -0,0 +1,31 @@
+import os
+from http.server import SimpleHTTPRequestHandler, HTTPServer
+from urllib.parse import urlparse
+
+class JPEGRequestHandler(SimpleHTTPRequestHandler):
+    def do_GET(self):
+        url = urlparse(self.path)
+        path = url.path
+        if path.endswith('.jpg'):
+            file_path = path[1:]
+
+            if os.path.isfile(file_path):
+                self.send_response(200)
+                self.send_header('Content-Type', 'image/jpeg')
+                self.end_headers()
+
+                with open(file_path, 'rb') as file:
+                    self.wfile.write(file.read())
+            else:
+                self.send_error(404, 'File not found')
+        else:
+            self.send_error(403, 'Only .jpg files are allowed')
+
+def run(server_class=HTTPServer, handler_class=JPEGRequestHandler, port=8000):
+    server_address = ('', port)
+    httpd = server_class(server_address, handler_class)
+    print(f'Serving JPEGs on port {port}...')
+    httpd.serve_forever()
+
+if __name__ == '__main__':
+    run()

index.html

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