-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
32 lines (30 loc) · 1.97 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
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="d3-tip.js"></script>
<script src="d3.legend.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="finalproject.css">
<title>Data Visualization Final Project</title>
</head>
<body>
<h1 align="center"> Vishalkumar Limbachiya</h1>
<h2 align="center"> #01704311</h2>
<h3 id="i1" align="center">Data Visualization (DSC 530/602-02)</h3>
<h1 id="font1" align="center">Final Project: Analysing the Tennis 2017 Tournament Data.</h1>
<h1 align="center">1) Choropleth</h1>
<p style="font-size: 120%;">Here, I have created a choropleth of the world map, which displays color luminace, which displays data according to the countries which have won the highest, will display the darkest color, and as the winning ratio decrease, the color luminance will get reduced from darkest blue to light blue. When mouse hover is done on any of the country, it will display the total wins that the selected country has won in the whole 2017 year in all the tournaments. <b> When a country is selected</b>, it will open a bar chart which will display more details into the country's players.
</p>
<div id="Firstmap">
</div>
<p style="font-size: 120%">When you <b>click a country on the choropleth</b>, it will expand a barchart which will display number of players that have played in the tournament in 2017 year, and it will also display total number of matches that have been won by that player in all the tournaments. As the players bar is hovered, it will display more detail of the player like his age.
</p>
<div class="barchart" id="achart">
</div>
<script src="finalproject.js"></script>
<script src="finalprojectjq.js"></script>
</body>
</html>