Skip to content

Commit 5dd897a

Browse files
akfave99akfave99
committed
Add navigation tabs and styling to all charts
1 parent c33ea30 commit 5dd897a

7 files changed

+915
-12
lines changed

‎docs/chart1-supplier-influence.html‎

Lines changed: 129 additions & 2 deletions
Large diffs are not rendered by default.

‎docs/chart3-defense-systems.html‎

Lines changed: 129 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,124 @@
1-
<html>
2-
<head><meta charset="utf-8" /></head>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Defense Systems Analysis | Geopolitical Dashboard</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
background: linear-gradient(135deg, #0d1b2a 0%, #1a1a2e 100%);
17+
color: #fff;
18+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19+
min-height: 100vh;
20+
}
21+
22+
.navbar {
23+
background-color: #0d1b2a;
24+
border-bottom: 2px solid #1e90ff;
25+
padding: 15px 20px;
26+
}
27+
28+
.navbar-brand {
29+
font-weight: bold;
30+
font-size: 1.5rem;
31+
color: #1e90ff !important;
32+
text-decoration: none;
33+
}
34+
35+
.navbar-brand:hover {
36+
color: #00d4ff !important;
37+
}
38+
39+
.chart-navigation {
40+
background-color: #0d1b2a;
41+
border-bottom: 1px solid #1e90ff;
42+
padding: 10px 20px;
43+
overflow-x: auto;
44+
}
45+
46+
.nav-tabs {
47+
display: flex;
48+
gap: 10px;
49+
flex-wrap: wrap;
50+
}
51+
52+
.nav-tab {
53+
padding: 8px 15px;
54+
background-color: #1a1a2e;
55+
border: 1px solid #1e90ff;
56+
border-radius: 4px;
57+
color: #aaa;
58+
text-decoration: none;
59+
font-size: 0.85rem;
60+
transition: all 0.3s;
61+
white-space: nowrap;
62+
}
63+
64+
.nav-tab:hover {
65+
background-color: #1e90ff;
66+
color: #fff;
67+
border-color: #00d4ff;
68+
}
69+
70+
.nav-tab.active {
71+
background-color: #1e90ff;
72+
color: #fff;
73+
border-color: #00d4ff;
74+
}
75+
76+
.content-container {
77+
padding: 20px;
78+
max-width: 100%;
79+
}
80+
81+
.footer {
82+
background-color: #0d1b2a;
83+
border-top: 2px solid #1e90ff;
84+
padding: 20px;
85+
text-align: center;
86+
color: #aaa;
87+
margin-top: 40px;
88+
}
89+
90+
@media (max-width: 768px) {
91+
.nav-tabs {
92+
flex-direction: column;
93+
}
94+
95+
.nav-tab {
96+
width: 100%;
97+
text-align: center;
98+
}
99+
}
100+
</style>
101+
<meta charset="utf-8" />
102+
</head>
3103
<body>
104+
<nav class="navbar">
105+
<a class="navbar-brand" href="index.html">🌍 Geopolitical Dashboard</a>
106+
</nav>
107+
108+
<div class="chart-navigation">
109+
<div class="nav-tabs">
110+
<a href="threat-perception-analysis.html" class="nav-tab ">Central Asian Regional Threat Perception Analysis</a>
111+
<a href="chart1-supplier-influence.html" class="nav-tab ">Defense Supplier Influence</a>
112+
<a href="chart3-defense-systems.html" class="nav-tab active">Defense Systems Analysis</a>
113+
<a href="chart4-multi-country-radar.html" class="nav-tab ">Multi-Country Radar Comparison</a>
114+
<a href="chart5-priorities-heatmap.html" class="nav-tab ">Defense Priorities Heatmap</a>
115+
<a href="chart7-supplier-connections.html" class="nav-tab ">Supplier Connections</a>
116+
</div>
117+
</div>
118+
119+
120+
<div class="content-container">
121+
4122
<div> <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
5123
<script type="text/javascript">/**
6124
* plotly.js v3.0.1
@@ -3881,5 +3999,14 @@
38813999
window.Plotly = Plotly;
38824000
return Plotly;
38834001
}));</script> <div id="8a0912d0-5df3-4d5c-9431-504653f0fea6" class="plotly-graph-div" style="height:700px; width:100%;"></div> <script type="text/javascript"> window.PLOTLYENV=window.PLOTLYENV || {}; if (document.getElementById("8a0912d0-5df3-4d5c-9431-504653f0fea6")) { Plotly.newPlot( "8a0912d0-5df3-4d5c-9431-504653f0fea6", [{"fill":"toself","name":"Kazakhstan","r":{"dtype":"i4","bdata":"AA4nBw=="},"theta":["Defense","Cyber","Naval","Air","Ground"],"type":"scatterpolar"},{"fill":"toself","name":"Uzbekistan","r":{"dtype":"i4","bdata":"gEpdBQ=="},"theta":["Defense","Cyber","Naval","Air","Ground"],"type":"scatterpolar"},{"fill":"toself","name":"Turkmenistan","r":{"dtype":"i4","bdata":"QKWuAg=="},"theta":["Defense","Cyber","Naval","Air","Ground"],"type":"scatterpolar"},{"fill":"toself","name":"Azerbaijan","r":{"dtype":"i4","bdata":"gB0sBA=="},"theta":["Defense","Cyber","Naval","Air","Ground"],"type":"scatterpolar"},{"fill":"toself","name":"Georgia","r":{"dtype":"i4","bdata":"gMPJAQ=="},"theta":["Defense","Cyber","Naval","Air","Ground"],"type":"scatterpolar"}], {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"polar":{"radialaxis":{"visible":true,"range":[0,150000000]}},"title":{"text":"Defense Systems Analysis"},"height":700}, {"responsive": true} ) }; </script> </div>
4002+
4003+
</div>
4004+
4005+
<div class="footer">
4006+
<p>© 2025 Geopolitical Analysis Dashboard | Built with Plotly & Bootstrap</p>
4007+
<p>Created by: A.K. Faver</p>
4008+
</div>
4009+
4010+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
38844011
</body>
38854012
</html>

0 commit comments

Comments
 (0)