Interactive-Data-Visualization-/iris.html at dev · sefat-rahman/Interactive-Data-Visualization- · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>

    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" href="css/style.css">


    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>

    <script src="https://d3js.org/d3.v5.js"
			integrity="sha384-qbNa7U27VV0Cghe/43y8zEMkmA5M4VxV6MI0k0vdVJKTrBoT2SnBqwccpD0vX+Is"
			crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>

    <script src="js/script_iris_data.js"></script>
	<script src="https://d3js.org/d3-collection.v1.min.js"></script>
	<script src="https://d3js.org/d3-array.v2.min.js"></script>

    <title>CAP 4744/5745 - Interactive Data Visualization - Project 2</title>

	<style>
		.barRectangle:hover{
			opacity: 0.66
		}

		.pie:hover{
			opacity: 0.66
		}
	</style>

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="index.html">Project 2: Sefat E Rahman</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="calvin.html">Calvin College 2004</a></li>
            <li class="nav-item active"><a class="nav-link" href="iris.html">Iris Dataset</a></li>
            <li class="nav-item"><a class="nav-link" href="titanic.html">Titanic Passenger List</a></li>
            <li class="nav-item"><a class="nav-link" href="wb_st.html">World Bank Data, Science-and-Technology</a></li>
        </ul>
    </div>
</nav>


<div class="page" id="page_id">

    <h1>CAP 4744/5745 - Interactive Data Visualization</h1>
    <h2>Project 2: Iris Dataset</h2>
    <h2>Sefat E Rahman</h2>
    <p id="test_p"></p>

    <h3>Visualization 1: Bar Chart</h3>

    <div><svg id="vis_1" name="vis_1" class="default_svg"></svg></div>

    <div id="plots">
    </div>

    <div>
        <p>This bar chart shows the average sepal length of each class. Assuming sepal length is a very important feature. To get the idea
		about the quality of the sample on the data set, average sepal length is measured. The bar chart is used to show the comparison of the average sepal length of
		each class. On mouse hover, the exact value is shown.</p>
    </div>

    <h3>Visualization 2: Scatterplots</h3>
    <div><svg id="vis_2" name="vis_2" class="default_svg"></svg></div>
    <div>
        <p>This scatterplot plots the dataset based on sepal and petal length. Different colors are used for different classes.
		This scatter plot helps us identifying the region on which dataset is dense. We can clearly see that, each of the class
		sits on a particular region. We know the range on which data of each class can be found.</p>
    </div>

    <h3>Visualization 3: Stacked Bar Chart</h3>
    <div><svg id="vis_3" name="vis_3" class="default_svg"></svg></div>
    <div>
        <p>Other than the sepal length; other three attributes like sepal width,petal width, petal length may be important at some aspect.
		To know the quality of the dataset, average of these attributes are calculated. They are categorized class wise. To show all of these
		data together, stacked bar chart is a good choice. DIfferent colors are used at different bar to represent different attribute. On
		mouse hover, exact average of each data is shown.</p>
    </div>

    <h3>Visualization 4: Pie Chart</h3>
    <div><svg id="vis_4" name="vis_4" class="default_svg"></svg></div>
    <div>
        <p>This pie chart shows the exact number of samples of each class whose sepal length are greater than the average sepal length and less than the average sepal legth.
		This pie chart helps to get an idea about the deviation of the data from the mean value.</p>
    </div>

</div>

<script type="text/javascript">

    var iris_data = d3.csv("data/iris.csv", (row, i) => {
        return{
            sepal_length: +row['sepal length in cm'],
            sepal_width: +row['sepal width in cm'],
            petal_length: +row['petal length in cm'],
            petal_width: +row['petal width in cm'],
			class: row.class
        };
    });

	$(document).ready(function(){
		plot_scatterplot("#vis_2", iris_data);
		plot_pieChart("#vis_4", iris_data);
		plot_barChart("#vis_1", iris_data);
		plot_groupedBarChart("#vis_3", iris_data);
	});
</script>


</body>
</html>