Skip to content

Instantly share code, notes, and snippets.

@zeffii
Created December 28, 2013 23:55
Show Gist options
  • Save zeffii/8165788 to your computer and use it in GitHub Desktop.
Save zeffii/8165788 to your computer and use it in GitHub Desktop.
encoder progress indicator
{"description":"encoder progress indicator","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"util.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/O0y0FCT.png"}
d3.select("body").style("background-color", d3.rgb(88,83,76))
var svg = d3.select("svg");
var defs = svg.append("defs");
var group1 = svg.append("g").classed("group1", true);
group1.attr("transform", "translate(" + [37, 150] + ")")
.style({'fill': "none", stroke: "#aeaeae"})
// helpers
var line_len = 120;
var posx = 40;
var posy = 40;
var offsety = 70;
var line_style = {
"stroke-width": 30,
fill: "none",
stroke: "#55A7BB"
};
var line_style = {
"stroke-width": 30,
fill: "none",
stroke: "#55A7BB"
};
var equals_top = group1.append("line")
.attr({
x1: posx, y1: posy,
x2: posx+line_len, y2: posy
})
.style(line_style)
var equals_bottom = group1.append("line")
.attr({
x1: posx, y1: posy + offsety,
x2: posx+line_len, y2: posy + offsety
})
.style(line_style)
var bigger_than = group1.append("path")
.attr("id", "fork")
.attr({d: function(){
// three points
var px1 = posx+line_len;
var py1 = posy - offsety/2;
var px3 = posx+line_len;
var py3 = posy + (1.5 * offsety);
var px2 = px1 + offsety;
var py2 = (py1 + py3) / 2;
return "M"+ [px1, py1,px2, py2,px3, py3]
}
})
.style(line_style)
.style("stroke", "#06BEBE")
var angle = 50;
var count = 0;
d3.timer(function() {
count++;
var tg = d3.select("#fork");
tg.attr("transform", function() {
var x_pos = Math.sin(count/Math.PI/8);
return "translate("+ [24 + x_pos*10, 0] + ")";
});
});
function draw_link(data){
var bp = d3.select(".group1")
.append("g")
.attr({
"transform": "translate(" + [0, 19] + ")"
})
.append("a")
.attr({
"xlink:href": "http://wtf",
"xlink:show": "new",
"cursor": "pointer"
})
bp.append("text")
.text("download here")
.classed("link_label", true)
.style(link_style)
.attr({"x": 28, "y": 16})
}
/* EOF */
.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969; }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment