Edges of a network
html, body {
width: 100%;
background-color: #3e3e3e;
}
#box {
margin: auto;
max-width: 400px;
}
.links {
stroke: #ab3e41;
stroke-width: 1px;
}
.focus {
stroke-width: 3px;
}
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
<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
Visualize edges of a network when nodes can be ordered.
A Pen by Riccardo Scalco on CodePen.