JavascriptAssignment/index.html at master · vishalsingh31/JavascriptAssignment · 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
<!DOCTYPE html>

<html>
    <head>

        <!-- Website Title & Description for Search Engine purposes -->
        <title></title>
        <meta name="description" content="">

        <!-- If no online access, fallback to our hardcoded version of jQuery -->
        <script>window.jQuery || document.write('<script src="js/jquery-1.8.2.min.js"><\/script>')</script>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Bootstrap CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <!--<link href="css/styles.css" rel="stylesheet">-->
        <link rel="stylesheet" type="text/css" href="css/style1.css">
        <link rel="stylesheet" type="text/css" href="css/style2.css">
        <link rel="stylesheet" type="text/css" href="css/style3.css">

        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="js/modernizr-2.6.2.min.js"></script>

    </head>
    <body>

    <div class="container-fluid" id="main">

        <div class="container" id="tabsection">
            <div class="row">
                <div class="col-sm-12">
                    <h1>World Development Indicators - Life Expectancy</h1>
                    <div class="tabbable  col-sm-12">
                        <ul class="nav nav-tabs  col-sm-12">
                            <li class="active"><a href="#tab1" data-toggle="tab">Chart1</a></li>
                            <li><a href="#tab2" data-toggle="tab">Chart2</a></li>
                            <li><a href="#tab3" data-toggle="tab">Chart3</a></li>
                        </ul>
                        <div class="tab-content  col-sm-12">
                            <div class="tab-pane active col-sm-12" id="tab1">

                                <h2>Stacked Bar Chart of Illiterate-Literate Male-Female of all States</h2>
                                <script src="js/script1.js"></script>
                            </div><!-- end tab-pane -->

                            <div class="tab-pane col-sm-12" id="tab2">
                                <h2>Stacked Bar Chart of Illiterate-Literate Male-Female of 7 Eastern States</h2>

                                <script src="js/script2.js"></script>
                            </div><!-- end tab-pane -->


                            <div class="tab-pane col-sm-12" id="tab3">
                                <h2>Stacked Bar Chart of Illiterate-Literate Population of all States</h2>

                                <script src="js/script3.js"></script>
                            </div><!-- end tab-pane -->

                        </div><!-- end tab-content -->
                    </div><!-- end tabbable -->
                </div><!-- end col-sm-12 -->
            </div><!-- end row -->
        </div><!-- end tabsection -->


    </div><!-- end container -->


    <!-- All Javascript at the bottom of the page for faster page loading -->

    <!-- First try for the online version of jQuery-->
    <script src="http://code.jquery.com/jquery.js"></script>

    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>


    </body>
</html>