Tidy the js a bit

gedgo/static/js/pedigree.js

@@ -1,39 +1,42 @@
-var gid = d3.select("#pedigree-tree").attr("data-gid"),
-    pid = d3.select("#pedigree-tree").attr("data-pid");
+/* global d3 */
+'use strict';
 
-d3.json("/gedgo/" + gid + "/pedigree/" + pid + "/", function(treeData) {
+const gid = d3.select("#pedigree-tree").attr("data-gid"),
+      pid = d3.select("#pedigree-tree").attr("data-pid");
+
+d3.json("/gedgo/" + gid + "/pedigree/" + pid + "/", (treeData) => {
 
   // Create a svg canvas
-  var vis = d3.select("#pedigree-tree").append("svg:svg")
+  const vis = d3.select("#pedigree-tree").append("svg:svg")
     .attr("width", 480)
     .attr("height", 600)
     .append("svg:g")
     .attr("transform", "translate(40, -100)");
 
   // Create a tree "canvas"
-  var gid = treeData.gid;
-  var tree = d3.layout.tree()
-    .size([800,230]);
+  const gid = treeData.gid,
+        tree = d3.layout.tree()
+                 .size([800,230]);
 
-  var diagonal = d3.svg.diagonal()
-    // change x and y (for the left to right tree)
-    .projection(function(d) { return [d.y, d.x]; });
+  const diagonal = d3.svg.diagonal()
+        // change x and y (for the left to right tree)
+        .projection(d => [d.y, d.x]);
 
   // Preparing the data for the tree layout, convert data into an array of nodes
-  var nodes = tree.nodes(treeData);
+  const nodes = tree.nodes(treeData);
+
   // Create an array with all the links
-  var links = tree.links(nodes);
+  const links = tree.links(nodes);
 
-  var link = vis.selectAll("pathlink")
+  vis.selectAll("pathlink")
     .data(links)
     .enter().append("svg:path")
     .attr("d", diagonal);
 
-  var node = vis.selectAll("g.node")
+  const node = vis.selectAll("g.node")
     .data(nodes)
     .enter().append("svg:g")
-    .attr("transform", function(d) {
-        return "translate(" + d.y + "," + d.x + ")"; });
+    .attr("transform", d => "translate(" + d.y + "," + d.x + ")");
 
   // Add the dot at every node
   node.append("svg:rect")
@@ -46,20 +49,20 @@ d3.json("/gedgo/" + gid + "/pedigree/" + pid + "/", function(treeData) {
 
   // place the name atribute left or right depending if children
   node.append("svg:a")
-    .attr("xlink:href", function(d) { return "/gedgo/" + gid + "/" + d.id; })
+    .attr("xlink:href", d => "/gedgo/" + gid + "/" + d.id)
     .append("text")
     .attr("dx", -10)
     .attr("dy", -10)
     .attr("text-anchor", "start")
-    .text(function(d) { return d.name; })
+    .text(d => d.name)
     .attr("font-family", "Baskerville")
     .attr("font-size", "11pt");
 
   node.append("svg:text")
     .attr("dx", -10)
     .attr("dy", 8)
     .attr("text-anchor", "start")
-    .text(function(d) { return d.span; })
+    .text(d => d.span)
     .attr("font-family", "Baskerville")
     .attr("font-size", "11pt")
     .attr("fill", "gray");

gedgo/static/js/timeline.js

@@ -1,27 +1,30 @@
-var gid = d3.select("#timeline").attr("data-gid"),
-    pid = d3.select("#timeline").attr("data-pid");
+/* global d3 */
+'use strict';
 
+const gid = d3.select("#timeline").attr("data-gid"),
+      pid = d3.select("#timeline").attr("data-pid");
 
-d3.json("/gedgo/" + gid + "/timeline/" + pid + "/", function(data) {
-  var events = data.events;
-  if (events.length < 1) {
-    $("#timeline-pod").remove();
-  } else {
-    var birthyear = data.start,
-        deathyear = data.end,
-        hscale = d3.scale.linear()
-                    .domain([0, 35])
-                    .range([20, 400]);
+d3.json("/gedgo/" + gid + "/timeline/" + pid + "/", (data) => {
+    const events = data.events;
+    if (events.length < 1) {
+        $("#timeline-pod").remove();
+        return;
+    }
+    const birthyear = data.start,
+          deathyear = data.end,
+          hscale = d3.scale.linear()
+                      .domain([0, 35])
+                      .range([20, 400]);
 
     //Width and height
-    var w = 480,
-        h = hscale(deathyear - birthyear);
-        scale = d3.scale.linear()
-                  .domain([birthyear, deathyear])
-                  .range([10, h - 10]);
+    const w = 480,
+          h = hscale(deathyear - birthyear),
+          scale = d3.scale.linear()
+                    .domain([birthyear, deathyear])
+                    .range([10, h - 10]);
 
     // Create SVG element
-    var svg = d3.select("#timeline")
+    const svg = d3.select("#timeline")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);
@@ -39,36 +42,21 @@ d3.json("/gedgo/" + gid + "/timeline/" + pid + "/", function(data) {
         .enter()
         .append("circle")
         .attr("cx", w/2)
-        .attr("cy", function(d) {
-            return scale(d.year);
-        })
+        .attr("cy", (d) => scale(d.year))
         .attr("r", 5)
-        .attr("fill", function(d, i) {
-          return (d.year == birthyear || d.year == deathyear) ? "teal" : "white";
-        })
+        .attr("fill", d => (d.year === birthyear || d.year === deathyear) ? "teal" : "white")
         .attr("stroke-width", 3)
-        .attr("stroke", function(d, i) {
-          return (d.type == 'personal') ? "teal" : "orange";
-        });
+        .attr("stroke", d => (d.type === 'personal') ? "teal" : "orange");
 
     svg.selectAll("text")
           .data(events)
           .enter()
           .append("text")
-        .text(function(d) {
-           return d.year + ': ' + d.text;
-          })
-        .attr("x", function(d, i) {
-            return (d.type == 'personal') ? w/2 + 20 : w/2 - 20;
-          })
-          .attr("y", function(d) {
-           return scale(d.year) + 5;
-          })
-          .attr("text-anchor", function(d,i) {
-            return (d.type == 'personal') ? "start" : "end";
-          })
+        .text((d) => d.year + ': ' + d.text)
+          .attr("x", d => (d.type === 'personal') ? w/2 + 20 : w/2 - 20)
+          .attr("y", (d) => scale(d.year) + 5)
+          .attr("text-anchor", d => (d.type === 'personal') ? "start" : "end")
           .attr("font-family", "Baskerville")
           .attr("font-size", "9pt")
           .attr("fill", "gray");
-  }
 });