fixed legend, changed some dimensions

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;

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
+
 
   });
 

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>