sc.data.html

{{ partial "header.html" . }}

<div class="header">
    <h1>{{ .Title }}</h1>
    <h2>{{ .Description }}</h2>
</div>

<style>
    .cloud {
        margin: 0;
        max-width: none;
    }

    .select {
        float: top;
        z-index: 1;
        top: 0px;
        overflow-x: hidden;
        padding: 8px 10px;
    }

    .contentsFull {
        margin: 0;
        max-width: none;
        float: center;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .columnImg {
        float: left;
        text-align: center;
        width: 100%;
    }

    .columnNav {
        float: left;
        text-align: center;
        width: 50%;
    }

    .img {
        max-width: 75%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .huGenes {
        display: none;
    }

    .muGenes {
        display: none;
    }

    @media (max-width: 1000px) {
        .column {
            width: 100%;
        }
    }
</style>

<div class="cloud">
    <div class="select">
        <div class="contentsFull">
            <div class="row">
                <div class="columnImg">
                    <p class="GenesName" style="background-color:black;"></p>
                    <img class="Genes img" src="/gene.cloud/Genes.2020YTD.20201028.png"
                        alt="Genes searched in 2020 (YTD: 20201028)">
                    <img class="Genes img" src="/gene.cloud/Genes.202009.png"
                        alt="Genes searched in September 2020">
                    <img class="Genes img" src="/gene.cloud/Genes.202008.png"
                        alt="Genes searched in August 2020">
                    <img class="Genes img" src="/gene.cloud/Genes.202007.png"
                        alt="Genes searched in July 2020">
                    <img class="Genes img" src="/gene.cloud/Genes.202006.png"
                        alt="Genes searched in June 2020">
                    <img class="Genes img" src="/gene.cloud/Genes.202005.png"
                        alt="Genes searched in May 2020">
                    <img class="Genes img" src="/gene.cloud/Genes.202004.png"
                        alt="Genes searched in April 2020">
                    <img class="Genes img" src="/gene.cloud/Genes.202003.png"
                        alt="Genes searched in March 2020">
                </div>
            </div>
            <div class="row">
                <div class="columnNav">
                    <div style="font-size:50px" onclick="plusCloud(1)">&#10094;</div>
                </div>
                <div class="columnNav">
                    <div style="font-size:50px" onclick="plusCloud(-1)">&#10095;</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <hr>
    <h2>Visualization with <a href="https://chanzuckerberg.github.io/cellxgene/">CZI's cellxgene</a></h2>
    {{ range where .Pages.ByWeight "Params.cellxgene" true }}
    <li><b><a href="{{ .Params.cxg_link }}" target="_blank">{{.Params.name}}</a></b></li>
    {{ end }}
    <br>
    <hr>
    <h2>Legacy Visualization</h2>
    {{ range where .Pages.ByWeight "Params.cellxgene" false }}
    <li><b><a href="{{.Permalink}}">{{.Params.name}}</a></b></li>
    {{ end }}
    <br>
    <hr>
    <br>
</div>

<script>
    var slideIndex = 1;
    showCloud(slideIndex);

    function plusCloud(n) {
        showCloud(slideIndex += n);
    }

    function showCloud(n) {
        var i;
        var w = document.getElementsByClassName("Genes");
        if (n > w.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = w.length }
        for (i = 0; i < w.length; i++) {
            w[i].style.display = "none";
        }
        w[slideIndex - 1].style.display = "block";
        document.getElementsByClassName("GenesName")[0].innerHTML = w[slideIndex - 1].alt;
    }
</script>

{{ partial "footer.html" . }}