jqadrad/data.csv

## data.csv

          
            _time
            sender
            receiver
            message

            
              2017-05-12 01:00
              Mario
              World 1
              Start world 1

            
              2017-05-12 01:30
              Mario
              World 1-1
              Move to World 1-1

            
              2017-05-12 02:00
              World 1-1
              Mario
              Received Mushroom

            
              2017-05-12 02:30
              Mario
              World 1-2
              Move to World 1-2

            
              2017-05-12 03:00
              World 1-2
              Mario
              Received Fire flower

            
              2017-05-12 03:30
              Mario
              World 1-3
              Move to World 1-3

            
              2017-05-12 04:00
              World 1-3
              Mario
              Received Warp Whistle

            
              2017-05-12 04:30
              Mario
              World 1-4
              Move to World 1-4

            
              2017-05-12 05:00
              World 1-4
              Mario
              Received One-up

            
              2017-05-12 05:30
              Mario
              Fortress
              Move to Fortress

            
              2017-05-12 06:00
              Fortress
              Mario
              Received Warp Whistle

            
              2017-05-12 06:30
              Mario
              World 1-5
              Move to World 1-5

            
              2017-05-12 07:00
              World 1-5
              Mario
              Received Star

            
              2017-05-12 07:30
              Mario
              World 1-6
              Move to World 1-6

            
              2017-05-12 08:00
              World 1-6
              Mario
              Received Star

            
              2017-05-12 08:30
              Larry Koopa
              Air ship
              Move to airship

            
              2017-05-12 09:00
              Mario
              Air ship
              Move to airship

            
              2017-05-12 09:30
              Mario
              Larry Koopa
              Jump on head

            
              2017-05-12 10:00
              Mario
              Larry Koopa
              Jump on head

            
              2017-05-12 10:30
              Mario
              Larry Koopa
              Jump on head

            
              2017-05-12 11:00
              Larry Koopa
              Mario
              Return magic wand

            
              2017-05-12 11:30
              Air ship
              Mario
              Received P-Wing

            
              2017-05-12 11:30
              World 1
              Mario
              Finished world 1

            
              2017-05-13 12:00
              Mario
              World 2
              Moved to the next world

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.class-rect{
  border: 1;
  fill: white;
  stroke-width: 1px;
  stroke: black;
}
.class-label{
  font-size: x-small;
  font-weight: bold;
}
.message-rect{
  border: 1;
  fill: green;
  stroke-width: 1px;
  stroke: black;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<svg id="chart1" width="960" height="600"></svg>

<script>
    console.log(d3.version)
    // Get data attach to window
    d3.csv("data.csv", function(error, data) {
      // $("#chart1").remove();
      // element.append("<svg id='chart1' width='960' height='900'></svg>");

      var svg = d3.select('svg#chart1'),
        margin = { top: 20, right: 50, bottom: 100, left: 80 },
        width = +svg.attr('width') - margin.left - margin.right,
        height = +svg.attr('height') - margin.top - margin.bottom,
        g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
      // Graph title
      g.append('text')
        .attr('x', (width / 2))
        .attr('y', 0 - (margin.top / 3))
        .attr('text-anchor', 'middle')
        .style('font-size', '16px')
        .text('Sequence diagram');
      // Function to convert a string into a time
      var parseTime = d3.time.format('%Y-%m-%d %H:%M').parse;
      var formatTime = d3.time.format('%e %B %H:%M:%S');
      // Set data
      data.forEach(function(d) {
          d._time = parseTime(d._time);
      });
      console.log(data);

      var senders = d3.set(data.map(function(d){ return d.sender; })).values();
      var receivers = d3.set(data.map(function(d){ return d.receiver; })).values();
      var classes = _.union(senders, receivers);
      console.log(senders);
      console.log(classes);

      var XPAD = 100;
      var YPAD = 30;
      console.log(classes.length);
      var VERT_SPACE = parseInt(width/classes.length);
      var VERT_PAD = 20;

      var MESSAGE_SPACE = 30;
      console.log(data.length*MESSAGE_SPACE);
      svg.attr("height", (data.length+2)*MESSAGE_SPACE);

      var MESSAGE_LABEL_X_OFFSET = -40;
      var MESSAGE_LABEL_Y_OFFSET = 75;
      var MESSAGE_ARROW_Y_OFFSET = 80;

      var CLASS_WIDTH = VERT_SPACE-10;
      var CLASS_LABEL_X_OFFSET = -30;
      var CLASS_LABEL_Y_OFFSET = 25;

      // 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 + data.length * (MESSAGE_SPACE+5));
      });

      // 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", "class-rect")
          .append("rect")
          .attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: "24px"});
        });

      // Draw class labels
      classes.forEach(function(c, i) {
        var x = XPAD + i * VERT_SPACE;
        var g1 = svg.append("g")
          .attr("transform", "translate(" + x + "," + YPAD + ")")
          .append("text")
          .attr("class", "class-label")
          .attr("text-anchor", "middle")
          .text(function (d) { return c; })
          .attr("dy", "16px");
      });

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

      // Draw message timestamps
      data.forEach(function(m, i) {
        var xPos = XPAD + MESSAGE_LABEL_X_OFFSET;
        var yPos = MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

        var g1 = svg.append("g")
          .attr("transform", "translate(" + xPos + "," + yPos + ")")
          .attr("class", "first")
          .attr("text-anchor", "middle")
          .append("text")
          .style("font-size", "8px")
          .text(function (d) { return formatTime(m._time); });
      });

      // Draw message labels
      data.forEach(function(m, i) {
        var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((classes.indexOf(m.receiver) - classes.indexOf(m.sender)) * VERT_SPACE) / 2) + (classes.indexOf(m.sender)  * VERT_SPACE);
        var yPos = MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

        var g1 = svg.append("g")
          .attr("transform", "translate(" + xPos + "," + yPos + ")")
          .append("text")
          .attr("dx", "5px")
          .attr("dy", "-2px")
          .attr("text-anchor", "begin")
          .style("font-size", "8px")
          .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>
_time	sender	receiver	message
2017-05-12 01:00	Mario	World 1	Start world 1
2017-05-12 01:30	Mario	World 1-1	Move to World 1-1
2017-05-12 02:00	World 1-1	Mario	Received Mushroom
2017-05-12 02:30	Mario	World 1-2	Move to World 1-2
2017-05-12 03:00	World 1-2	Mario	Received Fire flower
2017-05-12 03:30	Mario	World 1-3	Move to World 1-3
2017-05-12 04:00	World 1-3	Mario	Received Warp Whistle
2017-05-12 04:30	Mario	World 1-4	Move to World 1-4
2017-05-12 05:00	World 1-4	Mario	Received One-up
2017-05-12 05:30	Mario	Fortress	Move to Fortress
2017-05-12 06:00	Fortress	Mario	Received Warp Whistle
2017-05-12 06:30	Mario	World 1-5	Move to World 1-5
2017-05-12 07:00	World 1-5	Mario	Received Star
2017-05-12 07:30	Mario	World 1-6	Move to World 1-6
2017-05-12 08:00	World 1-6	Mario	Received Star
2017-05-12 08:30	Larry Koopa	Air ship	Move to airship
2017-05-12 09:00	Mario	Air ship	Move to airship
2017-05-12 09:30	Mario	Larry Koopa	Jump on head
2017-05-12 10:00	Mario	Larry Koopa	Jump on head
2017-05-12 10:30	Mario	Larry Koopa	Jump on head
2017-05-12 11:00	Larry Koopa	Mario	Return magic wand
2017-05-12 11:30	Air ship	Mario	Received P-Wing
2017-05-12 11:30	World 1	Mario	Finished world 1
2017-05-13 12:00	Mario	World 2	Moved to the next world
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.class-rect{
	border: 1;
	fill: white;
	stroke-width: 1px;
	stroke: black;
	}
	.class-label{
	font-size: x-small;
	font-weight: bold;
	}
	.message-rect{
	border: 1;
	fill: green;
	stroke-width: 1px;
	stroke: black;
	}

	</style>
	<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
	<svg id="chart1" width="960" height="600"></svg>

	<script>
	console.log(d3.version)
	// Get data attach to window
	d3.csv("data.csv", function(error, data) {
	// $("#chart1").remove();
	// element.append("<svg id='chart1' width='960' height='900'></svg>");

	var svg = d3.select('svg#chart1'),
	margin = { top: 20, right: 50, bottom: 100, left: 80 },
	width = +svg.attr('width') - margin.left - margin.right,
	height = +svg.attr('height') - margin.top - margin.bottom,
	g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
	// Graph title
	g.append('text')
	.attr('x', (width / 2))
	.attr('y', 0 - (margin.top / 3))
	.attr('text-anchor', 'middle')
	.style('font-size', '16px')
	.text('Sequence diagram');
	// Function to convert a string into a time
	var parseTime = d3.time.format('%Y-%m-%d %H:%M').parse;
	var formatTime = d3.time.format('%e %B %H:%M:%S');
	// Set data
	data.forEach(function(d) {
	d._time = parseTime(d._time);
	});
	console.log(data);

	var senders = d3.set(data.map(function(d){ return d.sender; })).values();
	var receivers = d3.set(data.map(function(d){ return d.receiver; })).values();
	var classes = _.union(senders, receivers);
	console.log(senders);
	console.log(classes);

	var XPAD = 100;
	var YPAD = 30;
	console.log(classes.length);
	var VERT_SPACE = parseInt(width/classes.length);
	var VERT_PAD = 20;

	var MESSAGE_SPACE = 30;
	console.log(data.length*MESSAGE_SPACE);
	svg.attr("height", (data.length+2)*MESSAGE_SPACE);

	var MESSAGE_LABEL_X_OFFSET = -40;
	var MESSAGE_LABEL_Y_OFFSET = 75;
	var MESSAGE_ARROW_Y_OFFSET = 80;

	var CLASS_WIDTH = VERT_SPACE-10;
	var CLASS_LABEL_X_OFFSET = -30;
	var CLASS_LABEL_Y_OFFSET = 25;

	// 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 + data.length * (MESSAGE_SPACE+5));
	});

	// 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", "class-rect")
	.append("rect")
	.attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: "24px"});
	});

	// Draw class labels
	classes.forEach(function(c, i) {
	var x = XPAD + i * VERT_SPACE;
	var g1 = svg.append("g")
	.attr("transform", "translate(" + x + "," + YPAD + ")")
	.append("text")
	.attr("class", "class-label")
	.attr("text-anchor", "middle")
	.text(function (d) { return c; })
	.attr("dy", "16px");
	});

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

	// Draw message timestamps
	data.forEach(function(m, i) {
	var xPos = XPAD + MESSAGE_LABEL_X_OFFSET;
	var yPos = MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

	var g1 = svg.append("g")
	.attr("transform", "translate(" + xPos + "," + yPos + ")")
	.attr("class", "first")
	.attr("text-anchor", "middle")
	.append("text")
	.style("font-size", "8px")
	.text(function (d) { return formatTime(m._time); });
	});

	// Draw message labels
	data.forEach(function(m, i) {
	var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((classes.indexOf(m.receiver) - classes.indexOf(m.sender)) * VERT_SPACE) / 2) + (classes.indexOf(m.sender) * VERT_SPACE);
	var yPos = MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;

	var g1 = svg.append("g")
	.attr("transform", "translate(" + xPos + "," + yPos + ")")
	.append("text")
	.attr("dx", "5px")
	.attr("dy", "-2px")
	.attr("text-anchor", "begin")
	.style("font-size", "8px")
	.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>