pratpat.github.io/index.html at master · pratpat/pratpat.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Maps</title>
	<title>Bootstrap Example</title>
   <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

.counties {
  fill: none;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
.navbar {
    background-color: #F8F8F8;
    color: #E7E7E7;
}


/* Title */
.navbar-default .navbar-brand {
    color: #777;
}

.rectangle {
	fill: steelblue;
}
.rectangle:hover {
	fill: orange;
}
.axis {
  font: 10px sans-serif;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 150px;
  height: 5;
  padding: px;
  font-size: 14px;
  background: #FFFFE0;
  border: 1px;
  border-radius: 8px;
  pointer-events: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;

}
.color-me{
    color:blue;
}
</style>
</head>
<body>
<div class = "row">
<center><h2> Pat's superstore sales information for each state</h2></center>
 </div>
   <div class="container">
	<nav class="navbar navbar-default">
	  <div class="container-fluid">

		<ul class="nav navbar-nav">
		  <li><a href="index_home.html" class="color-me">Story</a></li>
		  <li class="active"><a href="index.html">Sales by State</a></li>
		 <!--  <li><a href="index_bar.html">Sales by Product</a></li>
		  <li><a href="Page3.html">Sales/Profit by Customer</a></li> -->
		</ul>
	  </div>
	</nav>
	<div class = "row">
		<div class = "col-sm-10">
			US states chart with colors gives the details on Sales revenue in USD for a given US state. Click on the state to drill down further.
		</div>
		<div class="col-sm-9">
		<div id="fig"></div>

		</div>

	</div>


</div>
    <div id="map" align=center></div>
	<div id="drop" align=center></div>
	<script src="https://d3js.org/d3.v2.js"></script>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://unpkg.com/topojson@3"></script>
	<script src="./map_us.js"></script>

</body>
</html>