Skip to content

Commit

Permalink
add multiline
Browse files Browse the repository at this point in the history
  • Loading branch information
@chmille4
chmille4 committed Aug 5, 2016
1 parent 98caa29 commit 77809f0
Show file tree
Hide file tree
Showing 13 changed files with 995 additions and 319 deletions.
694 changes: 514 additions & 180 deletions iobio.viz.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions iobio.viz.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion iobio.viz.min.js
View file

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/css/multiline.css
View file
@@ -0,0 +1,7 @@

.iobio-multi-line .tick text { font-size: 10px; }
.iobio-multi-line .button rect { height: 20px; }
.iobio-multi-line .button rect:hover { cursor: pointer; }
.iobio-multi-line .button text { font-size: 10px; pointer-events: none; }
.iobio-multi-line #back-ctrl { font-size: 15px; fill: #1E7DB3;}
.iobio-multi-line #back-ctrl:hover { cursor: pointer; }
24 changes: 12 additions & 12 deletions src/layout/pointSmooth.js
View file
Expand Up @@ -9,21 +9,21 @@ var pointSmooth = function() {

function layout(data) {

// Compute the numeric values for each data element and keep original data.
var points = data.map(function(d, i) {
// Compute the numeric values for each data element and keep original data.
var points = data.map(function(d, i) {
return {
data: d,
pos: +pos.call(layout, d, i),
depth: +depth.call(layout, d, i)
};
});

var epislon = parseInt( epsilonRate * (points[points.length-1].pos - points[0].pos) / size );

// Compute the points!
// They are stored in the original data's order.
points = properRDP(points, epislon);
points = properRDP(points, epislon);

return points;
}

Expand Down Expand Up @@ -51,7 +51,7 @@ var pointSmooth = function() {

/*
* Specifies the x scale for the layout. This is necessary to accurately predict
* how smoothing will be necessary i.e. smaller size has less resolution and will
* how smoothing will be necessary i.e. smaller size has less resolution and will
* require more smoothing.
*/
layout.size = function(_) {
Expand All @@ -61,7 +61,7 @@ var pointSmooth = function() {
};

/*
* Specifies the epislon rate to determine the aggressiveness of the smoothing
* Specifies the epislon rate to determine the aggressiveness of the smoothing
*/
layout.epsilonRate = function(_) {
if (!arguments.length) return epsilonRate;
Expand All @@ -77,13 +77,13 @@ module.exports = pointSmooth;

/*
* properRDP
*
*
* @licence Feel free to use it as you please, a mention of my name is always nice.
*
*
* Marius Karthaus
* http://www.LowVoice.nl
*
*/
*
*/

function properRDP(points,epsilon){
var firstPoint=points[0];
Expand Down Expand Up @@ -126,6 +126,6 @@ function findPerpendicularDistance(p, p1,p2) {
intercept = p1.depth - (slope * p1.pos);
result = Math.abs(slope * p.pos - p.depth + intercept) / Math.sqrt(Math.pow(slope, 2) + 1);
}

return result;
}
16 changes: 8 additions & 8 deletions src/viz/alignment.js
View file
Expand Up @@ -57,9 +57,9 @@ var alignment = function() {
aln.enter().append('g')
.attr('id', function(d) { return id(d)})
.attr('class', 'alignment')
.attr('transform', function(d) {
var translate = 'translate('+parseInt(x(xValue(d) + wValue(d)/2))+','+ parseInt(y(yValue(d))-elemHeight/2) + ')'
if (directionValue && directionValue(d) == 'reverse')
.attr('transform', function(d,i) {
var translate = 'translate('+parseInt(x(xValue(d,i) + wValue(d,i)/2))+','+ parseInt(y(yValue(d,i))-elemHeight/2) + ')'
if (directionValue && directionValue(d,i) == 'reverse')
return translate + ' rotate(180)';
else
return translate;
Expand Down Expand Up @@ -89,9 +89,9 @@ var alignment = function() {

aln.transition()
.duration(transitionDuration)
.attr('transform', function(d) {
var translate = 'translate('+parseInt(x(xValue(d) + wValue(d)/2))+','+ parseInt(y(yValue(d))-elemHeight/2) + ')'
if (directionValue && directionValue(d) == 'reverse')
.attr('transform', function(d,i) {
var translate = 'translate('+parseInt(x(xValue(d,i) + wValue(d,i)/2))+','+ parseInt(y(yValue(d,i))-elemHeight/2) + ')'
if (directionValue && directionValue(d,i) == 'reverse')
return translate + ' rotate(180)';
else
return translate;
Expand All @@ -100,8 +100,8 @@ var alignment = function() {

aln.select('polygon').transition()
.duration(transitionDuration)
.attr('points', function(d) {
var rW = x(xValue(d)+wValue(d)) - x(xValue(d));
.attr('points', function(d,i) {
var rW = x(xValue(d,i)+wValue(d,i)) - x(xValue(d,i));
var rH = elemHeight;
var arrW = Math.min(5, rW);

Expand Down
14 changes: 7 additions & 7 deletions src/viz/bar.js
View file
Expand Up @@ -40,7 +40,7 @@ var bar = function() {
// enter
var g = selection.select('g.iobio-container').classed('iobio-bar', true);; // grab container to draw into (created by base chart)
var rect = g.selectAll('.rect')
.data(selection.datum(), function(d) { return xValue(d); })
.data(selection.datum(), function(d,i) { return xValue(d,i); })
// exit
rect.exit().remove();

Expand All @@ -51,19 +51,19 @@ var bar = function() {
.style('fill', color )
.append('rect')
.attr('y', function(d) { return innerHeight })
.attr('x', function(d) { return x(xValue(d)) })
.attr('width', function(d) { return x(xValue(d)+wValue(d)) - x(xValue(d));})
.attr('x', function(d,i) { return x(xValue(d,i)) })
.attr('width', function(d,i) { return x(xValue(d,i)+wValue(d,i)) - x(xValue(d,i));})
.attr('height', function(d) { return 0; });

// update
rect
.style('fill', color )
.select('rect').transition()
.duration( transitionDuration )
.attr('x', function(d) { return x(xValue(d)) })
.attr('y', function(d) { return y(yValue(d)) })
.attr('width', function(d) { return x(xValue(d)+wValue(d)) - x(xValue(d));})
.attr('height', function(d) { return innerHeight - y(yValue(d)); });
.attr('x', function(d,i) { return x(xValue(d,i)) })
.attr('y', function(d,i) { return y(yValue(d,i)) })
.attr('width', function(d,i) { return x(xValue(d,i)+wValue(d,i)) - x(xValue(d,i));})
.attr('height', function(d,i) { return innerHeight - y(yValue(d,i)); });


// Add title on hover
Expand Down
4 changes: 2 additions & 2 deletions src/viz/barViewer.js
View file
Expand Up @@ -66,8 +66,8 @@ var barViewer = function() {
.brush('brush', function() {
var x2 = globalBar.x(), brush = globalBar.brush();
var x = brush.empty() ? x2.domain() : brush.extent();
var datum = globalSelection.datum().filter(function(d) {
return (globalBar.xValue()(d) >= x[0] && globalBar.xValue()(d) <= x[1])
var datum = globalSelection.datum().filter(function(d,i) {
return (globalBar.xValue()(d,i) >= x[0] && globalBar.xValue()(d,i) <= x[1])
});
options.xMin = x[0];
options.xMax = x[1];
Expand Down
112 changes: 64 additions & 48 deletions src/viz/line.js
View file
Expand Up @@ -13,54 +13,70 @@ var line = function(container) {
var defaults = { };

function chart(selection, opts) {
// Merge defaults and options
var options = {};
extend(options, defaults, opts);

// Call base chart
base.call(this, selection, options);

// Grab base functions for easy access
var x = base.x(),
y = base.y(),
id = base.id();
xValue = base.xValue(),
yValue = base.yValue(),
wValue = base.wValue(),
transitionDuration = base.transitionDuration()
color = base.color();

// Draw
var lineGen = d3.svg.line()
.interpolate("linear")
.x(function(d,i) { return +x( xValue(d) ); })
.y(function(d) { return +y( yValue(d) ); })

var g = selection.select('g.iobio-container').classed('iobio-line', true); // grab container to draw into (created by base chart)

// draw line
var gEnter = g.selectAll('.line').data([0])
.enter().append("path")
.attr('class', "line")
.attr("d", lineGen(selection.datum()) )
.style("stroke", color)
.style("stroke-width", "2")
.style("fill", "none");

var path = g.select('path.line');
var totalLength = path.node().getTotalLength();

// draw line from left first time
gEnter
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength);

path
.transition()
.duration( transitionDuration )
.attr('d', lineGen(selection.datum()) )
.ease("linear")
.attr("stroke-dashoffset", 0);

selection.each(function() {
var selection = d3.select(this);


// Merge defaults and options
var options = {};
extend(options, defaults, opts);

if (options.datumTransform) {
selection.datum( options.datumTransform(selection.datum()) );
}

// Call base chart
base.call(this, selection, options);

// Grab base functions for easy access
var x = base.x(),
y = base.y(),
id = base.id();
xValue = base.xValue(),
yValue = base.yValue(),
wValue = base.wValue(),
transitionDuration = base.transitionDuration()
color = base.color();

// Draw
var lineGen = d3.svg.line()
.interpolate("linear")
.x(function(d,i) { return +x( xValue(d,i) ); })
.y(function(d,i) { return +y( yValue(d,i) ); })

var g = selection.select('g.iobio-container').classed('iobio-line', true); // grab container to draw into (created by base chart)

// draw line
var gEnter = g.selectAll('.line').data([0])
.enter().append("path")
.attr('class', "line")
.attr("d", lineGen(selection.datum()) )
.style("stroke", color)
.style("stroke-width", "2")
.style("fill", "none");

var path = g.select('path.line');
var totalLength = path.node().getTotalLength();

// draw line from left first time
gEnter
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength);

path
.transition()
.duration( transitionDuration )
.attr('d', lineGen(selection.datum()) )
.ease("linear")
.attr("stroke-dashoffset", 0)

// Remove stroke-dasharray after done with transition
// precaution for if path is manipulated elsewhere
setTimeout(function(){
path.attr("stroke-dasharray", null)
}, transitionDuration);
})
}

// Rebind methods in base.js to this chart
Expand Down

0 comments on commit 77809f0

Please sign in to comment.