grafici_html/words_parallel_chart.html

                                                      <!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">


    <!--    <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/dashboard/">-->

    <!-- Bootstrap core CSS -->
    <!-- <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
   

    <!-- Custom styles for this template -->
    <!-- Per importare un css personalizzato. -->

</head>
<body>

<div class="container">
    <!--main-->
    <main role="main">

        <div id="html_chart"></div>

    </main>
</div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<!--Same libraries loaded with CDN-->
<script>window.jQuery || document.write('<script src="/docs/4.4/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="/docs/4.4/dist/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>


<script type="module">

    import {Runtime} from "https://unpkg.com/@observablehq/runtime@4/dist/runtime.js";
    /* Link al notebook da importare va incollato qui */
    /*import notebook from "https://api.observablehq.com/@danielefadda/esercitazione-1-aprile.js?v=3";*/
    import notebook from "https://api.observablehq.com/@angeloturco10/words-parallel-chart.js?v=3"; 

    /* renders = {"nome cella observable da renderizzare": "#id_html_in_cui_renderizzare"} */
    const renders = {
        "pPlot": "#html_chart"
    };
    function render(_node, value) {
        if (!(value instanceof Element)) {
            const el = document.createElement("span");
            el.innerHTML = value;
            value = el;
        }
        if (_node.firstChild !== value) {
            if (_node.firstChild) {
                while (_node.lastChild !== _node.firstChild) _node.removeChild(_node.lastChild);
                _node.replaceChild(value, _node.firstChild);
            } else {
                _node.appendChild(value);
            }
        }
    }
    const runtime = new Runtime();
    const main = runtime.module(notebook, name => {
        const selector = renders[name];
        if (selector) {
            return {fulfilled: (value) => render(document.querySelector(selector), value)}
        } else {
            return true;
        }
    });

</script>

</body>
</html>