frontend-data/index.html at main · RickGroot/frontend-data · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3 thing</title>
    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style/style.css">
    <script src="https://d3js.org/d3.v6.js"></script>
    <script src="https://unpkg.com/d3-simple-slider"></script>
</head>

<body>
    <article>
        <h1>Parkeergarages op vakantie</h1>
        <p>Je hebt het allemaal wel eens, pas ik nou wel of niet in die parkeergarage? Vaak als je met een dakkoffer
            rijd weet je niet precies waar je wel en niet terecht kan. Hoe het zit met de hoogtes van parkeergarages
            voor vakantiegangers heb ik hier even kort duidelijk gemaakt.</p>
        <h2 class="barTitle">Alle hoogtes van parkeergarages</h2>
        <svg id="bar"></svg>
        <p>Wil je weten in welke parkeergarages jij kan parkeren in Nederland? Bekijk dit dan snel in de map hieronder!
        </p>
        <h2 class="mapTitle">Parkeergarages in Nederland</h2>
        <div class="svgContainer">
            <div class="sliderContainer">
                <p id="value">170</p>
                <p class="metric">CM</p>
                <div id="slider"></div>
            </div>
            <svg id="map">
                <g id="paths"></g>
                <g id="circles"></g>
            </svg>
        </div>
    </article>

    <script type="module" src="script.js"></script>
</body>

</html>