Scatterplot: wind down current development, fix label assignment, flatten model config, style fixes

config/plugins/visualizations/scatterplot/src/handlebars/chartcontrol.handlebars

@@ -34,13 +34,13 @@
 
 <div data-config-key="X-axis-label"class="text-input form-input">
     <label for="X-axis-label">Re-label the X axis: </label>
-    <input type="text" name="X-axis-label" id="X-axis-label" value="{{x.label}}" />
+    <input type="text" name="X-axis-label" id="X-axis-label" value="{{xLabel}}" />
     <p class="form-help help-text-small"></p>
 </div>
 
 <div data-config-key="Y-axis-label" class="text-input form-input">
     <label for="Y-axis-label">Re-label the Y axis: </label>
-    <input type="text" name="Y-axis-label" id="Y-axis-label" value="{{y.label}}" />
+    <input type="text" name="Y-axis-label" id="Y-axis-label" value="{{yLabel}}" />
     <p class="form-help help-text-small"></p>
 </div>
 

config/plugins/visualizations/scatterplot/src/handlebars/datacontrol.handlebars

@@ -17,8 +17,8 @@
 </div>
 
 <p class="help-text help-text-small">
-    <b>Note</b>: If it can be determined from the dataset's filetype that column is not numeric, that
-    column choice may be disabled for either the x or y axis.
+    <b>Note</b>: If it can be determined from the dataset's filetype that a column is not numeric,
+    that column choice may be disabled for either the x or y axis.
 </p>
 
 <button class="render-button btn btn-primary active">Draw</button>

config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js

@@ -1,5 +1,6 @@
 /* =============================================================================
 todo:
+    localize
     import button(display), func(model) - when user doesn't match
     Move margins into wid/hi calcs (so final svg dims are w/h)
     Better separation of AJAX in scatterplot.js (maybe pass in function?)
@@ -141,18 +142,18 @@ var ScatterplotConfigEditor = Backbone.View.extend( LoggableMixin ).extend({
     
     /** tab content to control how the chart is rendered (data glyph size, chart size, etc.) */
     _render_chartControls : function( $where ){
+//TODO: as controls on actual chart
         $where = $where || this.$el;
         var editor = this,
             config = this.model.get( 'config' ),
             $chartControls = $where.find( '#chart-control' );
-
+            
         // ---- skeleton/form for controls
         $chartControls.html( ScatterplotConfigEditor.templates.chartControl( config ) );
         //console.debug( '$chartControl:', $chartControls );
 
         // ---- slider controls
         // limits for controls (by control/chartConfig id)
-        //TODO: as class attribute
         var controlRanges = {
                 'datapointSize' : { min: 2, max: 10, step: 1 },
                 'width'         : { min: 200, max: 800, step: 20 },

config/plugins/visualizations/scatterplot/src/scatterplot-display.js

@@ -184,7 +184,7 @@ var ScatterplotDisplay = Backbone.View.extend({
         //console.debug( JSON.stringify( stats, null, '  ' ) );
         var config = this.model.get( 'config' ),
             $statsTable = this.$el.find( '.stats-display' ),
-            xLabel = config.x.label, yLabel = config.y.label,
+            xLabel = config.xLabel, yLabel = config.yLabel,
             $table = $( '<table/>' ).addClass( 'table' )
                 .append([ '<thead><th></th><th>', xLabel, '</th><th>', yLabel, '</th></thead>' ].join( '' ))
                 .append( _.map( stats, function( stat, key ){

config/plugins/visualizations/scatterplot/src/scatterplot.js

@@ -73,19 +73,19 @@ function scatterplot( renderTo, config, data ){
 
     // .................................................................... axes
     var axis = { x : {}, y : {} };
-    //console.log( 'x.ticks:', config.x.ticks );
-    //console.log( 'y.ticks:', config.y.ticks );
+    //console.log( 'xTicks:', config.xTicks );
+    //console.log( 'yTicks:', config.yTicks );
     axis.x.fn = d3.svg.axis()
         .orient( 'bottom' )
         .scale( interpolaterFns.x )
-        .ticks( config.x.ticks )
+        .ticks( config.xTicks )
         // this will convert thousands -> k, millions -> M, etc.
         .tickFormat( d3.format( 's' ) );
 
     axis.y.fn = d3.svg.axis()
         .orient( 'left' )
         .scale( interpolaterFns.y )
-        .ticks( config.y.ticks )
+        .ticks( config.yTicks )
         .tickFormat( d3.format( 's' ) );
 
     axis.x.g = content.append( 'g' )
@@ -103,8 +103,9 @@ function scatterplot( renderTo, config, data ){
     var padding = 6;
     // x-axis label
     axis.x.label = svg.append( 'text' )
+        .attr( 'id', 'x-axis-label' )
         .attr( 'class', 'axis-label' )
-        .text( config.x.label )
+        .text( config.xLabel )
         // align to the top-middle
         .attr( 'text-anchor', 'middle' )
         .attr( 'dominant-baseline', 'text-after-edge' )
@@ -117,8 +118,9 @@ function scatterplot( renderTo, config, data ){
     // y-axis label
     // place 4 pixels left of the axis.y.g left edge
     axis.y.label = svg.append( 'text' )
+        .attr( 'id', 'y-axis-label' )
         .attr( 'class', 'axis-label' )
-        .text( config.y.label )
+        .text( config.yLabel )
         // align to bottom-middle
         .attr( 'text-anchor', 'middle' )
         .attr( 'dominant-baseline', 'text-before-edge' )