change color while scrolling

static/css/style.css

@@ -200,3 +200,7 @@ draggable {
   pointer-events: none;
   font: 1em sans-serif;
 }
+
+.active {
+  background-color: #80ffd4;
+}

static/js/d3_map.js

@@ -27,7 +27,7 @@ d3.json("/static/js/group1.json", function(error, json) {
   var node = svg.selectAll(".node")
       .data(json.nodes)
     .enter().append("g")
-      .attr("class", "node")
+      .attr("class", "node "+function(d){return d.class})
       .attr("id", function(d){return d.id})
 
       // .style("fill",function (d) { return 'red'; })
@@ -96,6 +96,7 @@ d3.json("/static/js/group1.json", function(error, json) {
       $("#showdadaloglu").fadeIn()
       console.log("around")
       var dada = document.getElementById("textdadaloglu");
+      dada.className += " active";
       dada.scrollIntoView();
       var audio1 = document.getElementById("audio-1");
       audio1.currentTime = 12;
@@ -103,9 +104,11 @@ d3.json("/static/js/group1.json", function(error, json) {
     });
 
 
+
     $("#muharrem").click(function(){$("#showmuharrem").fadeIn()
     console.log("around")
     var muh = document.getElementById("textmuharrem");
+    muh.className += " active";
     muh.scrollIntoView();
     var audio2 = document.getElementById("audio-1");
     audio2.currentTime = 50;
@@ -117,11 +120,14 @@ d3.json("/static/js/group1.json", function(error, json) {
     if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
         $("#showdadaloglu").fadeOut();
         $("#audiodadaloglu").trigger('pause');
-
+        var textdada = document.getElementById("textdadaloglu");
+        textdada.classList.remove("active");
       };
     if (!$(e.target).parents().andSelf().is('#muharrem')) {
       $("#showmuharrem").fadeOut();
         $("audiomuharrem").trigger('pause');
+        var textmuh = document.getElementById("textmuharrem");
+        textmuh.classList.remove("active");
     };
   });
 

static/js/group1.json

@@ -1,85 +1,79 @@
 {
-  "nodes": [
+  "nodes": [{
-    {
       "name": "Dadaloğlu",
       "group": 1,
-      "id":"dadaloglu"
+      "id": "dadaloglu"
     },
     {
       "name": "Dedekorkut",
       "group": 1,
-      "id":"dedekorkut"
+      "id": "dedekorkut"
     },
     {
       "name": "Aşık Nesimi",
       "group": 1,
-      "id":"asikN"
+      "id": "asikN"
     },
     {
       "name": "Aşık Ali İzzet",
       "group": 1,
-      "id":"asikA"
+      "id": "asikA"
     },
     {
       "name": "Karacaoğlan",
       "group": 1,
-      "id":"karacaoglan"
+      "id": "karacaoglan"
     },
     {
       "name": "Aşık Mahzuni Şerif",
       "group": 1,
-      "id":"asikM"
+      "id": "asikM"
     },
     {
       "name": "Aşık Veysel",
       "group": 1,
-      "id":"asikV"
+      "id": "asikV"
-    }
+    },
-    ,
     {
       "name": "Neşet Ertaş",
       "group": 1,
-      "id":"neset"
+      "id": "neset"
-    }
+    },
-    ,
     {
       "name": "Muharrem Ertaş",
       "group": 1,
-      "id":"muharrem"
+      "id": "muharrem"
 
-    }
+    },
-    ,
     {
       "name": "Ali Ekber Çiçek",
       "group": 1,
-      "id":"aliekber"
+      "id": "aliekber"
-    }
+    },
-    ,
     {
       "name": "Dedeoğlu",
       "group": 1,
-      "id":"dedeoglu"
+      "id": "dedeoglu"
-    }
+    },
-    ,
     {
       "name": "Pir Sultan Abdal",
       "group": 1,
-      "id":"pir"
+      "id": "pir"
     },
     {
       "name": "Yunus Emre",
       "group": 1,
-      "id":"yunus"
+      "id": "yunus"
     },
     {
       "name": "Kul Nesimi",
       "group": 1,
-      "id":"kulN"
+      "id": "kulN"
     },
     {
       "name": "Kaygusuz Abdal",
       "group": 1,
-      "id":"kaygusuz"
+      "id": "kaygusuz"
     },
     {
       "name": "Ahmed Yesevi",
@@ -94,11 +88,10 @@
     {
       "name": "Hacı Bektaş-i Veli",
       "group": 2,
-      "id": "haci",
+      "id": "haci"
     }
   ],
-  "links": [
+  "links": [{
-    {
       "source": 8,
       "target": 0,
       "value": 1