Skip to content

Instantly share code, notes, and snippets.

@joegaffey

joegaffey/D3 sequence diagram

Last active July 13, 2023 00:42
Download ZIP

Revisions

  1. joegaffey renamed this gist Mar 8, 2019. 1 changed file with 0 additions and 0 deletions.
    0 index.html → D3 sequence diagram
    View file
    File renamed without changes.
  2. joegaffey revised this gist May 23, 2016. 1 changed file with 3 additions and 115 deletions.
    118 changes: 3 additions & 115 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <!DOCTYPE html>
    <meta name="robots" content="noindex">
    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    @@ -120,120 +121,7 @@
    .attr("d", "M0,-5L10,0L0,5");

    })();
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">(function() {

    var classes = ["Class A", "Class B", "Class C", "Class D", "Class E", "Class F", "Class G"];

    var messages = [{start: 0, end: 2, message: "From A to C"},
    {start: 2, end: 3, message: "From C to D"},
    {start: 3, end: 4, message: "From D to E"},
    {start: 4, end: 3, message: "From E to D"},
    {start: 3, end: 6, message: "From D to G"},
    {start: 6, end: 3, message: "From G to D"},
    {start: 3, end: 2, message: "From D to C"},
    {start: 2, end: 0, message: "From C to A"}];

    var XPAD = 50;
    var YPAD = 20;
    var VERT_SPACE = 100;
    var VERT_PAD = 60;

    var CLASS_WIDTH = 80;
    var CLASS_HEIGHT = 40;
    var CLASS_LABEL_X_OFFSET = -25;
    var CLASS_LABEL_Y_OFFSET = 25;

    var MESSAGE_SPACE = 50;
    var MESSAGE_LABEL_X_OFFSET = -40;
    var MESSAGE_LABEL_Y_OFFSET = 70;
    var MESSAGE_ARROW_Y_OFFSET = 80;

    var CANVAS_WIDTH = 800;
    var CANVAS_HEIGHT = 600;

    // Create an svg canvas
    var svg = d3.select("#drawArea")
    .append("svg")
    .attr("width", CANVAS_WIDTH)
    .attr("height", CANVAS_HEIGHT);

    // Draw vertical lines
    classes.forEach(function(c, i) {
    var line = svg.append("line")
    .style("stroke", "#888")
    .attr("x1", XPAD + i * VERT_SPACE)
    .attr("y1", YPAD)
    .attr("x2", XPAD + i * VERT_SPACE)
    .attr("y2", YPAD + VERT_PAD + messages.length * MESSAGE_SPACE);
    });

    // Draw classes
    classes.forEach(function(c, i) {
    var x = XPAD + i * VERT_SPACE;
    var g1 = svg.append("g")
    .attr("transform", "translate(" + x + "," + YPAD + ")")
    .attr("class", "first")
    .append("rect")
    .attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: CLASS_HEIGHT})
    .style("fill", "#CCC");
    });

    // Draw class labels
    classes.forEach(function(c, i) {
    var x = XPAD + i * VERT_SPACE;
    var g1 = svg.append("g")
    .attr("transform", "translate(" + x + "," + YPAD + ")")
    .attr("class", "first")
    .append("text")
    .text(function (d) { return c; })
    .attr("dx", CLASS_LABEL_X_OFFSET)
    .attr("dy", CLASS_LABEL_Y_OFFSET);
    });

    // Draw message arrows
    messages.forEach(function(m, i) {
    var y = YPAD + MESSAGE_ARROW_Y_OFFSET + i * MESSAGE_SPACE;
    var line = svg.append("line")
    .style("stroke", "black")
    .attr("x1", XPAD + m.start * VERT_SPACE)
    .attr("y1", y)
    .attr("x2", XPAD + m.end * VERT_SPACE)
    .attr("y2", y)
    .attr("marker-end", "url(#end)")
    .append("text")
    .text(function (d) { return m.message; });
    });

    // Draw message labels
    messages.forEach(function(m, i) {
    var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((m.end - m.start) * VERT_SPACE) / 2) + (m.start * VERT_SPACE);
    var yPos = YPAD + MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

    var g1 = svg.append("g")
    .attr("transform", "translate(" + xPos + "," + yPos + ")")
    .attr("class", "first")
    .append("text")
    .text(function (d) { return m.message; });
    });

    // Arrow style
    svg.append("svg:defs").selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 10)
    .attr("refY", 0)
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

    })();
    </script></body>
    </script>
    </body>
    </html>
  3. joegaffey created this gist May 23, 2016.
    239 changes: 239 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,239 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Sequence Diagram</title>
    </head>
    <body>
    <div id="drawArea"></div>
    <script id="jsbin-javascript">
    (function() {

    var classes = ["Class A", "Class B", "Class C", "Class D", "Class E", "Class F", "Class G"];

    var messages = [{start: 0, end: 2, message: "From A to C"},
    {start: 2, end: 3, message: "From C to D"},
    {start: 3, end: 4, message: "From D to E"},
    {start: 4, end: 3, message: "From E to D"},
    {start: 3, end: 6, message: "From D to G"},
    {start: 6, end: 3, message: "From G to D"},
    {start: 3, end: 2, message: "From D to C"},
    {start: 2, end: 0, message: "From C to A"}];

    var XPAD = 50;
    var YPAD = 20;
    var VERT_SPACE = 100;
    var VERT_PAD = 60;

    var CLASS_WIDTH = 80;
    var CLASS_HEIGHT = 40;
    var CLASS_LABEL_X_OFFSET = -25;
    var CLASS_LABEL_Y_OFFSET = 25;

    var MESSAGE_SPACE = 50;
    var MESSAGE_LABEL_X_OFFSET = -40;
    var MESSAGE_LABEL_Y_OFFSET = 70;
    var MESSAGE_ARROW_Y_OFFSET = 80;

    var CANVAS_WIDTH = 800;
    var CANVAS_HEIGHT = 600;

    // Create an svg canvas
    var svg = d3.select("#drawArea")
    .append("svg")
    .attr("width", CANVAS_WIDTH)
    .attr("height", CANVAS_HEIGHT);

    // Draw vertical lines
    classes.forEach(function(c, i) {
    var line = svg.append("line")
    .style("stroke", "#888")
    .attr("x1", XPAD + i * VERT_SPACE)
    .attr("y1", YPAD)
    .attr("x2", XPAD + i * VERT_SPACE)
    .attr("y2", YPAD + VERT_PAD + messages.length * MESSAGE_SPACE);
    });

    // Draw classes
    classes.forEach(function(c, i) {
    var x = XPAD + i * VERT_SPACE;
    var g1 = svg.append("g")
    .attr("transform", "translate(" + x + "," + YPAD + ")")
    .attr("class", "first")
    .append("rect")
    .attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: CLASS_HEIGHT})
    .style("fill", "#CCC");
    });

    // Draw class labels
    classes.forEach(function(c, i) {
    var x = XPAD + i * VERT_SPACE;
    var g1 = svg.append("g")
    .attr("transform", "translate(" + x + "," + YPAD + ")")
    .attr("class", "first")
    .append("text")
    .text(function (d) { return c; })
    .attr("dx", CLASS_LABEL_X_OFFSET)
    .attr("dy", CLASS_LABEL_Y_OFFSET);
    });

    // Draw message arrows
    messages.forEach(function(m, i) {
    var y = YPAD + MESSAGE_ARROW_Y_OFFSET + i * MESSAGE_SPACE;
    var line = svg.append("line")
    .style("stroke", "black")
    .attr("x1", XPAD + m.start * VERT_SPACE)
    .attr("y1", y)
    .attr("x2", XPAD + m.end * VERT_SPACE)
    .attr("y2", y)
    .attr("marker-end", "url(#end)")
    .append("text")
    .text(function (d) { return m.message; });
    });

    // Draw message labels
    messages.forEach(function(m, i) {
    var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((m.end - m.start) * VERT_SPACE) / 2) + (m.start * VERT_SPACE);
    var yPos = YPAD + MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

    var g1 = svg.append("g")
    .attr("transform", "translate(" + xPos + "," + yPos + ")")
    .attr("class", "first")
    .append("text")
    .text(function (d) { return m.message; });
    });

    // Arrow style
    svg.append("svg:defs").selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 10)
    .attr("refY", 0)
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

    })();
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">(function() {

    var classes = ["Class A", "Class B", "Class C", "Class D", "Class E", "Class F", "Class G"];

    var messages = [{start: 0, end: 2, message: "From A to C"},
    {start: 2, end: 3, message: "From C to D"},
    {start: 3, end: 4, message: "From D to E"},
    {start: 4, end: 3, message: "From E to D"},
    {start: 3, end: 6, message: "From D to G"},
    {start: 6, end: 3, message: "From G to D"},
    {start: 3, end: 2, message: "From D to C"},
    {start: 2, end: 0, message: "From C to A"}];

    var XPAD = 50;
    var YPAD = 20;
    var VERT_SPACE = 100;
    var VERT_PAD = 60;

    var CLASS_WIDTH = 80;
    var CLASS_HEIGHT = 40;
    var CLASS_LABEL_X_OFFSET = -25;
    var CLASS_LABEL_Y_OFFSET = 25;

    var MESSAGE_SPACE = 50;
    var MESSAGE_LABEL_X_OFFSET = -40;
    var MESSAGE_LABEL_Y_OFFSET = 70;
    var MESSAGE_ARROW_Y_OFFSET = 80;

    var CANVAS_WIDTH = 800;
    var CANVAS_HEIGHT = 600;

    // Create an svg canvas
    var svg = d3.select("#drawArea")
    .append("svg")
    .attr("width", CANVAS_WIDTH)
    .attr("height", CANVAS_HEIGHT);

    // Draw vertical lines
    classes.forEach(function(c, i) {
    var line = svg.append("line")
    .style("stroke", "#888")
    .attr("x1", XPAD + i * VERT_SPACE)
    .attr("y1", YPAD)
    .attr("x2", XPAD + i * VERT_SPACE)
    .attr("y2", YPAD + VERT_PAD + messages.length * MESSAGE_SPACE);
    });

    // Draw classes
    classes.forEach(function(c, i) {
    var x = XPAD + i * VERT_SPACE;
    var g1 = svg.append("g")
    .attr("transform", "translate(" + x + "," + YPAD + ")")
    .attr("class", "first")
    .append("rect")
    .attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: CLASS_HEIGHT})
    .style("fill", "#CCC");
    });

    // Draw class labels
    classes.forEach(function(c, i) {
    var x = XPAD + i * VERT_SPACE;
    var g1 = svg.append("g")
    .attr("transform", "translate(" + x + "," + YPAD + ")")
    .attr("class", "first")
    .append("text")
    .text(function (d) { return c; })
    .attr("dx", CLASS_LABEL_X_OFFSET)
    .attr("dy", CLASS_LABEL_Y_OFFSET);
    });

    // Draw message arrows
    messages.forEach(function(m, i) {
    var y = YPAD + MESSAGE_ARROW_Y_OFFSET + i * MESSAGE_SPACE;
    var line = svg.append("line")
    .style("stroke", "black")
    .attr("x1", XPAD + m.start * VERT_SPACE)
    .attr("y1", y)
    .attr("x2", XPAD + m.end * VERT_SPACE)
    .attr("y2", y)
    .attr("marker-end", "url(#end)")
    .append("text")
    .text(function (d) { return m.message; });
    });

    // Draw message labels
    messages.forEach(function(m, i) {
    var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((m.end - m.start) * VERT_SPACE) / 2) + (m.start * VERT_SPACE);
    var yPos = YPAD + MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

    var g1 = svg.append("g")
    .attr("transform", "translate(" + xPos + "," + yPos + ")")
    .attr("class", "first")
    .append("text")
    .text(function (d) { return m.message; });
    });

    // Arrow style
    svg.append("svg:defs").selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 10)
    .attr("refY", 0)
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

    })();
    </script></body>
    </html>