Last active
June 1, 2017 17:03
-
-
Save jqadrad/ab19027de4709ba6e676debfa91fdb6e to your computer and use it in GitHub Desktop.
Sequence diagram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
_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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment