diff --git a/gedgo/static/js/pedigree.js b/gedgo/static/js/pedigree.js index 0d6b2fe..7ab8008 100644 --- a/gedgo/static/js/pedigree.js +++ b/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,12 +49,12 @@ 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"); @@ -59,7 +62,7 @@ d3.json("/gedgo/" + gid + "/pedigree/" + pid + "/", function(treeData) { .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"); diff --git a/gedgo/static/js/timeline.js b/gedgo/static/js/timeline.js index f86382b..be12c4d 100644 --- a/gedgo/static/js/timeline.js +++ b/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"); - } });