Skip to content

Commit

Permalink
Added action visualization
Browse files Browse the repository at this point in the history
  • Loading branch information
@YouGuessedMyName
YouGuessedMyName committed Jun 28, 2024
1 parent 429ef18 commit 1472ac7
Show file tree
Hide file tree
Showing 5 changed files with 269 additions and 333 deletions.
223 changes: 90 additions & 133 deletions notebooks/die.ipynb
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,102 @@
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"import stormvogel.model\n",
"import stormvogel.visualization"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"# Create a new model with the name \"Die\"\n",
"dtmc = stormvogel.model.new_dtmc(\"Die\")\n",
"\n",
"init = dtmc.get_initial_state()\n",
"\n",
"# From the initial state, add the transition to 6 new states with probability 1/6th.\n",
"init.set_transitions(\n",
" [(1 / 6, dtmc.new_state(f\"rolled{i}\", {\"rolled\": i})) for i in range(6)]\n",
")\n",
"\n",
"# Print the resulting model in dot format.\n",
"# print(dtmc.to_dot())"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"scrolled": true
},
"outputs": [
"cells": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"diegraph.html\n"
]
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"import stormvogel.model\n",
"import stormvogel.visualization"
]
},
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"600px\"\n",
" src=\"diegraph.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7ff90d17b510>"
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"# Create a new model with the name \"Die\"\n",
"dtmc = stormvogel.model.new_dtmc(\"Die\")\n",
"\n",
"init = dtmc.get_initial_state()\n",
"\n",
"# From the initial state, add the transition to 6 new states with probability 1/6th.\n",
"init.set_transitions(\n",
" [(1 / 6, dtmc.new_state(f\"rolled{i}\", {\"rolled\": i})) for i in range(6)]\n",
")\n",
"\n",
"# Print the resulting model in dot format.\n",
"# print(dtmc.to_dot())"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"stormvogel.visualization.show(model=dtmc, name=\"diegraph\")"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"hi.html\n"
]
},
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"600px\"\n",
" src=\"hi.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
" ></iframe>\n",
" "
"cell_type": "code",
"execution_count": 3,
"metadata": {
"scrolled": true
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"diegraph.html\n"
]
},
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"600px\"\n",
" src=\"diegraph.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7efdc3cc9010>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7ff90ec3a110>"
"source": [
"stormvogel.visualization.show(model=dtmc, name=\"diegraph\")"
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.11.2"
}
],
"source": [
"from pyvis.network import Network\n",
"\n",
"g = Network(notebook=True,cdn_resources=\"remote\")\n",
"g.show_buttons()\n",
"g.show(\"hi.html\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.11.2"
}
},
"nbformat": 4,
"nbformat_minor": 4
"nbformat": 4,
"nbformat_minor": 4
}
56 changes: 28 additions & 28 deletions notebooks/diegraph.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html>
<head>
<meta charset="utf-8">

<script>function neighbourhoodHighlight(params) {
// console.log("in nieghbourhoodhighlight");
allNodes = nodes.get({ returnType: "Object" });
Expand Down Expand Up @@ -193,14 +193,14 @@
}</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>









<center>
<h1></h1>
</center>
Expand Down Expand Up @@ -234,24 +234,24 @@ <h1></h1>
float: left;
}









</style>
</head>


<body>
<div class="card" style="width: 100%">


<div id="mynetwork" class="card-body"></div>
</div>




<script type="text/javascript">

Expand All @@ -271,18 +271,18 @@ <h1></h1>
value : []
};







// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');



// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"borderWidth": 3, "color": null, "id": 0, "label": "init", "shape": "dot"}, {"borderWidth": 1, "color": null, "id": 1, "label": "rolled0", "shape": "dot"}, {"borderWidth": 1, "color": null, "id": 2, "label": "rolled1", "shape": "dot"}, {"borderWidth": 1, "color": null, "id": 3, "label": "rolled2", "shape": "dot"}, {"borderWidth": 1, "color": null, "id": 4, "label": "rolled3", "shape": "dot"}, {"borderWidth": 1, "color": null, "id": 5, "label": "rolled4", "shape": "dot"}, {"borderWidth": 1, "color": null, "id": 6, "label": "rolled5", "shape": "dot"}]);
nodes = new vis.DataSet([{"borderWidth": 3, "color": null, "id": 0, "label": "init", "shape": "circle"}, {"borderWidth": 1, "color": null, "id": 1, "label": "rolled0", "shape": "circle"}, {"borderWidth": 1, "color": null, "id": 2, "label": "rolled1", "shape": "circle"}, {"borderWidth": 1, "color": null, "id": 3, "label": "rolled2", "shape": "circle"}, {"borderWidth": 1, "color": null, "id": 4, "label": "rolled3", "shape": "circle"}, {"borderWidth": 1, "color": null, "id": 5, "label": "rolled4", "shape": "circle"}, {"borderWidth": 1, "color": null, "id": 6, "label": "rolled5", "shape": "circle"}]);
edges = new vis.DataSet([{"arrows": "to", "color": "red", "from": 0, "label": "1/6", "to": 1}, {"arrows": "to", "color": "red", "from": 0, "label": "1/6", "to": 2}, {"arrows": "to", "color": "red", "from": 0, "label": "1/6", "to": 3}, {"arrows": "to", "color": "red", "from": 0, "label": "1/6", "to": 4}, {"arrows": "to", "color": "red", "from": 0, "label": "1/6", "to": 5}, {"arrows": "to", "color": "red", "from": 0, "label": "1/6", "to": 6}, {"arrows": "to", "color": "red", "from": 1, "label": "1", "to": 1}, {"arrows": "to", "color": "red", "from": 2, "label": "1", "to": 2}, {"arrows": "to", "color": "red", "from": 3, "label": "1", "to": 3}, {"arrows": "to", "color": "red", "from": 4, "label": "1", "to": 4}, {"arrows": "to", "color": "red", "from": 5, "label": "1", "to": 5}, {"arrows": "to", "color": "red", "from": 6, "label": "1", "to": 6}]);

nodeColors = {};
Expand All @@ -294,28 +294,28 @@ <h1></h1>
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};

var options = {"nodes": {"color": {"background": "white", "border": "black"}}, "edge": {"color": "blue"}};
var options = {"nodes": {"color": {"background": "white", "border": "black"}}};








network = new vis.Network(container, data, options);














return network;

}
drawGraph();
</script>
</body>
</html>
</html>
Loading

0 comments on commit 1472ac7

Please sign in to comment.