d3-project-template
Version:
Template for d3 project
74 lines (66 loc) • 2.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corona Virus Spread</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta property="og:title" content="Corona Virus Spread">
<meta property="og:description" content="Bar Chart Race Animation of Corona Virus Spread Across Countries">
<meta property="og:image" content="https://gist.githubusercontent.com/giorgi-ghviniashvili/308fecc28b56286cc027d1daa6fcb2eb/raw/64be1826327f83c48c767d438688acda3b78ac17/corona-time.jpg">
<meta property="og:url" content="https://giorgi-ghviniashvili.github.io/corona-virus-spread/">
</head>
<body>
<div class="container">
<div class="top-bar">
<div class="app-name">
Corona Virus Spread
</div>
<div class="disclaimer">
Based on official reported cases by <a href="https://github.com/CSSEGISandData/COVID-19" target="_blank">Johns Hopkins University</a>.
</div>
</div>
<div class="divider"></div>
<div class="slider" style="visibility: hidden;">
<div class="controls">
<div class="controls-dropdown">
<div class="controls-label">Show:</div>
<select id="top_n_select" class="custom-select custom-select-sm" onchange="app.changeN()">
<option value="10">1-10</option>
<option value="20">1-20</option>
<option value="30">1-30</option>
<option value="40">1-40</option>
<option value="51">1-51</option>
</select>
</div>
<button onclick="app.startPauseAnimation()" class="control-btn active" id="start_pause_btn">
<div class="icon pause"></div>
</button>
<button onclick="app.stopAnimation()" class="control-btn active" id="stop_btn">
<div class="icon stop"></div>
</button>
</div>
<div id="time_slider" class="time-slider">
<div class="edge-years"></div>
<div class="slider-line" id="slider_line">
<div class="slider-tick" id="slider_tick"></div>
</div>
</div>
</div>
<div class="legend-container">
<div class="left flex-grow">
<div class="cta">
Total case breakdown:
</div>
<div class="legend" id="legend"></div>
</div>
<div class="right">
<div id="ticker" class="ticker"></div>
</div>
</div>
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
</body>
</html>