@@ -28,6 +28,10 @@ var scatterPlot = function chart() {
2828 * @member cs
2929 */
3030 var cs = {
31+ palette : {
32+ pointFill : '#005792' ,
33+ pointStroke : '#d1f4fa'
34+ } ,
3135 x : {
3236 domain : [ ] ,
3337 range : [ ] ,
@@ -36,87 +40,81 @@ var scatterPlot = function chart() {
3640 y : {
3741 axisWidth : 30 ,
3842 ticks : 5
43+ } ,
44+ r : {
45+ width : 5
3946 }
4047 } ;
41- var points = svgContainer . selectAll ( 'circle' ) . data ( this . ds ) ;
48+
4249 /**
4350 * Runs when a new element is added to the dataset
4451 * @member enter
4552 * @function
46- * @param {Object } p (svg element)
53+ * @param {Object } points (svg element)
4754 */
48- var enter = function enter ( p ) {
49- p . enter ( ) . append ( 'circle' ) . attr ( 'class' , _this . selector ) . attr ( 'r' , 2 ) . on ( 'mouseover' , function ( d ) {
50- _this . addTooltip ( d , window . event ) ;
51- } ) . on ( 'mouseout' , function ( d ) {
52- _this . removeTooltip ( d ) ;
53- } ) . attr ( 'cx' , function ( d ) {
54- return cs . x . scale ( d . dim ) + cs . y . axisWidth + 5 ;
55+ var enter = function enter ( points ) {
56+ points . enter ( ) . append ( 'circle' ) . attr ( 'class' , _this . selector ) . attr ( 'r' , cs . r . width ) . attr ( 'cx' , function ( d ) {
57+ return cs . x . scale ( d . metric [ 0 ] ) + cs . y . axisWidth + 5 ;
5558 } ) . attr ( 'cy' , function ( d ) {
56- return cs . y . scale ( d . metric ) ;
59+ return cs . y . scale ( d . metric [ 1 ] ) ;
5760 } ) ;
5861 return points ;
5962 } ;
6063 /**
6164 * Runs when a value of an element in dataset is changed
6265 * @member transition
6366 * @function
64- * @param {Object } p (svg element)
67+ * @param {Object } points (svg element)
6568 */
66- var transition = function transition ( p ) {
67- p . transition ( ) . attr ( 'cx' , function ( d ) {
68- return cs . x . scale ( d . dim ) + cs . y . axisWidth + 5 ;
69+ var transition = function transition ( points ) {
70+ points . transition ( ) . attr ( 'r' , cs . r . width ) . attr ( 'cx' , function ( d ) {
71+ return cs . x . scale ( d . metric [ 0 ] ) + cs . y . axisWidth + 5 ;
6972 } ) . attr ( 'cy' , function ( d ) {
70- return cs . y . scale ( d . metric ) ;
71- } ) . attr ( 'cx' , function ( d ) {
72- return cs . x . scale ( d . dim ) + cs . y . axisWidth + 5 ;
73- } ) . attr ( 'cy' , function ( d ) {
74- return cs . y . scale ( d . metric ) ;
73+ return cs . y . scale ( d . metric [ 1 ] ) ;
7574 } ) ;
7675 return points ;
7776 } ;
77+
7878 /**
7979 * Runs when an element is removed from the dataset
8080 * @member exit
8181 * @function
82- * @param {Object } rect (svg element)
82+ * @param {Object } points (svg element)
8383 */
84- var exit = function exit ( ) {
84+ var exit = function exit ( points ) {
8585 points . exit ( ) . remove ( ) ;
8686 return points ;
8787 } ;
88+
8889 /**
8990 * Builds the scales for the x and y axes
9091 * @member buildScales
9192 * @function
9293 */
93- var buildScales = function buildScales ( ) {
94- cs . y . scale = d3 . scaleLinear ( ) . domain ( [ _this . min , _this . max ] ) . range ( [ _this . displayHeight - cs . x . axisHeight , _this . header ] ) ;
95- cs . y . axis = d3 . axisLeft ( ) . ticks ( cs . y . ticks , 's' ) . scale ( cs . y . scale ) ;
96- _this . ds . forEach ( function ( t ) {
97- return cs . x . domain . push ( t . dim ) ;
98- } ) ;
99- _this . ds . forEach ( function ( t , i ) {
100- return cs . x . range . push ( ( _this . width * i - _this . header ) / _this . ds . length ) ;
101- } ) ;
102- cs . x . scale = d3 . scaleOrdinal ( ) . domain ( cs . x . domain ) . range ( cs . x . range ) ;
94+ var buildScales = function buildScales ( cs ) {
95+ cs . y . scale = d3 . scaleLinear ( ) . domain ( [ _this . minTriplet . v2 , _this . maxTriplet . v2 ] ) . range ( [ _this . displayHeight - cs . x . axisHeight , _this . header ] ) ;
96+ cs . x . scale = d3 . scaleLinear ( ) . domain ( [ _this . minTriplet . v1 , _this . maxTriplet . v1 ] ) . range ( [ 0 , _this . width ] ) ;
10397 } ;
10498 /**
10599 * Draws the x and y axes on the svg
106100 * @member drawAxis
107101 * @function
108102 */
109- var drawAxis = function drawAxis ( ) {
103+ var drawAxis = function drawAxis ( cs ) {
110104 cs . x . axis = d3 . axisBottom ( ) . scale ( cs . x . scale ) ;
111105 cs . x . xOffset = cs . y . axisWidth + 5 ;
112- cs . x . yOffset = _this . height - cs . x . axisHeight ;
106+ cs . x . yOffset = _this . displayHeight - cs . x . axisHeight ;
107+ cs . y . axis = d3 . axisLeft ( ) . ticks ( cs . y . ticks , 's' ) . scale ( cs . y . scale ) ;
113108 cs . y . xOffset = cs . y . axisWidth ;
114109 cs . y . yOffset = 0 ;
115110 svgContainer . append ( 'g' ) . attr ( 'class' , 'axis' ) . attr ( 'transform' , 'translate(' + cs . x . xOffset + ', ' + cs . x . yOffset + ')' ) . call ( cs . x . axis ) ;
116111 svgContainer . append ( 'g' ) . attr ( 'class' , 'axis' ) . attr ( 'transform' , 'translate(' + cs . y . xOffset + ',' + cs . y . yOffset + ')' ) . call ( cs . y . axis ) ;
117112 } ;
118113
114+ var points = svgContainer . selectAll ( 'circle' ) . data ( this . ds ) ;
115+
119116 cs = this . setOverrides ( cs , this . chartData . overrides ) ;
117+
120118 buildScales ( cs ) ;
121119 drawAxis ( cs ) ;
122120 enter ( points ) ;
0 commit comments