Files
cs5890_data_visualization/hw4/hw4.html
2019-09-30 22:29:42 -06:00

80 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visualization - Homework 4</title>
<link rel="stylesheet" href="styles.css"/>
<!--script src="https://d3js.org/d3.v5.js"></script-->
<script src="d3.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script-->
<script src="topojson.min.js"></script>
<script src="js/infoPanel.js" async></script>
<script src="js/barChart.js" async></script>
<script src="js/map.js" async></script>
<script src="js/script.js" async></script>
</head>
<body>
<div class="container">
<header>
<img src="assets/fifa_russia_logo.png" alt="Fifa WC Russia Logo" id="logo"/>
<h1>Exploring FIFA World Cup Statistics: CS-5630/6630 Homework 4</h1>
<div>Name: Brady Bodily; E-Mail: brady.bodily1@aggiemail.usu.edu; A#: A00987897</div>
</header>
<div id="details" class="view">
<h2 id="edition">World Cup Title</h2>
<h3>Host</h3>
<span id="host"></span>
<h3>Winner</h3>
<span id="winner"></span>
<h3>Silver</h3>
<span id="silver"></span>
<h3>Teams</h3>
<span id="teams"></span>
</div>
<div id="bar-chart" class="view">
<h2 class="">Bar Chart</h2>
<div id="plot-selector">
<label>Plot:</label>
<select id="dataset" onchange="chooseData()">
<option selected value="attendance">Attendance</option>
<option value="teams">Teams</option>
<option value="matches">Matches</option>
<option value="goals">Goals</option>
</select>
</div>
<svg width="500" height="400" id="barChart">
<g id="xAxis"></g>
<g id="yAxis"></g>
<g id="bars"></g>
</svg>
</div>
<div id="map-view" class="view">
<h2>World Map</h2>
<svg width="400" height="30">
<rect class="host legend-element" x="0" y="5" ></rect>
<text x="18" y="18">Host</text>
<rect class="team legend-element" x="60" y="5" ></rect>
<text x="78" y="18">Participant</text>
<circle class="gold" cx="176" cy="12" r="8"></circle>
<text x="188" y="18">Winner</text>
<circle class="silver" cx="258" cy="12" r="8" ></circle>
<text x="270" y="18">Runner-Up</text>
</svg>
<svg width="900" height="600">
<g id="map"> </g>
<g id="points"></g>
</svg>
</div>
</div>
</body>
</html>