Simple-Linear-Regression/index.html at master · ldtcooper/Simple-Linear-Regression · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-J8KZ038F9H"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-J8KZ038F9H');
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description"
        content="Serverless simple linear regression API service for CSV and TSV data built on AWS Lambda">
    <title>Regression API</title>
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="./styles.css">
    <script type="text/javascript" src="./scatter-plot.js"></script>
    <script type="text/javascript" src="./submit.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://kit.fontawesome.com/9ac0c152de.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <h1>Linear Regression API</h1>
        <div class="header__contact">
            <a href="https://github.com/ldtcooper" rel="noopener" target="_blank">
                <i class="fab fa-github-square"></i>
                <span class="header__contact-link--accessible">GitHub</span>
            </a>
            <a href="https://www.linkedin.com/in/ldtcooper/" rel="noopener" target="_blank">
                <i class="fab fa-linkedin"></i>
                <span class="header__contact-link--accessible">LinkedIn</span>
            </a>
        </div>
    </header>
    <main>
        <section>
            <h2>What is this?</h2>
            <p>
                This is an API that will perform a linear regression on data which you can import below.
            </p>
        </section>
        <section>
            <h2>How do I use it?</h2>
            <p>
                You can upload data in .csv or .tsv format. Your data should only have two rows, one for the dependent
                variable (on the top row) and another for your independent variable (on the bottom row). Any other rows
                will be ignored. Additionally, all of the values save those in the first column (the series names)
                should be numerical, and there should be the same number of values in each row.
            <p>
                <code>
                    age,43,21,25,42,57,59
                    <br/>
                    glucose,99,65,79,75,87,81
                </code>
            <p>
                Uploading the above data will tell you the correlation between age and glucose levels absent any other
                factors. If you don't have some CSV data handy, <a href="sample-data.csv" target="_blank" download
                    rel="noopener">you can download some sample data here</a>. It's a CSV of the (truncated) results of
                Karl Pearson's 1903 experiment comparing the heights of fathers to the heights of their sons. Original
                data to be found <a rel="noopener" target="_blank"
                    href="https://www.kaggle.com/abhilash04/fathersandsonheight#Pearson.txt">on Kaggle</a>.
            </p>
        </section>
        <div class="results">
            <dl id="values" class="results__regression-values--invisible">
                <div class="results__dl-element-wrapper">
                    <dt>Regression Coefficient:</dt>
                    <dd id="coefficient"></dd>
                </div>
                <div class="results__dl-element-wrapper">
                    <dt>Regression Constant:</dt>
                    <dd id="constant"></dd>
                </div>
            </dl>
            <svg id="regression-plot" class="results__chart--invisible"></svg>
        </div>
        <div class="upload">
            <div class="upload__input">
                <label for="file-upload">Upload your file here:</label>
                <input id="file-upload" type="file" name="CSV Upload" accept=".csv, .tsv">
                <p id="error" class="upload__error--invisible"></p>
                <p id="success" class="upload__success--invisible"></p>
                <button id="submit-btn" class="upload__button" type="button" name="upload" disabled>
                    Run Regression
                </button>
            </div>
        </div>
    </main>
</body>

</html>