-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
29 lines (28 loc) · 4.29 KB
/
index.html
File metadata and controls
29 lines (28 loc) · 4.29 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
<link href="lib/htmltools-fill-0.5.8.1/fill.css" rel="stylesheet" />
<script src="lib/htmlwidgets-1.6.4/htmlwidgets.js"></script>
<script src="lib/d3-4.5.0/d3.min.js"></script>
<script src="lib/forceNetwork-binding-0.4/forceNetwork.js"></script>
<script src="lib/chordNetwork-binding-0.4/chordNetwork.js"></script>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center; padding: 20px; gap: 10px;">
<h1 style="text-align: center;">Network Visualization in R</h1>
<h3 style="text-align: center; color: #555555;">Misagh Soltani</h3>
<h2 style="text-align: center; margin-top: 20px;">Force Directed Network: Character Interactions</h2>
<div style="width: 100%; height: 45vh; min-height: 300px; display: flex; justify-content: center; align-items: center;">
<div class="forceNetwork html-widget html-fill-item" id="htmlwidget-6d61d8afc12abb47c712" style="width:960px;height:500px;"></div>
<script type="application/json" data-for="htmlwidget-6d61d8afc12abb47c712">{"x":{"links":{"source":[0,0,0,0,1,1,1,2,2,2,2,2,2,2,3,3,4,4,4,5,5,5,5,6,6,6,6,6,7,7,7,7,8,8,8,8,8,8],"target":[7,5,2,4,3,5,8,8,6,3,0,4,5,7,4,8,0,2,8,0,1,2,6,2,5,7,8,0,0,2,6,5,1,2,3,4,6,5],"value":[6,8,4,18,3,5,2,6,3,8,4,4,7,8,6,5,8,3,5,10,8,3,6,6,7,9,12,8,11,8,13,3,2,3,1,4,2,10],"colour":["#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC","#CCCCCC"]},"nodes":{"name":["Marta","Quinn","Sophia","Raj","Letitia","Alex","Hinata","Sumaira","Chan"],"group":[0,1,2,3,4,5,6,7,8],"nodesize":[10,10,10,10,10,10,10,10,10]},"options":{"NodeID":"name","Group":"id","colourScale":"d3.scaleOrdinal().range(['#1B9E77', '#C16610', '#8D6B86', '#BC4399', '#A66753', '#96A713', '#D59D08', '#9D7426', '#666666'])","fontSize":14,"fontFamily":"serif","clickTextSize":35,"linkDistance":100,"linkWidth":"function(d) { return Math.sqrt(d.value); }","charge":-300,"opacity":0.9,"zoom":true,"legend":false,"arrows":false,"nodesize":true,"radiusCalculation":" Math.sqrt(d.nodesize)+6","bounded":false,"opacityNoHover":0.7,"clickAction":null},"jsHooks":{"render":"\n function(el) {\n d3.selectAll('.node circle')\n .style('stroke', '#333333')\n .style('stroke-width', '1.5px');\n d3.selectAll('.node text')\n .style('fill', '#000000')\n .style('font-weight', 'bold');\n }\n"}},"evals":["jsHooks.render"],"jsHooks":[]}</script>
</div>
<h2 style="text-align: center; margin-top: 20px;">Chord Network: Character Interactions Intensity</h2>
<div style="width: 100%; height: 45vh; min-height: 300px; display: flex; justify-content: center; align-items: center;">
<div id="htmlwidget-d3ad3f64f4bda9d1625b" style="width:500px;height:500px;" class="chordNetwork html-widget"></div>
<script type="application/json" data-for="htmlwidget-d3ad3f64f4bda9d1625b">{"x":{"matrix":[[0,0,4,0,8,10,8,11,0],[0,0,0,3,0,8,0,0,2],[4,0,0,8,3,3,6,8,3],[0,3,8,0,6,0,0,0,1],[8,0,3,6,0,0,0,0,4],[10,8,3,0,0,0,7,3,10],[8,0,6,0,0,7,0,13,2],[11,0,8,0,0,3,13,0,0],[0,2,3,1,4,10,2,0,0]],"options":{"width":500,"height":500,"use_ticks":0,"initial_opacity":0.8,"colour_scale":["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"padding":0.1,"font_size":14,"font_family":"sans-serif","labels":["Marta","Quinn","Sophia","Raj","Letitia","Alex","Hinata","Sumaira","Chan"],"label_distance":30},"jsHooks":{"render":"\n function(el) {\n var colors = d3.scaleOrdinal().range(['#8DD3C7', '#C8EABC', '#FBFBB4', '#D9D7C9', '#C3B4D0', '#E39699', '#E9877F', '#A9A0B2', '#97B1BD', '#D9B382', '#EBBD63', '#C4D367', '#C7D98C', '#EED0CD', '#F0D1E1', '#DED7DA', '#CDB7CE', '#BE88BF', '#C2ADC0', '#CBE5C4', '#E4EB9C', '#FFED6F']);\n d3.select(el).selectAll('.chord path')\n .style('fill', function(d, i) {\n return colors(i);\n });\n }\n"}},"evals":["jsHooks.render"],"jsHooks":[]}</script>
</div>
</div>
</body>
</html>