Untitled

<!DOCTYPE HTML>
<!--
    Phantom by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="../static/assets/css/main.css" />
        <noscript><link rel="stylesheet" href="../static/assets/css/noscript.css" /></noscript>

    </head>
    <body class="is-preload">
        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Header -->
                    <header id="header">
                        <div class="inner">

                            <!-- Nav -->
                                <nav>
                                    <ul>
                                        <li><a href="#menu">Menu</a></li>
                                    </ul>
                                </nav>

                        </div>
                    </header>

                <!-- Menu -->
                    <nav id="menu">
                        <h2>Menu</h2>
                        <ul>
                            <li><a href=/index>Home</a></li>
                        </ul>
                    </nav>

                <!-- Main -->

<div id="main">
    <div class="inner">
        <h1>BMI Classification Prevalence</h1>

        <div id="chart"></div>

        <section>
            <div class="row gtr-uniform">
                <div class="col-4 col-12-small" id="zoomLevel">
                </div>
                <div class="col-4 col-12-small" id="ageGroup">
                </div>
                <div class="col-4 col-12-small" id="classification">
                </div>
                <div class="col-4 col-12-small" id="colorScheme">
                </div>
            </div>
        </section>
    </div>
</div>


                <!-- Footer -->
                    <footer id="footer">
                        <div class="inner">
                            <section>
                                <ul class="icons">
                                    <li><a href="" class="icon solid style2 fa-info"><span class="label">About Me</span></a></li>
                                    <li><a href="" class="icon solid style2 fa-envelope"><span class="label">Email</span></a></li>
                                </ul>
                            </section>
                            <ul class="copyright">
                                <li>&copy; . All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
                            </ul>
                        </div>
                    </footer>

            </div>

        <!-- Scripts -->
            <script src="../static/assets/js/jquery.min.js"></script>
            <script src="../static/assets/js/browser.min.js"></script>
            <script src="../static/assets/js/breakpoints.min.js"></script>
            <script src="../static/assets/js/util.js"></script>
            <script src="../static/assets/js/main.js"></script>

<script type="module">
    // Load the Observable runtime and inspector
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    // Load your notebook, compiled as an ES module.
    import notebook from "https://api.observablehq.com/d/0edf13afea44dd6e.js?v=3";
    const renders = {"chart": "#chart",
                        "viewof zoomLevel": "#zoomLevel",
                        "viewof ageGroup": "#ageGroup",
                        "viewof classification": "#classification",
                        "viewof colorScheme": "#colorScheme",
                        "theTitle": "#theTitle",
                        "theSubtitle": "#theSubtitle"
                        };

    for (const name in renders)
      renders[name] = document.querySelector(renders[name]);
    const main = new Runtime().module(notebook, (name) => {
      if (renders[name])
        return new Inspector(renders[name]);
      else return true;
    });
</script>

    </body>
</html>