D3 Examples - 2016 DMC Interface Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300,700|Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
​
    <title>2016 DMC Interface Example</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
    <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7/leaflet.min.js"></script>
    <style>
        body {
    padding: 0;
    margin: 0;
    text-align: center ;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    line-height: 5px;
}
​
h4{
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}
​
html, body, #map {
    height: 100%;
}
​
circle {
    stroke-width: 0px;
    transition: shape-outside 1s;
    shape-outside: circle(30%);
}
circle:hover {
    stroke: white;
    stroke-width: 2px;
    cursor: pointer;
    shape-outside: circle(50%);
}
​
path {
        stroke: white;
        stroke-width: 1px;
        fill-opacity: 0;
        opacity: .5;
}
​
​
div.tooltip{
    padding: 6px;
    background: white;
    visibility: hidden;
    position: absolute;
    z-index: 10;
}
p.tooltip-text{
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}
​
div.menu{
    position: fixed;
    margin-top: 0px;
    margin-left: 0px ;
    padding: 10px;
    top: 5px;
    right: 0px;
    width: 1450px;
    height: 100px;
    background: rgba(255,255,255,.8);
}
​
em{
  color: red;
  font-weight: 300;
}
</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
    <div id="map"></div>
    <div class="tooltip">
        <p class="tooltip-text" id="cat">This is the category</p>
    </div>
    <div class="menu">
            <p><input type="button" value="Update Data" onclick="updateData()"></p>
            <p>STATUS: <em id="message"></em></p>
​
            <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <label for="time">DAY</label>
      <input type="range" name="slider" id="slider" value="20" min="1" max="28" onChange="changeSlider()">
      <!--!input type="submit" data-inline="true" data-popup-enabled="true"  value="Visualise"=>
    </form>
  </div>
</div>
    </form>
  </div>
</div>
​
​
        <form>
            <! IMPLEMENT NEW USER INTERFACE ELEMENTS HERE >
            <! origin/master-->
​
        </form>
    </div>
​
    <!-- import external script -->
    <script type="text/javascript" src="script.js"></script>
​
​
</body>
</html>
​
    