replace zigzag lines with colored lines (green->orange->red)

html/force-light.css

@@ -15,6 +15,11 @@
 .link line {
   stroke: #333;
   stroke-opacity: 1;
+  stroke-width: 1.5px;
+}
+
+.link:hover line {
+  stroke-width: 5px;
 }
 
 .node ellipse {

html/force.js

@@ -199,21 +199,6 @@ force.on("tick", function() {
       .attr("x2", function(d) { return d.target.x })
       .attr("y2", function(d) { return d.target.y })
 
-  link.selectAll(".label")
-      .attr("transform", function(d) { 
-        π = Math.PI
-        Δx = d.source.x - d.target.x
-        Δy = d.source.y - d.target.y
-        m = Δy/Δx
-        α = Math.atan(m)
-        α += Δx<0?π:0
-        sin = Math.sin(α)
-        cos = Math.cos(α)
-        x = (Math.min(d.source.x, d.target.x) + Math.abs(Δx) / 2)
-        y = (Math.min(d.source.y, d.target.y) + Math.abs(Δy) / 2)
-        return "matrix(" + [cos, sin, -sin, cos, x, y].join(",") + ")"
-      })
-
   vis.selectAll(".node").attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")";
   })
@@ -291,6 +276,10 @@ function reload() {
   })
 }
 
+var linkcolor = d3.scale.linear()
+                  .domain([1, 1.2, 2])
+                  .range(["#0a3", "orange", "red"]);
+
 function update() {
   var links = data.links
                    .filter(function (d) {
@@ -314,21 +303,17 @@ function update() {
 
   linkEnter.append("line")
 
-  link.selectAll("path.label")
-      .remove()
-
-  link.filter(function (d) {
-        return d.quality != "TT" && d.quality != "1.000"
+  link.selectAll("line")
+      .filter( function (d) {
+        return d.type != 'client'
+      })
+      .style("stroke", function(d) {
+        return linkcolor(d.quality)
+      })
+      .append("title")
+      .text( function (d) {
+        return d.quality
       })
-      .append("path")
-      .attr("class", "label")
-      .attr("d", d3.svg.zigzag()
-                       .amplitude(function (d) {
-                         return Math.pow((1 - 1/d.quality), 0.5) * 8;
-                       })
-                       .len(30)
-                       .angularFrequency(4)
-      )
 
   link.exit().remove()
 

html/nodes.html

@@ -8,7 +8,6 @@
     <link href='force-light.css' rel='stylesheet' type='text/css' />
     <script type="text/javascript" src="jquery.min.js"></script>
     <script type="text/javascript" src="d3.v2.js"></script>
-    <script type="text/javascript" src="zigzag.js"></script>
     <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
   </head>

html/zigzag.js

@@ -1,57 +0,0 @@
-function zigzag_amplitude(d) {
-  return d.amplitude;
-}
-
-function zigzag_len(d) {
-  return d.len;
-}
-
-function zigzag_angularFrequency(d) {
-  return d.angularFrequency;
-}
-
-d3.svg.zigzag = function() {
-  var amplitude = zigzag_amplitude,
-      len = zigzag_len,
-      angularFrequency = zigzag_angularFrequency;
-
-  function zigzag() {
-    var A = amplitude.apply(this, arguments),
-        l = len.apply(this, arguments),
-        ω = angularFrequency.apply(this, arguments) + 1;
-
-    start = -l/2;
-    end = l/2;
-
-    step = l/ω;
-
-    var s = "M" + start + ",0";
-
-    for (var i = 1; i<ω; i++)
-      s += "L" + (start + i*step) + "," + ((i%2)?A:-A);
-
-    s += "L" + end + ",0";
-
-    return s;
-  }
-
-  zigzag.amplitude = function(v) {
-    if (!arguments.length) return amplitude;
-    amplitude = d3.functor(v);
-    return zigzag;
-  };
-
-  zigzag.len = function(v) {
-    if (!arguments.length) return len;
-    len = d3.functor(v);
-    return zigzag;
-  };
-
-  zigzag.angularFrequency = function(v) {
-    if (!arguments.length) return angularFrequency;
-    angularFrequency = d3.functor(v);
-    return zigzag;
-  };
-
-  return zigzag;
-};