init({
range: [ [ -2, 17 ], [ -3, 12 ] ],
scale: [ 30, 30 ]
});
addMouseLayer();
for ( var y = 1; y <= 10; ++y ) {
label( [ 0, y ], y, "left", false );
style({ stroke: "#000", strokeWidth: 1, opacity: 0.2 }, function() {
line( [ 0, y ], [ 16, y ] )
});
}
graph.leftPoints = [];
graph.rightPoints = [];
graph.lines = [];
for ( var index = 0; index < CATEGORIES.length; ++index ) {
graph.leftPoints[ index ] = addMovablePoint({ coord: [ index * 3 + 1, 0.5 ], visible: false });
graph.rightPoints[ index ] = addMovablePoint({ coord: [ index * 3 + 3, 0.5 ], visible: false });
graph.lines[ index ] = addMovableLineSegment({ pointA: graph.leftPoints[ index ], pointZ: graph.rightPoints[ index ], snapY: 0.5, constraints: { constrainX: true } });
// graph.lines[ index ] = {};
style({ stroke: "none", fill: "#9ab8ed", opacity: 1.0 }, function() {
graph.lines[ index ].bar = path([ [ index * 3 + 1, 0 ], [ index * 3 + 1, 0.5 ], [ index * 3 + 3, 0.5 ], [ index * 3 + 3, 0 ], [ index * 3 + 1, 0 ] ]);
});
// graph.lines[ index ].toFront();
label( [ index * 3 + 2, 0 ], CATEGORIES[ index ], "below", false ).css( "text-transform", "capitalize" );
var bar = index;
graph.lines[ index ].onMove = function( dX, dY ) {
if ( this.coordA[1] < 0 || this.coordA[1] > 10 ) {
this.coordA[1] -= dY;
this.coordZ[1] -= dY;
}
this.pointA.setCoord([ this.pointA.coord[0], this.coordA[1] ]);
this.pointZ.setCoord([ this.pointZ.coord[0], this.coordA[1] ]);
this.pointA.updateLineEnds();
this.pointZ.updateLineEnds();
this.bar.scale( 1, Math.max( 0.01, this.coordA[1] * 2 ), scalePoint( 0 )[0], scalePoint( 0 )[1] );
};
}
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 }, function() {
line( [ 0, 0 ], [ 16, 0 ] );
line( [ 0, 0 ], [ 0, 10 ] );
});
label( [ 8, -0.8 ], "<b>" + SUBJECT + "</b>", "below", false ).css( "text-transform", "capitalize" );
jQuery( label( [ -1.5, 5 ], "<b>Number of " + plural( RESPONDENT ) + "</b>", "center", false ) ).addClass( "rotate" );
label( [ 8, 10.5 ], "<b>Favorite " + SUBJECT + "s</b>", "above", false );
Create a bar chart by dragging the top of each bar up and down.
jQuery.map( new Array( 5 ), function( val, n ) { return graph.lines[ n ].coordA[1]; })
if ( _.isEqual( guess, [ 0.5, 0.5, 0.5, 0.5, 0.5 ] ) ) {
return "";
}
return _.isEqual( guess, DATA );
jQuery.each( guess, function( index ) {
graph.lines[ index ].pointA.setCoord([ graph.lines[ index ].pointA.coord[0], this ]);
graph.lines[ index ].pointZ.setCoord([ graph.lines[ index ].pointZ.coord[0], this ]);
graph.lines[ index ].pointA.updateLineEnds();
graph.lines[ index ].pointZ.updateLineEnds();
graph.lines[ index ].bar.scale( 1, Math.max( 0.01, this * 2 ), scalePoint( 0 )[0], scalePoint( 0 )[1] );
});