Skip to content

Commit

Permalink
Added more meta tags and reworked markov chain diagram
Browse files Browse the repository at this point in the history
  • Loading branch information
@SakuZN
SakuZN committed Aug 6, 2023
1 parent 4f3aab4 commit 9442d22
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 195 deletions.
136 changes: 12 additions & 124 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,22 @@ h3 {
border: 2px solid black;
border-radius: 15px;
padding: 20px;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 3px #4280ab, 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}
#canvas::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
border: 2px solid #3498db;
#form-tab{
border: 2px solid black;
border-radius: 10px;
}
#simulate-btn-icon{
font-size: 20px;
}

#config-form, .timeline {
margin-top: 10px;
margin-bottom: 10px;
}
.scrollable-content {
height: 1200px; /* Adjust as needed */
height: 600px; /* Adjust as needed */
overflow-y: auto;
overflow-x: auto;
}
Expand All @@ -50,119 +48,9 @@ h3 {
flex-direction: column;
}
}
.btn:hover,
.btn:focus {
text-decoration: none;
}

.btn:focus {
outline: 0;
box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}

.btn:disabled {
opacity: .65;
box-shadow: none;
}

.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}

.btn:not(:disabled):not(.disabled):active {
box-shadow: none;
}

.btn-primary {
color: #fff;
border-color: #5e72e4;
background-color: #5e72e4;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
}

.btn-primary:hover {
color: #fff;
border-color: #5e72e4;
background-color: #5e72e4;
}

.btn-primary:focus {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(94, 114, 228, .5);
}

.btn-primary:disabled {
color: #fff;
border-color: #5e72e4;
background-color: #5e72e4;
}

.btn-primary:not(:disabled):not(.disabled):active {
color: #fff;
border-color: #5e72e4;
background-color: #324cdd;
}

.btn-info {
color: #fff;
border-color: #11cdef;
background-color: #11cdef;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
}

.btn-info:hover {
color: #fff;
border-color: #11cdef;
background-color: #11cdef;
}

.btn-info:focus {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(17, 205, 239, .5);
}

.btn-info:disabled {
color: #fff;
border-color: #11cdef;
background-color: #11cdef;
}

.btn-info:not(:disabled):not(.disabled):active {
color: #fff;
border-color: #11cdef;
background-color: #0da5c0;
}

.btn-default {
color: #fff;
border-color: #172b4d;
background-color: #172b4d;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
}

.btn-default:hover {
color: #fff;
border-color: #172b4d;
background-color: #172b4d;
}

.btn-default:focus {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(23, 43, 77, .5);
}

.btn-default:disabled {
color: #fff;
border-color: #172b4d;
background-color: #172b4d;
}

.btn-default:not(:disabled):not(.disabled):active {
color: #fff;
border-color: #172b4d;
background-color: #0b1526;
}

.btn-sm {
font-size: .875rem;
line-height: 1.5;
padding: .25rem .5rem;
border-radius: .375rem;
background-color: #4280ab;
border-color: #4280ab;
font-size: 16px;
color: white;
}
Binary file added icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 58 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,38 @@
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Markov Chain Visualization and Visualization</title>
<meta name="description" content="A markov chain visualization and simulation" />
<title>Markov Chain Visualization</title>
<meta name="description" content="A Markov Chain Visualization and Simulation" />
<meta name="robots" content="noindex, nofollow" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
<meta content="Markov Chain, Simulation, Visualization, Guide, Educational" name="keywords">
<link href="icon.png" rel="icon" type="image/png"/>

<!-- This is for Facebook's Open Graph. -->
<meta content="Markov Chain Visualization and Simulation" property="og:title"/>
<meta content="https://sakuzn.github.io/MarkovChainSimulation/" property="og:url"/>
<meta content="A Markov Chain Visualization and Simulation" property="og:description"/>

<!-- This is for Twitter's Card feature. -->
<meta content="Markov Chain Visualization" name="twitter:title"/>
<meta content="A Markov Chain Visualization and Simulation"
name="twitter:description"/>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css"
integrity="sha512-7nTa5CnxbzfQgjQrNmHXB7bxGTUVO/DcYX6rpgt06MkzM0rVXP3EYCv/Ojxg5H0dKbY7llbbYaqgfZjnGOAWGA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://unpkg.com/[email protected]/styles/vis-network.min.css" rel="stylesheet" />

<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/modal-animation.css" />
<link href="https://unpkg.com/[email protected]/styles/vis-network.min.css" rel="stylesheet" />

</head>
<body>
<div class="container-fluid mb-5">
Expand Down Expand Up @@ -408,7 +424,7 @@ <h6>What is this all for?</h6>
</p>
<p>
From the results of the weather chain, we can say that the probability of it being sunny is
around 31%, rainy 45%, and cloudy 24%.
around <strong>31%</strong>, rainy <strong>45%</strong>, and cloudy <strong>24%</strong>.
</p>
<p>
In a perfect world, where there are no changes due to factors like global warming, and
Expand All @@ -428,17 +444,19 @@ <h5>Let's try the diagram below!</h5>
</div>
</div>
<!-- Title -->
<h3 class="mb-3 mt-5 text-center">Markov Chain Diagram</h3>
<small class="text-center text-muted">

<h3 class="mb-1 mt-5 text-center">Markov Chain Diagram</h3>
<small class="text-center text-muted mb-3">
Note: The diagram is interactable, you can drag the nodes around and zoom in and out.
</small>
<div class="d-grid gap-2 d-md-flex justify-content-center">
<button id="simulate-btn" class="btn btn-primary ms-2" type="button">Simulate</button>
</div>
<div class="col-lg-8 col-md-12 mb-3">
<div id="canvas" class="border" style="height: 600px"></div>
<script src="https://unpkg.com/[email protected]/standalone/umd/vis-network.min.js"></script>
<script src="scripts/markov_diagram.js"></script>
</div>
<div class="col mt-2 me-4">
<div class="card" style="height: 100%">
<div class="col mt-2 me-4" >
<div class="card" id="form-tab" style="height: 100%">
<div class="card-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
Expand Down Expand Up @@ -506,7 +524,6 @@ <h3 class="mb-3 mt-5 text-center">Markov Chain Diagram</h3>

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button id="display-btn" class="btn btn-success" type="submit">Show Markov Chain</button>
<button id="simulate-btn" class="btn btn-primary ms-2" type="button">Simulate</button>
<button id="reset-btn" class="btn btn-danger ms-2" type="button">Reset</button>
</div>
</form>
Expand All @@ -529,6 +546,7 @@ <h3 class="mb-3 mt-5 text-center">Markov Chain Diagram</h3>
<hr>
<div class="text-center timeline border" >
<h3 class="mb-3 mt-3">Event Sequence | Timeline:</h3>
<hr>
<div id="state-history" class="mx-3">
<!-- State history goes here -->
</div>
Expand Down Expand Up @@ -558,25 +576,36 @@ <h4 class="modal-title" id="exampleModalLongTitle">Info!</h4>
</div>
</div>
<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var mathElements = document.getElementsByClassName('math')
for (var i = 0; i < mathElements.length; i++) {
var mathElement = mathElements[i]
katex.render(mathElement.innerText, mathElement)
}
})
</script>
<script
crossorigin="anonymous"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
crossorigin="anonymous"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"
integrity="sha512-ToL6UYWePxjhDQKNioSi4AyJ5KkRxY+F1+Fi7Jgh0Hp5Kk2/s8FD7zusJDdonfe5B00Qw+B8taXxF6CFLnqNCw=="
crossorigin="anonymous"
referrerpolicy="no-referrer">

</script>
<script src="https://unpkg.com/[email protected]/standalone/umd/vis-network.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"
integrity="sha512-aoZChv+8imY/U1O7KIHXvO87EOzCuKO0GhFtpD6G2Cyjo/xPeTgdf3/bchB10iB+AojMTDkMHDPLKNxPJVqDcw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>

<script src="scripts/markov_diagram.js"></script>
<script src="scripts/main.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
var mathElements = document.getElementsByClassName('math')
for (var i = 0; i < mathElements.length; i++) {
var mathElement = mathElements[i]
katex.render(mathElement.innerText, mathElement)
}
})
</script>
</body>
</html>
36 changes: 15 additions & 21 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,15 @@ $(document).ready(function() {
n_matrixInputs.find(".row").last().remove();
updateProbInputs();
}
function destroyNetwork() {
if (event) {
event.preventDefault();
}
if(visNetwork != null) {
visNetwork.destroy();
visNetwork = null;
}
}
function resetForm(){
if (event) {
event.preventDefault();
Expand All @@ -241,14 +250,7 @@ $(document).ready(function() {
matrixInputs.empty();
n_matrixInputs.empty();
$("#state-history").empty();
try {
if (visNetwork.body !== null) {
visNetwork.destroy();
clearData();
}
} catch (error) {
//Do nothing
}
destroyNetwork();

}
function initForm(){
Expand Down Expand Up @@ -358,14 +360,7 @@ $(document).ready(function() {
return;
}

try {
if (visNetwork.body !== null) {
visNetwork.destroy();
clearData();
}
} catch (error) {
//Do nothing
}
destroyNetwork();
visNetwork = createNetwork(getStateNames(), getMatrix(), getInitProbs());

visNetwork.on('stabilizationIterationsDone', function () {
Expand All @@ -380,24 +375,23 @@ $(document).ready(function() {
event.preventDefault();
}
//Check if the diagram is initialized
try {
let check = visNetwork.body !== null;
} catch (error) {
if (!visNetwork) {
showPopup("Please initialize the diagram first.");
return;
}

let simulateBtn = $("#simulate-btn");
resetSimulation(visNetwork);
//Check if the simulation is running if yes, call stopSimulation and revert the button text
if (isRunning()) {
stopSimulation();
resetSimulation(visNetwork);
simulateBtn.text("Simulate").removeClass("btn-danger").addClass("btn-primary");
return;
}
$("#state-history").empty();
runSimulation(visNetwork, getInterval(), getNSteps());
//Change the button text to stop and change bootstrap class
$("#simulate-btn").text("Stop").removeClass("btn-primary").addClass("btn-danger");
simulateBtn.text("Stop").removeClass("btn-primary").addClass("btn-danger");

}
function preFillForm(){
Expand Down
Loading

0 comments on commit 9442d22

Please sign in to comment.