index.html

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="icon" href="src/image/V2.png" type="image/gif">
    <style>
        .card-img-top{
            height: 200px;
            object-fit: cover;
            object-position: 0 0;
            /*height: auto;*/
        }
        html {
            scroll-behavior: smooth;
        }
        #toTop{
            position:fixed;
            bottom:20px;
            right:20px;
        }
        .tag {
            /*margin: 0 2px;*/
            /*color: white;*/
            font-weight: unset;
        }
        .gtab .card:hover {
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        }
        #toTop {
            background-color: white;
        }
        #toTop:hover{
            background-color: var(--primary);
        }
        .card-body {
            padding: .25rem;
        }
        .jumbotron {
            padding: 1rem 1rem;
            padding-bottom:0;
            margin-bottom: .5rem;
        }
    </style>
    <title>HPCC</title>
</head>
<body data-spy="scroll" data-target="#gallery_tab" data-offset="0">
<header>
    <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img src="HiperView/images/TTUlogo.png" width="auto" height="50" class="d-inline-block align-top" alt="" loading="lazy">
        </a>
        <div class="align-middle">

            <h4 class="col-12">Integrated Visualizing, Monitoring, and Managing HPC Systems</h4>
            <span class="align-middle col-12">Supported by the NSF IUCRC grant #1939140 - CAC Dell Inc. membership contribution</span>
        </div>
        <img src="src/image/iDVL.png" width="auto" height="50" class="d-inline-block align-top" alt="" loading="lazy">
    </nav>
</header>
<main role="main">
    <section class="jumbotron text-center">
        <div class="justify-content-md-center">
<!--            <div class="btn-group" role="group" aria-label="Basic example">-->
<!--                <button type="button" class="btn btn-secondary">All</button>-->
<!--                <button type="button" class="btn btn-secondary">Realtime-supported</button>-->
<!--                <button type="button" class="btn btn-secondary">Right</button>-->
<!--            </div>-->
            <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 justify-content-md-center" id="gallery_tab">
                <div class="col mb-4 gtab">
                    <div class="card h-100">
<!--                        <img src="..." class="card-img-top" alt="...">-->
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div style="background-color: white">
        <div class="container" id="detailList">
            <div></div>
        </div>
    </div>
    <a type="button" class="btn btn-small btn-outline-primary" id="toTop" onclick="topFunction()" data-toggle="tooltip" data-placement="top" title="Go to top">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
    </svg>
    </a>
</main>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script>
    AOS.init();
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
    //Get the button:
    mybutton = document.getElementById("toTop");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
    d3.json('src/data/project.json').then(_data=>{
        const data = d3.entries(_data);
        // const typechartTag = d3.scaleOrdinal(d3.schemeCategory10);
        d3.select('#gallery_tab').selectAll('div.gtab')
        .data(data).join('div')
        .attr('class','gtab col mb-4')
            .html(d=>`<a href="#${str2class(d.key)}"><div class="card h-100 shadow-sm">
                        <img src="src/image/${d.value.thumb}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <span class="card-title">${d.value.title}</span>
                        </div>
                    </div></a>`)
        d3.select('#detailList').selectAll('div.detail')
            .data(data).join('div')
            .attr('class','detail')
            .attr('data-aos',(d,i)=>(i%2)?'fade-left':'fade-right')
            .attr('id',d=>str2class(d.key))
            .html((d,i)=>`${i?'<hr>':''}<div class="row justify-content-between"><h3>${d.key}</h3>
    <div >${(d.value.url_stable??[]).map((u,i)=>`<a type="button" class="btn btn-primary m-1" href="${u}" target="_blank">Stable v${i+1}</a>`).join('')}<a type="button" class="btn btn-success m-1" href="${d.value.url}" target="_blank">Demo</a></div></div><ul>
    <li>Pros:<ul>${d.value.pros.map(e=>`<li>${e}</li>`).join('')}</ul></li>
    <li>Cons:<ul>${d.value.cons.map(e=>`<li>${e}</li>`).join('')}</ul></li>
    ${d.value.publication?'<li>Publications:<ul>'+d.value.publication.map(p=>`<li>${p.author},<strong>"${p.title}"</strong> <em>${p.venue}</em>. ${p.year}. DOI: <a href="${p.DOI}">${p.DOI}</a></li>`).join('')+'</ul></li>':''}
    <li>Visualization supported:${d.value.types.map(e=>`<span class="badge tag" >${e}</span>`).join('|')}</li>
</ul>
 <img src="src/image/${d.value.thumb}" class="img-fluid" alt="...">
`)
        AOS.refresh();
    })
    function str2class(str){
        return str.replace(/ |,/g,'_');
    }


</script>

</body>
</html>