[ Launch: binned learning curve ] 5754880 by enjalot
[ Launch: binned learning curve ] 5753896 by bollig
[ Launch: learning curve ] 5745518 by enjalot
-
-
Save enjalot/5754880 to your computer and use it in GitHub Desktop.
binned learning curve
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
{"description":"binned learning curve","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"types.json":{"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}},"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/GJi1zFY.png"} |
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
var types = tributary.types; | |
var svg = d3.select("svg"); | |
var yscale = d3.scale.linear() | |
.domain([0, 62]) | |
.range([121, 342]); | |
var duration = 100; | |
// | |
var xscale = d3.scale.ordinal() | |
.domain(d3.range(types.length)) | |
.rangeBands([0, types.length*30],1) | |
// Get all nodes to snap to grid. | |
var xscalebins = d3.scale.linear() | |
.domain(d3.range(types.length)) | |
.range([96, 128]) | |
var xf = function(d,i) { | |
if(!d.x) | |
d.x = xscale(i); | |
return xscalebins(i); | |
} | |
var yf = function(d,i) { | |
if(!d.y) | |
d.y = yscale(d.value); | |
return d.y; | |
} | |
var drag = d3.behavior.drag() | |
.on("drag", function(d,i) { | |
var dx = d3.event.dx; | |
var dy = d3.event.dy; | |
d.x += dx; | |
d.y += dy; | |
update(); | |
}) | |
var curve = d3.svg.line() | |
.x(xf) | |
.y(yf) | |
.interpolate("cardinal") | |
function update() { | |
types.sort(function(a, b) { | |
return a.x - b.x | |
}) | |
var circles = svg.selectAll("circle") | |
.data(types) | |
circles.enter() | |
.append("circle") | |
.call(drag) | |
.attr({ | |
cx: xf, | |
cy: yf, | |
r: 10 | |
}) | |
circles | |
.attr("cy", yf) | |
.transition() | |
.duration(duration) | |
.attr({ | |
cx: xf, | |
r: 10 | |
}) | |
var texts = svg.selectAll("text") | |
.data(types) | |
texts.enter() | |
.append("text") | |
texts | |
.text(function(d) { return d.type }) | |
.transition() | |
.duration(duration) | |
.attr("transform", function(d,i) { | |
var x = xf(d,i) + 12 | |
var y = yf(d,i) + -10 | |
return "translate(" + [x,y] + ")rotate(-36)"; | |
}).style({ | |
"font-size": 10 | |
}) | |
var paths = svg.selectAll("path") | |
.data([types]) | |
paths | |
.enter() | |
.append("path") | |
paths | |
.transition() | |
.duration(duration) | |
.attr("d", curve(types)); | |
} | |
update() | |
svg.append("path") | |
console.log(types) | |
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
path { | |
fill: none; | |
stroke: #000000; | |
stroke-width: 3; | |
pointer-events: none; | |
} | |
circle { | |
opacity: 0.2 | |
} | |
text { | |
pointer-events: none; | |
} |
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
[ | |
{"type":"Started", "value": 0}, | |
{"type":"Selections", "value":62}, | |
{"type":"Scales", "value":50}, | |
{"type":"Layouts", "value":43}, | |
{"type":"SVG", "value":32}, | |
{"type":"Arrays", "value":31}, | |
{"type":"Transitions", "value":24}, | |
{"type":"Time", "value":10}, | |
{"type":"Geo", "value":10}, | |
{"type":"Geom", "value":10}, | |
{"type":"Strings", "value":15}, | |
{"type":"Colors", "value":15}, | |
{"type":"Math", "value":12}, | |
{"type":"AJAX", "value":12}, | |
{"type":"Namespaces", "value":10}, | |
{"type":"Internals", "value":10}, | |
{"type":"Behaviors", "value":4} | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment