wtf_flat_alert_system/index.html at main · wongpeiting/wtf_flat_alert_system · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The WTF flat alert system</title>
    <style>
        body {
            margin: 0;
            background-color: rgb(255, 255, 255);
        }
        /* Make the page 750px wide, centered */
        .container {
            width: 750px;
            margin: 4em auto;
        }
        /* Use a nice font */
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        h1 {
            text-align: center;
            font-size: 3em;
            margin: 1em 0;
        }

        .graphic {
            max-width: 690px;
            margin: 1em auto;
        }

        #footer {
            text-align: center;
            padding: 4em;
            background-color: #e7e7e7;
            border-top: solid white 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>The WTF flat alert system 🐣</h1>
        <h3>A live radar revealing the month's most outrageous public housing transactions in Singapore</h3>
        <p>This map updates itself daily to surface the city-state's newest home resale oddballs. You're looking at units that stuck out like sore thumbs when their sale prices were compared against the prices predicted by our mathematical model, which factors in flat attributes such as location and size.</p>
        <p>Think of it as a seismograph for the transactions that make you go “WTF”… as in What's This Flat? 🤓 Methodology <a href="https://github.com/wongpeiting/wtf_flat_alert_system">here</a>.</p>

        <div class="graphic">
          <iframe title="" aria-label="Symbol map" id="datawrapper-chart-Fcpva" src="https://datawrapper.dwcdn.net/Fcpva/2/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="421" data-external="1"></iframe><script type="text/javascript">window.addEventListener("message",function(a){if(void 0!==a.data["datawrapper-height"]){var e=document.querySelectorAll("iframe");for(var t in a.data["datawrapper-height"])for(var r,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data["datawrapper-height"][t]+"px";r.style.height=d}}});</script>
        </div>

        <div class="table">
          <iframe title="WTF flats in table" aria-label="Table" id="datawrapper-chart-F5GWB" src="https://datawrapper.dwcdn.net/F5GWB/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="1885" data-external="1"></iframe><script type="text/javascript">window.addEventListener("message",function(a){if(void 0!==a.data["datawrapper-height"]){var e=document.querySelectorAll("iframe");for(var t in a.data["datawrapper-height"])for(var r,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data["datawrapper-height"][t]+"px";r.style.height=d}}});</script>
        </div>
    </div>
    <div id="footer">
        <p>This website was made for a tutorial on <a href="https://jonathansoma.com">auto-updating websites</a>.</p>
    </div>
</html>