Search-Algorithm-Efficiency-Comparison/index.html at main · code-explorer-O/Search-Algorithm-Efficiency-Comparison · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Algorithm Efficiency Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Chosen Palette: Warm Neutrals -->
    <!-- Application Structure Plan: This single-page document serves as the main hub for the 'Search Algorithm Efficiency Comparison' project. Its information architecture is designed for clear project introduction and direct access to two core interactive tools. It features: 1. A prominent, clear, and centered header. 2. An enhanced and more engaging introduction explaining the project's purpose and the problem it addresses, structured for better readability. 3. Dedicated sections for the 'Efficiency Analyzer' and 'Efficiency Calculator', each with its own descriptive text and embedded within an iframe. 4. Crucially, each embedded iframe is accompanied by a direct link, allowing users to open the application in a new browser tab for a full-screen experience. This structure was chosen to provide both a consolidated view and the flexibility for deeper engagement with each tool, enhancing user understanding and navigation without clutter. -->
    <!-- Visualization & Content Choices: 1. Report Info: Overall project goal/need. Goal: Introduce. Viz: Plain header text and a visually organized introductory text block with strategic highlighting. Interaction: N/A. Justification: Focuses on clear, straightforward presentation of the project's brand and purpose while making key information more prominent. 2. Report Info: Analyzer description. Goal: Explain & Access. Viz: Text description + iframe embedding 'analyzer.html'. Interaction: Direct link to open analyzer in new tab. Justification: Allows interactive exploration within the main page and provides a full-screen option. 3. Report Info: Calculator description. Goal: Explain & Access. Viz: Text description + iframe embedding 'calculator.html'. Interaction: Direct link to open calculator in new tab. Justification: Similar to analyzer, offers embedded and full-screen access to the calculation tool. -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f8f8; /* Light neutral background */
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        .card {
            background-color: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        iframe {
            width: 100%;
            height: 600px; /* Adjust height as needed, will be responsive */
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb; /* Light border for iframes */
        }
        h1, h2, h3 {
            color: #1a1a1a; /* Darker headings for light mode */
        }
        .text-accent {
            color: #6366f1; /* A subtle indigo accent for key points */
        }
        .question-box {
            background-color: #f0f8ff; /* Light blue background for the question */
            border-left: 4px solid #6366f1; /* Accent border */
            padding: 1rem;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 0.25rem;
            font-style: italic;
            color: #333;
        }

        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            iframe {
                height: 400px; /* Shorter height on smaller screens */
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">

    <div class="container mx-auto p-4 md:p-8">
        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">Optimizing Search</h1>
            <h2 class="text-3xl md:text-4xl font-semibold text-gray-800 mt-2 leading-tight">Multiple Linear Searches Vs Sort + Binary Search</h2>
            <p class="text-lg md:text-xl text-gray-600 mt-4 leading-relaxed">An interactive exploration of algorithm efficiency for multiple searches in unsorted arrays</p>
        </header>

        <main>
            <section class="card mb-12">
                <h2 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-4">Project Introduction: The Core Problem</h2>

                <p class="text-lg text-gray-700 leading-relaxed mb-4">
                    For <span class="font-semibold text-accent">sorted arrays</span>, <span class="font-semibold text-accent">Binary Search</span> is undeniably a more efficient algorithm, making it the clear choice without much deliberation. Similarly, for a <span class="font-semibold text-accent">single search</span> operation in an <span class="font-semibold text-accent">unsorted array</span>, a <span class="font-semibold text-accent">Linear Search</span> typically proves more efficient due to its simpler overhead, negating the need for more complex approaches.
                </p>

                <div class="question-box">
                    <p class="text-lg leading-relaxed">
                        But what if we have an <span class="font-semibold text-accent">unsorted array</span> and we need to perform <span class="font-semibold text-accent">multiple searches</span>? This is where the decision becomes nuanced.
                    </p>
                </div>

                <p class="text-lg text-gray-700 leading-relaxed mb-4">
                    When dealing with data, especially in programming, choosing the right algorithm for a task like searching is paramount for performance. This project addresses a fundamental question: when searching for multiple elements within an initially unsorted array, is it better to repeatedly perform a simple <span class="font-semibold text-accent">Linear Search</span>, or to invest the upfront cost of sorting the array once and then leveraging the much faster <span class="font-semibold text-accent">Binary Search</span> for each subsequent query?
                </p>
                <p class="text-lg text-gray-700 leading-relaxed mt-4">
                    Our goal is to provide a clear, mathematical understanding and interactive tools to answer this question. This website offers two key applications: an <span class="font-semibold text-accent">Analyzer</span> that visualizes the operational costs for different array sizes and search counts, and a <span class="font-semibold text-accent">Calculator</span> that determines the exact threshold for when sorting becomes beneficial. By engaging with these tools, you can gain intuitive insights into the trade-offs involved in algorithm selection.
                </p>
            </section>

            <section class="card mb-12">
                <h2 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-4">Search Strategy Efficiency Analyzer</h2>
                <p class="text-lg text-gray-700 leading-relaxed mb-6">
                    This interactive program allows you to explore how the total number of operations for "Multiple Linear Searches" versus "Sort + Binary Searches" changes based on two key parameters: the number of elements in the array (`N`) and the number of search operations (`M`). It visually plots the total operations for each approach, making it easy to see where one becomes more efficient than the other. Use the sliders and input boxes to adjust `N` and `M` and observe the real-time performance comparison.
                </p>
                <div class="mb-4 text-center">
                    <a href="analyzer.html" target="_blank" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-md shadow-md hover:bg-indigo-700 transition duration-300">
                        Open Analyzer in New Tab
                    </a>
                </div>
                <iframe src="analyzer.html" title="Search Strategy Efficiency Analyzer"></iframe>
            </section>

            <section class="card mb-12">
                <h2 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-4">Search Strategy Efficiency Calculator</h2>
                <p class="text-lg text-gray-700 leading-relaxed mb-6">
                    Have a specific array size (`N`) in mind and want to know the precise number of searches (`M`) required for "Sort + Binary Search" to outperform "Linear Search"? This calculator will compute that exact threshold for you. Simply input the number of elements in your array (`N`), and it will instantly provide the break-even point for `M`, along with a recommendation for the optimal search strategy.
                </p>
                <div class="mb-4 text-center">
                    <a href="calculator.html" target="_blank" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-md shadow-md hover:bg-indigo-700 transition duration-300">
                        Open Calculator in New Tab
                    </a>
                </div>
                <iframe src="calculator.html" title="Search Strategy Efficiency Calculator"></iframe>
            </section>
        </main>

        <footer class="text-center text-gray-500 mt-12 text-sm">
            &copy; 2025 Search Algorithm Efficiency Project. All rights reserved.
        </footer>
    </div>

</body>
</html>