iHam widget example

Example of use of the iHam widget

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://d3js.org/d3.v3.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
            integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
            crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<link rel="stylesheet" href="https://tntvis.github.io/tnt/build/tnt.css" type="text/css"/>
    <script src="https://tntvis.github.io/tnt/build/tnt.js" charset="utf-8"></script>

<link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
    <script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js" charset="utf-8"></script>

#updating {
            position: absolute;
            left: 20px;
            display: none;
        }

.alert_remove {
            margin-bottom: 0px;
            padding: 4px;
            display: none;
        }

.alert-link {
            cursor: pointer;
        }

#header {
            margin-left: 20px;
            margin-bottom: 20px;
        }

#header > h3 {
            margin-top: 20px;
            margin-bottom: 20px;
            min-height: 3em;
        }
        #menu-bar > div {
            display: inline-block;
        }

.dropdown-toggle {
            padding-top: 7px;
            padding-bottom: 7px;
        }

.axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

.axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
<body>

<div id="header">
    <h3>Hierarchical group HOG:0000474 open at level of <span id="current-node"></span></h3>

<div id="menu-bar">
        <div id="color-schema-dropdown" class="dropdown">
            <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" id="dropdownMenuButton"
                    data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                Set color scheme
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item active" href="#">Query Gene</a>
                <a class="dropdown-item" href="#">Gene Length</a>
                <a class="dropdown-item" href="#">GC Content</a>
            </div>
        </div>

<div id="gene-tooltips-dropdown" class="dropdown">
            <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                Show gene tooltips on
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item active" href="#">Click</a>
                <a class="dropdown-item" href="#">Mouseover</a>
            </div>
        </div>

<div id="percentage-coverage-selector">
            <button class="btn btn-sm btn-outline-dark" type="button"
                    aria-haspopup="true" aria-expanded="false">Remove columns under <input id="set_min_coverage"
                                                                                           type="number" step="10" value="0"
                                                                                           min="0" max="100">% of species coverage
            </button>
        </div>
    </div>
</div>
<div id="color-legend" style="float:right; padding-right:50px"></div>
<div id="updating">
    Updating...
</div>

<div class="alert alert-info text-center alert_remove"
     role="alert"
>
    Lowly supported hogs have been removed as per settings.
    <a class="alert-link" id="reset_column_filter">Click here to reset.</a>
</div>

Updated missing url https://dessimozlab.github.io/iHam/iHam.js to https://dessimozlab.github.io/iham/iham.js

https://d3js.org/d3.v3.js

https://tntvis.github.io/tnt/build/tnt.js

https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js

https://dessimozlab.github.io/iHam/iHam.js