Edges of a network

Edges of a network.markdown

Edges of a network

Visualize edges of a network when nodes can be ordered.

A Pen by Riccardo Scalco on CodePen.

License.

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

script.js

width = 500
height = 1000
m =
  top: 10
  bottom: 10
  right: 10
  left: 10
w = width - m.left - m.right
h = height - m.top - m.bottom

# https://css-tricks.com/scale-svg/
# padding-bottom Hack on an Inline <svg> Element
svg = d3.select "#box"
  .append "svg"
  .attr
    "viewBox": "0 0 " + width + " " + height
    "preserveAspectRatio": "xMidYMin slice"
    "width": "100%"
  .style
    "padding-bottom": (100 * height / width) + "%"
    "height": "1px"
    "overflow": "visible"
  .append "g"
  .attr "transform", "translate(" + m.left + "," + m.top + ")"

q = 100
rand = (max,min=0) -> return Math.floor(Math.random() * (max - min) + min)
data = ([rand(q), rand(q)] for i in [1..400])

y = d3.scale.linear()
  .domain [0, q]
  .range [0, h]

svg.selectAll ".links"
  .data data
  .enter()
  .append "line"
  .attr
    "x1": 0
    "x2": w
    "y1": (d) -> y d[0]
    "y2": (d) -> y d[1]
    "class": "links"
  .on "mouseover", () ->
    d3.select this
      .classed "focus", true
  .on "mouseout", () ->
    d3.select this
      .classed "focus", false
  

style.css

html, body {
  width: 100%;
  background-color: #3e3e3e;
}

#box {
  margin: auto;
  max-width: 400px;
}

.links {
  stroke: #ab3e41;
  stroke-width: 1px;
}

.focus {
  stroke-width: 3px;
}