resolved conflicts

static/css/style.css

@@ -11,7 +11,7 @@
 .container-fluid {
   overflow: hidden;
 }
-/*
+
 .bg {
 /*  background-image: url("/static/images/book.jpeg");*/
   /* background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E); */
@@ -61,113 +61,34 @@ cursor: pointer;
 
 /* Node styling */
 
-#ahmed text {
+.group2 {
-	fill: #226270 ;
+	fill: #92817a ;
-  font-size: 20px;
+  font-size: 25px;
   font-family: 'Vesper Libre', serif;
 }
 
-#mevlana text {
-  fill: #226270 ;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
 
-}
 
-#haci text {
+.group1 {
-  fill: #226270 ;
+  fill: #bedbbb;
-  font-size: 20px;
+  font-size: 25px;
   font-family: 'Vesper Libre', serif;
 }
 
-#dadaloglu text {
+.group4 {
-  fill: #703022;
+  fill: #8db956;
-  font-size: 20px;
   font-family: 'Vesper Libre', serif;
+  font-size: 25px;
+
+
 }
 
-#dedekorkut text {
+.group3 {
-  fill: #703022;
+  fill: #707070;
-  font-size: 20px;
   font-family: 'Vesper Libre', serif;
-}
+  font-size: 25px;
 
-#asikN text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
 
-#asikA text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#asikM text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#karacaoglan text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#asikV text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#neset text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#muharrem text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#aliekber text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#dedeoglu text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#pir text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#yunus text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#kulN text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
-}
-
-#kaygusuz text {
-  fill: #703022;
-  font-size: 20px;
-  font-family: 'Vesper Libre', serif;
 }
 
 svg{  width:100%; height:100%; margin:0 auto;}
@@ -209,6 +130,12 @@ font-family: 'Vesper Libre', serif;
 scrollbar-color: #cdcec9 #aeb10a;
 }
 
+.scrollable {
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  overflow: hidden;
+
+}
 
 h1 {
   font-size: 1.4em !important;

static/js/d3_map.js

@@ -30,9 +30,8 @@ d3.json("/static/js/group1.json", function(error, json) {
       .data(json.nodes)
       .enter().append("g")
       .attr("class", "node ")
-      // .node()classList.add(function(d){return d.group});
+      .attr("class", function(d){return "node group" + d.group})
       .attr("id", function(d){return d.id})
-      // .style("fill",function (d) { return 'red'; })
       .on("click", function(i){
             popup(i.id,i.time);
           })

static/js/group1.json

@@ -2,106 +2,316 @@
   "nodes": [{
       "name": "Dadaloğlu",
       "group": 1,
-      "id": "dadaloglu"
+      "id": "dadaloglu",
+      "time": 1
     },
     {
       "name": "Dedekorkut",
       "group": 1,
-      "id": "dedekorkut"
+      "id": "dedekorkut",
+      "time": 1
     },
     {
       "name": "Aşık Nesimi",
       "group": 1,
-      "id": "asikN"
+      "id": "asikN",
+      "time": 1
     },
     {
       "name": "Aşık Ali İzzet",
       "group": 1,
-      "id": "asikA"
+      "id": "asikA",
-    },
+      "time": 1
-    {
-      "name": "Karacaoğlan",
-      "group": 1,
-      "id": "karacaoglan"
     },
     {
       "name": "Aşık Mahzuni Şerif",
       "group": 1,
-      "id": "asikM"
+      "id": "asikM",
+      "time": 1
+    },
+    {
+          "name": "Karacaoğlan",
+          "group": 1,
+          "id": "karacaoglan",
+          "time": 1
     },
     {
       "name": "Aşık Veysel",
       "group": 1,
-      "id": "asikV"
+      "id": "asikV",
+      "time": 1
     },
     {
       "name": "Neşet Ertaş",
       "group": 1,
-      "id": "neset"
+      "id": "neset",
+      "time": 1
     },
     {
       "name": "Muharrem Ertaş",
       "group": 1,
-      "id": "muharrem"
+      "id": "muharrem",
+      "time": 1
 
     },
     {
       "name": "Ali Ekber Çiçek",
       "group": 1,
-      "id": "aliekber"
+      "id": "aliekber",
+      "time": 1
     },
     {
       "name": "Dedeoğlu",
       "group": 1,
-      "id": "dedeoglu"
+      "id": "dedeoglu",
+      "time": 1
     },
     {
       "name": "Pir Sultan Abdal",
       "group": 1,
-      "id": "pir"
+      "id": "pir",
+      "time": 1
     },
     {
       "name": "Yunus Emre",
       "group": 1,
-      "id": "yunus"
+      "id": "yunus",
+      "time": 1
     },
     {
       "name": "Kul Nesimi",
       "group": 1,
-      "id": "kulN"
+      "id": "kulN",
+      "time": 1
     },
     {
       "name": "Kaygusuz Abdal",
       "group": 1,
-      "id": "kaygusuz"
+      "id": "kaygusuz",
+      "time": 1
     },
 
     {
       "name": "Ahmed Yesevi",
       "group": 2,
-      "id": "ahmed",
+      "id": "ahmedY",
-      "class": "group2"
+      "time": 1
-
     },
     {
       "name": "Mevlana Celaleddin Rumi",
       "group": 2,
-      "id": "mevlana"
+      "id": "mevlana",
+      "time": 1
     },
     {
       "name": "Hacı Bektaş-i Veli",
       "group": 2,
-      "id": "haci"
+      "id": "haci",
+      "time": 1
     },
     {
       "name": "Nazım Hikmet",
       "group": 3,
-      "id": "nazim"
+      "id": "nazim",
+      "time": 1
     },
     {
       "name": "Ahmed Arif",
       "group": 3,
-      "id": "ahmed"
+      "id": "ahmedA",
+      "time": 1
+    },
+    {
+      "name": "Gülten Akın",
+      "group": 3,
+      "id": "gulten",
+      "time": 1
+    },
+    {
+      "name": "Nilgün Marmara",
+      "group": 3,
+      "id": "nilgun",
+      "time": 1
+    },
+    {
+      "name": "Atilla İlhan",
+      "group": 3,
+      "id": "atilla",
+      "time": 1
+    },
+    {
+      "name": "Lale Müldür",
+      "group": 3,
+      "id": "lale",
+      "time": 1
+    },
+    {
+      "name": "Neyzen Tevfik",
+      "group": 3,
+      "id": "neyzen",
+      "time": 1
+    },
+    {
+      "name": "Melih Cevdet Anday",
+      "group": 3,
+      "id": "melih",
+      "time": 1
+    },
+    {
+      "name": "Cahit Sıtkı Tarancı",
+      "group": 3,
+      "id": "cahit",
+      "time": 1
+    },
+    {
+      "name": "Orhan Veli Kanık",
+      "group": 3,
+      "id": "orhan",
+      "time": 1
+    },
+    {
+      "name": "Ruhi Su",
+      "group": 4,
+      "id": "ruhisu",
+      "time": 1
+    },
+    {
+      "name": "Asu Maralman",
+      "group": 4,
+      "id": "asu",
+      "time": 1
+    },
+    {
+      "name": "Ceylan Ertem",
+      "group": 4,
+      "id": "ceylan",
+      "time": 1
+    },
+    {
+      "name": "Ahmet Kaya",
+      "group": 4,
+      "id": "ahmet",
+      "time": 1
+    },
+    {
+      "name": "Fazıl Say",
+      "group": 4,
+      "id": "fazil",
+      "time": 1
+    },
+    {
+      "name": "Selda Bağcan",
+      "group": 4,
+      "id": "selda",
+      "time": 1
+    },
+    {
+      "name": "Sezen Aksu",
+      "group": 4,
+      "id": "sezen",
+      "time": 1
+    },
+    {
+      "name": "Büyük Ev Ablukada",
+      "group": 4,
+      "id": "buyuk",
+      "time": 1
+    },
+    {
+      "name": "Sümeyra Çakır",
+      "group": 4,
+      "id": "sumeyra",
+      "time": 1
+    },
+    {
+      "name": "Cem Karaca",
+      "group": 4,
+      "id": "cem",
+      "time": 1
+    },
+    {
+      "name": "Barış Manço",
+      "group": 4,
+      "id": "baris",
+      "time": 1
+    },
+    {
+      "name": "Ayfer Vardar",
+      "group": 4,
+      "id": "ayfer",
+      "time": 1
+    },
+    {
+      "name": "Tülay German",
+      "group": 4,
+      "id": "tulay",
+      "time": 1
+    },
+    {
+      "name": "Ezhel",
+      "group": 4,
+      "id": "ezhel",
+      "time": 1
+    },
+    {
+      "name": "Neşe Karaböcek",
+      "group": 4,
+      "id": "nese",
+      "time": 1
+    },
+    {
+      "name": "Erkin Koray",
+      "group": 4,
+      "id": "erkin",
+      "time": 1
+    },
+    {
+      "name": "Moğollar",
+      "group": 4,
+      "id": "mogollar",
+      "time": 1
+    },
+    {
+      "name": "Fikret Kızılok",
+      "group": 4,
+      "id": "fikret",
+      "time": 1
+    },
+    {
+      "name": "3 Hürel",
+      "group": 4,
+      "id": "3hurel",
+      "time": 1
+    },
+    {
+      "name": "Levent Yüksel",
+      "group": 4,
+      "id": "levent",
+      "time": 1
+    },
+    {
+      "name": "Serdar Ateşer",
+      "group": 4,
+      "id": "serdar",
+      "time": 1
+    },
+    {
+      "name": "Hümeyra",
+      "group": 4,
+      "id": "humeyra",
+      "time": 1
+    },
+    {
+      "name": "MFÖ",
+      "group": 4,
+      "id": "mfo",
+      "time": 1
+    },
+    {
+      "name": "İlhan Mimaroğlu",
+      "group": 4,
+      "id": "ilhan",
+      "time": 1
     }
   ],
   "links": [{
@@ -127,12 +337,222 @@
     {
       "source": 15,
       "target": 16,
-      "value": 3
+      "value": 1
     },
     {
       "source": 15,
       "target": 17,
-      "value": 3
+      "value": 1
+    },
+    {
+      "source": 28,
+      "target": 0,
+      "value": 1
+    },
+    {
+      "source": 40,
+      "target": 3,
+      "value": 1
+    },
+    {
+      "source": 40,
+      "target": 2,
+      "value": 1
+    },
+    {
+      "source": 28,
+      "target": 5,
+      "value": 1
+    },
+    {
+      "source": 28,
+      "target": 6,
+      "value": 1
+    },
+    {
+      "source": 45,
+      "target": 6,
+      "value": 1
+    },
+    {
+      "source": 41,
+      "target": 7,
+      "value": 1
+    },
+    {
+      "source": 28,
+      "target": 10,
+      "value": 1
+    },
+    {
+      "source": 50,
+      "target": 12,
+      "value": 1
+    },
+    {
+      "source": 32,
+      "target": 12,
+      "value": 1
+    },
+    {
+      "source": 17,
+      "target": 13,
+      "value": 1
+    },
+    {
+      "source": 17,
+      "target": 14,
+      "value": 1
+    },
+    {
+      "source": 17,
+      "target": 11,
+      "value": 1
+    },
+    {
+      "source": 45,
+      "target": 19,
+      "value": 1
+    },
+    {
+      "source": 31,
+      "target": 22,
+      "value": 1
+    },
+    {
+      "source": 48,
+      "target": 23,
+      "value": 1
+    },
+    {
+      "source": 16,
+      "target": 24,
+      "value": 1
+    },
+    {
+      "source": 34,
+      "target": 25,
+      "value": 1
+    },
+    {
+      "source": 47,
+      "target": 27,
+      "value": 1
+    },
+    {
+      "source": 31,
+      "target": 22,
+      "value": 1
+    },
+    {
+      "source": 30,
+      "target": 4,
+      "value": 1
+    },
+    {
+      "source": 32,
+      "target": 18,
+      "value": 1
+    },
+    {
+      "source": 34,
+      "target": 20,
+      "value": 1
+    },
+    {
+      "source": 34,
+      "target": 25,
+      "value": 1
+    },
+    {
+      "source": 35,
+      "target": 18,
+      "value": 1
+    },
+    {
+      "source": 33,
+      "target": 31,
+      "value": 1
+    },
+    {
+      "source": 33,
+      "target": 11,
+      "value": 1
+    },
+    {
+      "source": 36,
+      "target": 28,
+      "value": 1
+    },
+    {
+      "source": 40,
+      "target": 18,
+      "value": 1
+    },
+    {
+      "source": 40,
+      "target": 28,
+      "value": 1
+    },
+    {
+      "source": 40,
+      "target": 51,
+      "value": 1
+    },
+    {
+      "source": 18,
+      "target": 51,
+      "value": 1
+    },
+    {
+      "source": 45,
+      "target": 6,
+      "value": 1
+    },
+    {
+      "source": 45,
+      "target": 19,
+      "value": 1
+    },
+    {
+      "source": 45,
+      "target": 18,
+      "value": 1
+    },
+    {
+      "source": 41,
+      "target": 7,
+      "value": 1
+    },
+    {
+      "source": 48,
+      "target": 23,
+      "value": 1
+    },
+    {
+      "source": 49,
+      "target": 26,
+      "value": 1
+    },
+    {
+      "source": 29,
+      "target": 11,
+      "value": 1
+    },
+    {
+      "source": 39,
+      "target": 13,
+      "value": 1
+    },
+    {
+      "source": 39,
+      "target": 17,
+      "value": 1
+    },
+    {
+      "source": 47,
+      "target": 34,
+      "value": 1
     }
   ]
 }

templates/hello.html

@@ -8,8 +8,14 @@
     <div class="map_area">
       <script src="../static/js/d3_map.js"></script>
     </div>
+    <div class="row">
+      <div class="col-md-12">
+        <p>Map legend</p>
+      </div>
+    </div>
   </div>
   <div class="col-md-5">
+    <div class="scrollable">
     <div class="row">
       <div class="col-md-12">
           <!-- <p>Merve's thesis</p> -->
@@ -33,7 +39,7 @@
         </div>
       </div>
     </div>
-
+</div>
   </div>
 </div>