UNPKG

d3-project-template

Version:
74 lines (66 loc) 2.66 kB
<!DOCTYPE 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>