Skip to content

Instantly share code, notes, and snippets.

@keeyip

keeyip/index.html

Created March 22, 2014 15: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 keeyip/9708566 to your computer and use it in GitHub Desktop.
Save keeyip/9708566 to your computer and use it in GitHub Desktop.
Download ZIP
Git visualization
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<style>
body {
background:hsl(0,0%,50%);
}
</style>
</head>
<body>
<svg id="svg">
</svg>
<script src="underscore.js"></script>
<script>
var get = function(selector) { return document.querySelector(selector) };
var set = function(el, attrs) {
_.each(attrs, function(val, key) {
el.setAttribute(key, val)
});
};
var cosd = _.memoize(function(d) { return Math.cos(d*Math.PI/180) });
var sind = _.memoize(function(d) { return Math.sin(d*Math.PI/180) });
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
// A 30 50 0 0 1 162.55 162.45
var arcTo = _.template('A <%- r %> <%- r %> 0 <%- large %> <%- clockwise %> <%- x %> <%- y %>');
var moveTo = _.template('M <%- x %> <%- y %>');
var lineTo = _.template('L <%- x %> <%- y %>');
var path = _.template('<path fill="<%- fill %>" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="<%- strokeOpacity %>" stroke-width="<%- strokeWidth %>" stroke="<%- stroke %>" d="<%- d %>"/>');
var circle = _.template('<circle fill="<%- fill %>" stroke-linecap="round" stroke-linejoin="round" stroke-width="<%- strokeWidth %>" stroke="<%- stroke %>" cx="<%- cx %>" cy="<%- cy %>" r="<%- r %>"/>');
var rect = _.template('<rect fill="<%- fill %>" stroke-linecap="round" stroke-linejoin="round" stroke-width="<%- strokeWidth %>" stroke="<%- stroke %>" x="<%- x %>" y="<%- y %>" width="<%- width %>" height="<%- height %>"/>');
function pieSlice(cx, cy, r, startAngle, endAngle) {
return [
moveTo({x:cx,y:cy}),
lineTo({x:cx+r*cosd(startAngle), y:cy+r*sind(startAngle)}),
arcTo({r:r, large:(endAngle - startAngle)>180 ? 1 : 0, clockwise:1, x:cx+r*cosd(endAngle), y:cy+r*sind(endAngle)}),
].join(' ')
}
var commitLane = function(x0,y0, x1,y1) {
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
var buffer = [
path({
fill: '',
stroke: 'hsl(0,0%,30%)',
strokeWidth: laneWidth,
strokeOpacity: laneOpacity,
d: [
moveTo({x:x0,y:y0}),
lineTo({x:x1,y:y1}),
].join(' ')
})
];
g.innerHTML = buffer.join('');
return g;
}
var branchLane = function(x0,y0, x1,y1) {
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
var buffer = [
path({
fill: '',
stroke: 'hsl(0,0%,30%)',
strokeWidth: laneWidth,
strokeOpacity: laneOpacity,
d: [
moveTo({x:x0,y:y0}),
lineTo({x:x1,y:y1}),
].join(' ')
})
];
g.innerHTML = buffer.join('');
return g;
}
var mergeLane = function(x0,y0, x1,y1) {
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
var buffer = [
path({
fill: '',
stroke: 'hsl(0,0%,30%)',
strokeWidth: laneWidth,
strokeOpacity: laneOpacity,
d: [
moveTo({x:x0,y:y0}),
lineTo({x:x1,y:y1}),
].join(' ')
})
];
g.innerHTML = buffer.join('');
return g;
}
var mergeWithoutConflict = function(cx,cy) {
var r = commitRadius*0.8;
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
var buffer = [
rect({
x: cx-r/2,
y: cy-r/2,
width: r,
height: r,
fill: 'hsl(200,60%,80%)',
stroke: 'hsl(0,0%,30%)',
strokeWidth: 2,
}),
];
g.innerHTML = buffer.join('');
return g;
}
var mergeWithConflict = function(cx,cy) {
var r = commitRadius*0.8;
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
var buffer = [
rect({
x: cx-r/2,
y: cy-r/2,
width: r,
height: r,
fill: 'hsl(30,60%,60%)',
stroke: 'hsl(0,0%,30%)',
strokeWidth: 2,
}),
];
g.innerHTML = buffer.join('');
return g;
}
var pie = function(cx,cy,r,slices) {
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
var buffer = [
circle({
cx: cx,
cy: cy,
r: r,
fill: 'hsl(0,0%,90%)',
stroke: 'hsl(0,0%,30%)',
strokeWidth: laneWidth,
}),
];
var sumRatios = 0;
var FULL_CIRCLE_ERROR = 0.999;
_.each(slices, function(s) {
buffer.push(path(_.extend({
stroke: 'hsl(0,0%,30%)',
strokeWidth: '1.25',
strokeOpacity:'1',
d: pieSlice(cx,cy, r, 360*sumRatios, 360*(Math.min(FULL_CIRCLE_ERROR, sumRatios+s.ratio))),
}, s)));
sumRatios += s.ratio;
});
g.innerHTML = buffer.join('');
return g;
}
var commitRadius = 10;
var laneWidth = 10;
var laneOpacity = 0.7;
get('#svg').appendChild(commitLane(100,0, 100,250));
get('#svg').appendChild(branchLane(100,200, 150,200));
get('#svg').appendChild(branchLane(100,200, 200,200));
get('#svg').appendChild(branchLane(150,200, 150,100));
get('#svg').appendChild(branchLane(200,200, 200,100));
get('#svg').appendChild(mergeLane(150,100, 100,50));
get('#svg').appendChild(mergeLane(200,100, 100,0));
get('#svg').appendChild(pie(100,100, commitRadius, [
{
fill: 'hsl(140,45%,50%)',
ratio: 0.5
},
{
fill: 'hsl(200,60%,60%)',
ratio: 0.25
},
{
fill: 'hsl(50,50%,50%)',
ratio: 0.25
},
]));
get('#svg').appendChild(pie(100,150, commitRadius, [
{
fill: 'hsl(140,45%,50%)',
ratio: 0.65
},
{
fill: 'hsl(200,60%,60%)',
ratio: 0.2
},
{
fill: 'hsl(50,50%,50%)',
ratio: 0.1
},
{
fill: 'hsl(0,0%,80%)',
ratio: 0.5
},
]));
get('#svg').appendChild(pie(100,200, commitRadius, [
{
fill: 'hsl(50,50%,50%)',
ratio: 0.8
},
{
fill: 'hsl(0,0%,80%)',
ratio: 0.2
},
]));
get('#svg').appendChild(mergeWithConflict(100,50));
get('#svg').appendChild(mergeWithoutConflict(100,0));
get('#svg').appendChild(pie(150,150, commitRadius, [
{
fill: 'hsl(140,45%,50%)',
ratio: 0.4
},
{
fill: 'hsl(200,60%,60%)',
ratio: 0.6
},
]));
get('#svg').appendChild(pie(200,150, commitRadius, [
{
fill: 'hsl(140,45%,50%)',
ratio: 0.8
},
{
fill: 'hsl(50,50%,50%)',
ratio: 0.2
},
]));
get('#svg').appendChild(pie(100,250, commitRadius, [
{
fill: 'hsl(140,45%,50%)',
ratio: 0.5
},
{
fill: 'hsl(200,60%,60%)',
ratio: 0.5
},
]));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment