Rename HTML file

README.md

@@ -26,7 +26,7 @@ This project aims to visually represent relationships between characters using t
 - **`interactions_data.xlsx`**: The input data file containing two sheets:
   - **Primary Characters** – List of characters.
   - **Conversational Lines** – Number of lines spoken between pairs of characters.
-- **`interactions_network.html`**: The generated HTML file containing the visualizations.
+- **`index.html`**: The generated HTML file containing the visualizations.
 
 ## How to Run
 
@@ -37,8 +37,8 @@ This project aims to visually represent relationships between characters using t
 install.packages(c("readxl", "dplyr", "networkD3", "htmltools", "RColorBrewer"))
 ```
 
-3. **Generate Visualizations**: Open `main.R` in RStudio or an R environment and run the script. It will first process the data in `interactions_data.xlsx` and then generate the HTML file `interactions_network.html` that contains the Force Directed Network and Chord Network visualizations.
-4. **View Output**: Open `interactions_network.html` in a web browser to interact with the visualizations.
+3. **Generate Visualizations**: Open `main.R` in RStudio or an R environment and run the script. It will first process the data in `interactions_data.xlsx` and then generate the HTML file `index.html` that contains the Force Directed Network and Chord Network visualizations.
+4. **View Output**: Open `index.html` in a web browser to interact with the visualizations.
 
 ## Visualizations
 

character_network.html → index.html

@@ -16,13 +16,13 @@ <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-e3403974e7046c71824b" style="width:960px;height:500px;"></div>
-    <script type="application/json" data-for="htmlwidget-e3403974e7046c71824b">{"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 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-eb87819babbf102b5b90" style="width:500px;height:500px;" class="chordNetwork html-widget"></div>
-    <script type="application/json" data-for="htmlwidget-eb87819babbf102b5b90">{"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 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>

main.R

@@ -127,4 +127,4 @@ visualizations <- tagList(
 )
 
 # Save as a HTML file, please check the HTML output for the result
-htmltools::save_html(visualizations, "character_network.html")
+htmltools::save_html(visualizations, "index.html")