From d8008847f2c527637b8c36f24b654a4b499e20c9 Mon Sep 17 00:00:00 2001
From: alicestrt <alice.strt@gmail.com>
Date: Thu, 29 Oct 2020 09:54:51 +0100
Subject: [PATCH] fixed legend, changed some dimensions

---
 static/css/style.css | 49 ++++++++++++++++++++++++++++----------------
 static/js/d3_map.js  |  8 ++++----
 templates/hello.html |  3 ++-
 3 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 44f8f82..2ef4b39 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -27,6 +27,7 @@
   margin-top: 20px;
   margin-bottom: 20px;
   margin-right: 10px;
+  margin-left: 20px;
 }
 .media_area {
   margin-top: 10px;
@@ -63,7 +64,7 @@ cursor: pointer;
 
 .group2 {
 	fill: #92817a ;
-  font-size: 15px;
+  font-size: 18px;
   font-family: 'Vesper Libre', serif;
 }
 
@@ -71,14 +72,14 @@ cursor: pointer;
 
 .group1 {
   fill: #bedbbb;
-  font-size: 15px;
+  font-size: 18px;
   font-family: 'Vesper Libre', serif;
 }
 
 .group4 {
   fill: #8db956;
   font-family: 'Vesper Libre', serif;
-  font-size: 15px;
+  font-size: 18px;
 
 
 }
@@ -86,12 +87,17 @@ cursor: pointer;
 .group3 {
   fill: #707070;
   font-family: 'Vesper Libre', serif;
-  font-size: 15px;
+  font-size: 18px;
 
 
 }
 
-svg{  width:100%; height:100%; margin:0 auto;}
+svg{
+  width:100%;
+  height:100%;
+  margin-left: 30px;
+  margin-top: 10px;
+}
 path{
 fill: transparent;
 stroke: #000;
@@ -109,18 +115,14 @@ stroke-dasharray:6px;
 
 }
 
-#map_div p{ position:absolute; padding:50px; top:200px; width:0; height:0; border-radius:50%; }
-.c1{ padding:20px; top:220px; left:10%; background:red; }
-.c2{ left:50%; background:blue; }
-.c3{ left:30%; background: yellow;}
-
 /* map legend */
 
 .box1 {
   height: 15px;
   width: 15px;
-  margin-left : 15px;
+  margin-left : 10px;
   margin-top: 10px;
+  display: inline-block;
 
   background-color: #bedbbb;
 }
@@ -128,38 +130,49 @@ stroke-dasharray:6px;
 .box2 {
   height: 15px;
   width: 15px;
-  margin-left : 15px;
+  margin-left : 10px;
   margin-top: 10px;
   background-color: #92817a;
+  display: inline-block;
+
 }
 
 .box3 {
   height: 15px;
   width: 15px;
-  margin-left : 15px;
+  margin-left : 10px;
   margin-top: 10px;
   background-color: #707070;
+  display: inline-block;
+
 }
 
 .box4 {
   height: 15px;
   width: 15px;
-  margin-left : 15px;
+  margin-left : 10px;
   margin-top: 10px;
-
+  display: inline-block;
   background-color: #8db956;
 }
 
 .map_legend p {
-  padding-left: 15px;
+  padding-left: 5px;
   font-family: 'Vesper Libre', serif;
+  display: inline;
+  font-size: 15px;
+}
 
-
+#legend_title {
+  font-family: 'Vesper Libre', serif;
+  font-size: 20px;
+  padding-left: 10px;
 }
+
 /* text area */
 .thesis {
 overflow-y: scroll;
-max-height:480px;
+max-height:450px;
 scroll-behavior: smooth;
 font-size: 1em;
 border: 1px black solid;
diff --git a/static/js/d3_map.js b/static/js/d3_map.js
index 01c6c92..a7d18cb 100644
--- a/static/js/d3_map.js
+++ b/static/js/d3_map.js
@@ -7,9 +7,9 @@ var svg = d3.select(".map_area").append("svg")
     .attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`);
 
 var force = d3.layout.force()
-    .gravity(0.01)
-    .distance(300)
-    .charge(-50)
+    .gravity(0.009)
+    .distance(250)
+    .charge(-30)
     .size([width, height]);
 
 
@@ -70,7 +70,7 @@ d3.json("/static/js/group1.json", function(error, json) {
         .attr("y2", function(d) { return d.target.y; });
 
     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
-//    node.each(collide(0.5)); //Added
+
 
   });
 
diff --git a/templates/hello.html b/templates/hello.html
index 9f27340..a8b958a 100644
--- a/templates/hello.html
+++ b/templates/hello.html
@@ -10,8 +10,9 @@
     </div>
     <div class="row">
       <div class="col-md-12">
+        <p id="legend_title">Map legend</p>
+
         <div class="map_legend">
-        <p>Map legend</p>
         <div class="box1"></div> <p>Folklore literature</p>
         <div class="box2"></div> <p>Islamic Mysticism</p>
         <div class="box3"></div> <p>Contemporary poets</p>