-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
22 lines (20 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
<title>IS-445 DATA VISUALIZATION IDYLL WEBPAGE</title>
<meta property="og:title" content="IS-445 DATA VISUALIZATION IDYLL WEBPAGE" />
<meta charset="utf-8" />
<meta property="og:type" content="article" />
<meta property="og:description" content="WEEK 12 PROGRAMMING ASSIGNMENT" />
<meta property="description" content="WEEK 12 PROGRAMMING ASSIGNMENT" />
<link rel="stylesheet" href="static/idyll_styles.css" />
</head>
<body>
<div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><div class=" idyll-text-container"></div><div class="article-header" style="background:#222222;color:#ffffff"><h1 class="hed">IS-445 DATA VISUALIZATION IDYLL WEBPAGE</h1><h2 class="dek">WEEK 12 PROGRAMMING ASSIGNMENT</h2><div class="byline">By: <a target="_blank" href="" style="color:#ffffff">Puru Joshi</a></div><div class="idyll-pub-date">Sat Apr 16 2022</div></div><div class=" idyll-text-container"><h1 id="using-built-in-components">USING BUILT-IN COMPONENTS</h1><h2 id="1.-preview">1<!-- -->. PREVIEW</h2><h4 id="noxus-empire-in-league-of-legends">Noxus Empire in League Of Legends</h4><a href="https://universe.leagueoflegends.com/en_US/region/noxus/">Noxus<!-- --> - <!-- -->League Of Legends</a><div style="background-color:white;padding:20px" idyll="[object Object]"></div><h2 id="2.-stepper">2<!-- -->. STEPPER</h2><h4 id="champions-from-the-noxus-empire">Champions From The Noxus Empire</h4></div><div class="idyll-stepper" style="position:relative;height:500px"><div class="idyll-step-graphic"><div class="idyll-graphic"><img src="static/images/0.jpg" idyll="[object Object]"/></div></div><div class="idyll-step-content"><div class="idyll-step "><a href="https://www.leagueoflegends.com/en-us/champions/swain/">Swain</a></div></div><div class="idyll-stepper-control"><div class="idyll-stepper-control-button idyll-stepper-control-button-previous">←</div><div class="idyll-stepper-control-button idyll-stepper-control-button-next">→</div></div></div><div class=" idyll-text-container"><div style="background-color:white;padding:20px" idyll="[object Object]"></div><h2 id="3.-table">3<!-- -->. TABLE</h2><h4 id="popular-champions-based-on-pick-rate">Popular Champions Based On Pick Rate</h4><div class="table-container"><div><div class="table "><table role="table" style="margin-bottom:0"><thead style="display:flex;flex-direction:column;width:100%;min-width:200px"><tr role="row" style="display:inline-flex;flex-grow:1"><th colSpan="1" role="columnheader" style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer">Champion</th><th colSpan="1" role="columnheader" style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer">Popularity</th></tr></thead><tbody role="rowgroup" style="display:flex;flex-direction:column;width:100%;min-width:200px"><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">Jinx</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">21.3%</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">Kai'Sa</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">20.2%</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">Lucian</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">19.2%</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">Ezreal</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">16.9%</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">Ahri</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">16.2%</td></tr></tbody></table></div><div class="table-pagination" style="display:none;align-items:stretch;justify-content:space-between;flex-wrap:wrap;padding:3px;box-sizing:border-box;box-shadow:0 0 15px 0 rgb(0 0 0 / 10%);border-top:2px solid rgba(0,0,0,0.1)"><div class="table-pagination-previous" style="display:flex;flex:1;text-align:center"><button disabled="" style="box-sizing:border-box;margin:0;border:0;border-radius:3px;padding:6px;font-size:1em;color:rgba(0, 0, 0, 0.6);background:rgba(0, 0, 0, 0.1);cursor:default;width:100%;opacity:0.5">Previous</button></div><div class="table-pagination-center" style="display:flex;flex:1.5;flex-wrap:wrap;align-items:center;justify-content:space-around"><span style="display:flex;align-items:baseline">Page<!-- --> <!-- -->1<!-- --> <!-- -->of <!-- -->1</span></div><div class="table-pagination-next" style="display:flex;flex:1;text-align:center"><button disabled="" style="box-sizing:border-box;margin:0;border:0;border-radius:3px;padding:6px;font-size:1em;color:rgba(0, 0, 0, 0.6);background:rgba(0, 0, 0, 0.1);cursor:default;width:100%;opacity:0.5">Next</button></div></div></div></div><div style="background-color:white;padding:20px" idyll="[object Object]"></div><h2 id="4.-range">4<!-- -->. RANGE</h2><h4 id="a-slider-for-a-random-variable">A Slider For A Random Variable</h4><input type="range" value="10" min="0" max="100" step="1"/><span class="idyll-display">10.00</span><h2 id="5.-vega-lite-plot">5<!-- -->. Vega-lite Plot</h2><h4 id="importing-dataset-and-displaying-it-in-a-table">Importing Dataset And Displaying It In A Table</h4><p>The dataset has been taken from <a text="here" url="https://vincentarelbundock.github.io/Rdatasets/datasets.html" href="https://vincentarelbundock.github.io/Rdatasets/datasets.html">here</a>. The dataset is hosted on github as part of a library of different databases, that can be used for analysis by Data Analysts and Data Scientists.</p><p>The dataset that we used here, is called ‘WWWusage’. It shows a time series of the numbers of users connected to the Internet through a server every minute. The time series is of length 100. This is also shown through the plot below. The original source of the dataset is from a study ‘Time Series Analysis by State Space Methods’ by Durbin, J. and Koopman, S. J. (2001).</p><div class="table-container"><div><div class="table "><table role="table" style="margin-bottom:0"><thead style="display:flex;flex-direction:column;width:100%;min-width:200px"><tr role="row" style="display:inline-flex;flex-grow:1"><th colSpan="1" role="columnheader" style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer">time</th><th colSpan="1" role="columnheader" style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer">value</th></tr></thead><tbody role="rowgroup" style="display:flex;flex-direction:column;width:100%;min-width:200px"><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">1</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">88</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">2</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">84</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">3</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">85</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">4</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">85</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">5</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">84</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">6</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">85</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">7</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">83</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">8</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">85</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">9</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">88</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">10</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">89</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">11</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">91</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">12</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">99</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">13</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">104</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">14</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">112</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">15</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">126</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">16</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">138</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">17</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">146</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">18</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">151</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">19</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">150</td></tr><tr role="row" style="display:inline-flex;flex-grow:1"><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">20</td><td style="flex:1;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" role="cell">148</td></tr></tbody></table></div><div class="table-pagination" style="display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap;padding:3px;box-sizing:border-box;box-shadow:0 0 15px 0 rgb(0 0 0 / 10%);border-top:2px solid rgba(0,0,0,0.1)"><div class="table-pagination-previous" style="display:flex;flex:1;text-align:center"><button disabled="" style="box-sizing:border-box;margin:0;border:0;border-radius:3px;padding:6px;font-size:1em;color:rgba(0, 0, 0, 0.6);background:rgba(0, 0, 0, 0.1);cursor:default;width:100%;opacity:0.5">Previous</button></div><div class="table-pagination-center" style="display:flex;flex:1.5;flex-wrap:wrap;align-items:center;justify-content:space-around"><span style="display:flex;align-items:baseline">Page<!-- --> <!-- -->1<!-- --> <!-- -->of <!-- -->5</span></div><div class="table-pagination-next" style="display:flex;flex:1;text-align:center"><button style="box-sizing:border-box;margin:0;border:0;border-radius:3px;padding:6px;font-size:1em;color:rgba(0, 0, 0, 0.6);background:rgba(0, 0, 0, 0.1);cursor:pointer;width:100%">Next</button></div></div></div></div><div style="background-color:white;padding:20px" idyll="[object Object]"></div><h4 id="plotting-the-graph">Plotting The Graph</h4><div></div></div></div></div></div>
<script src="static/idyll_index.js"></script>
</body>
</html>