d3 sine wave

d3 sine wave

by robinovitch61

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- ################### -->
        <!-- STYLE -->
        <!-- ################### -->
        <style>
            body {
                margin: 0;
            }

            h1 {
                text-align: center;
                margin: 30px 5px 0;
            }

            p {
                margin: 5px 0;
            }

            .slider-container p {
                margin-right: 20px;
            }

            .container {
                max-width: 620px;
                margin: 10px auto;
            }

            .controls {
                display: flex;
                flex-direction: column;
                align-items: center;
                /* border: 1px solid black; */
            }

            .slider-container {
                display: flex;
                justify-content: space-between;
                width: 50%;
                /* border: 1px solid black; */
            }

            .svg {
                border: 1px solid black;
            }
        </style>
        <meta charset="UTF-8">
        <title>d3 Sine Wave</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js"></script>
    </head>

    <!-- ################### -->
    <!-- BODY -->
    <!-- ################### -->
    <body>
    <header>
        <div class="container">
            <h1>InTerActiiVe SiNe WaVe</h1>
        </div>
    </header>

    <div class="container">
        <div class="controls">
            <div class="slider-container">
                <p>Left: <span id="left-disp"></span></p>
                <input type="range" step="0.5" min="-20" max="0" value="-4" class="slider" id="left">
            </div>
            <div class="slider-container">
                <p>Right: <span id="right-disp"></span></p>
                <input type="range" step="0.5" min="0" max="20" value="4" class="slider" id="right">
            </div>
            <div...