Skip to content

Instantly share code, notes, and snippets.

@hsuh

hsuh/d3cola.js

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hsuh/19743aa9eda5eb7e0fac to your computer and use it in GitHub Desktop.
Save hsuh/19743aa9eda5eb7e0fac to your computer and use it in GitHub Desktop.
Download ZIP
SVG paths
Raw
graph_data.json
{
"nodes":[
{"name":"a","width":60,"height":40},
{"name":"b","width":60,"height":40},
{"name":"c","width":60,"height":40},
{"name":"d","width":60,"height":40},
{"name":"e","width":60,"height":40}
],
"links":[
{"source":0,"target":1},
{"source":1,"target":2},
{"source":2,"target":0},
{"source":2,"target":3}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v2.min.js"></script>
</head>
<body>
<script src="d3cola.js"></script>
<h4> Arcs </h4>
<p>
Arcs are essentially sections of circles or ellipses. </br>
A rx ry x-axis-rotation large-arc-flag sweep-flag x y </br>
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy </br>
</p>
<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 315
L 110 215
A 30 30 1 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
<path d="M230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
<path d="M80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
<path d="M230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
</svg>
<h4> Lines </h4>
<p>The shape of a path element is defined by one attribute, d.</p>
<p>Move to command is called by letter M. &lt;path d="M10 10"&gt; </p>
<svg width="200px" height="20px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10"/>
<!-- Points -->
<circle cx="10" cy="10" r="2" fill="red"/>
</svg>
<p>There are three commands that draw actual lines.
"line to" command. L x y (or l dx dy). </br>
H for horizontal line and V for vertical line.
H x (or h dx). V x (or v dy)
</p>
<svg width="100px" height="90px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"/>
<path d="M10 10 L 200 200" style="stroke:#660000; fill:none;"/>
<!-- Points -->
<circle cx="10" cy="10" r="2" fill="red"/>
<circle cx="90" cy="90" r="2" fill="red"/>
<circle cx="90" cy="10" r="2" fill="red"/>
<circle cx="10" cy="90" r="2" fill="red"/>
</svg>
<p>
We can shorten the above svg path by using Z "Close Path" command.
</p>
<svg width="600px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
<path d="M90 90 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
<!-- Points -->
<circle cx="10" cy="10" r="2" fill="red"/>
<circle cx="90" cy="90" r="2" fill="red"/>
<circle cx="90" cy="10" r="2" fill="red"/>
<circle cx="10" cy="90" r="2" fill="red"/>
</svg>
<h4> Bezier Curves </h4>
<p>Cubic Beziers take in two control points for each point. As such, you have to specify three sets of coordinates when you want to create a cubic Bezier. </br>
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) </br>
x1 y1 = control point for start of your curve </br>
x2 y2 = end point of your curve (middle of the path)</br>
x y = where you want the line to end </br>
</p>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>
<p>You can string several Bezier curves to create long smooth shapes.</br>
Often in this case, the control point on one side of a point will be a reflection of </br>
the control point used on the other side (to keep the slope constant) </br>
S x2 y2, x y (or s dx2 dy2, dx dy) </br>
S produces the same type of curve as earlier,
but if it follows another S command or a C command </br>
the first control point is assumed to be a reflection of the one used previously. </br>
If the S command doesn't follow another S or C command,
then it is assumed that both control points for the curve are the same.
</p>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
<p>
Quadratic Bezier requires only one control point.It takes two arguments </br>
the control point and the end point of the curve. </br>
Q x1 y1, x y (or q dx1 dy1, dx dy)
</p>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>
<p>
As with the cubic Bezier curve, there is a shortcut for stringing together
long sets of them quadratic Beziers, T. </br>
T x y (or t dx dy)
</p>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>
</body>
</html>
Raw
style.css
.node {
stroke: #fff;
stroke-width: 1.5px;
cursor: move;
}
.link {
stroke: #999;
stroke-width: 3px;
stroke-opacity: 1;
}
.label {
fill: white;
font-family: Verdana;
font-size: 25px;
text-anchor: middle;
cursor: move;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment