Moved away from SVG CSS to attrib due to Internet Explorer deficiency

monfera · Oct 24, 2015 · 65911f7 · 65911f7
1 parent 08db646
commit 65911f7
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/bandline.css b/bandline.css
@@ -46,24 +46,7 @@ g.bandLine .valuePoints {
     fill: rgb(226, 60, 180);
 }
 
-.valuePoints .point {
-    vector-effect: non-scaling-stroke;
-}
-
-g.sparkStrip .valuePoints .point {
-    transform: scale(2);
-}
-
-g.bandLine .valuePoints .point {
-    transform: scale(1.5);
-}
-
-g.bandLine .valuePoints .point.lowOutlier {
-    transform: scale(3);
-}
-
 g.bandLine .valuePoints .point.highOutlier {
-    transform: scale(2.5);
     fill: white;
     stroke: rgb(226, 60, 180);
 }
diff --git a/bandline.js b/bandline.js
@@ -39,7 +39,7 @@ function pointData(valueAccessor, d) {
     return valueAccessor(d).map(function(value, i) {return {key: i, value: value, dd: d}}).filter(compose(defined, value))
 }
 
-function renderPoints(root, valueAccessor, pointStyleAccessor, xSpec, ySpec) {
+function renderPoints(root, valueAccessor, pointStyleAccessor, rScale, xSpec, ySpec) {
     bind(root, 'valuePoints', 'g', pointData.bind(0, valueAccessor))
         .entered
         .attr('transform', translate(xSpec, ySpec))
@@ -48,8 +48,7 @@ function renderPoints(root, valueAccessor, pointStyleAccessor, xSpec, ySpec) {
         .attr('transform', translate(xSpec, ySpec))
     bind(root['valuePoints'], 'point', 'circle')
         .attr('class', function(d) {return 'point ' + pointStyleAccessor(d.value)})
-        .entered
-        .attr('r', 1)
+        .attr('r', function(d) {return rScale(pointStyleAccessor(d.value))})
     root['valuePoints'].exit().remove()
 }
 
@@ -88,27 +87,27 @@ function renderAxis(root, yAxis, xScale, yScaler) {
 }
 
 function bandLine() {
-    function renderBandLine(root, vm) {
+    function renderBandLine(root) {
 
         var bandLine = bind(root, 'bandLine')
         renderBands(bandLine, _bands, _yScalerOfBandLine, constant(_xScaleOfBandLine.range()), function (d) {
             return d.value.map(d.yScale)
         })
         renderValueLine(bandLine, _valueAccessor, _xScaleOfBandLine, _yScalerOfBandLine)
         renderAxis(bandLine, _yAxis, _xScaleOfBandLine, _yScalerOfBandLine)
-        renderPoints(bandLine, _valueAccessor, _pointStyleAccessor, compose(_xScaleOfBandLine, key), function (d) {
+        renderPoints(bandLine, _valueAccessor, _pointStyleAccessor, _rScaleOfBandLine, compose(_xScaleOfBandLine, key), function (d) {
             return _yScalerOfBandLine(d.dd)(d.value)
         })
     }
 
-    function renderSparkStrip(root, vm) {
+    function renderSparkStrip(root) {
 
         var sparkStrip = bind(root, 'sparkStrip')
         renderBands(sparkStrip, _bands, _yScalerOfSparkStrip, function (d) {
             return d.value.map(_xScaleOfSparkStrip)
         }, constant(_yRange))
         renderExtent(sparkStrip, _valueAccessor, _xScaleOfSparkStrip, _yRange)
-        renderPoints(sparkStrip, _valueAccessor, _pointStyleAccessor, compose(_xScaleOfSparkStrip, value), _yScalerOfSparkStrip())
+        renderPoints(sparkStrip, _valueAccessor, _pointStyleAccessor,  _rScaleOfSparkStrip, compose(_xScaleOfSparkStrip, value), _yScalerOfSparkStrip())
     }
 
     function yScalerOfBandLineCalc() {
@@ -158,6 +157,26 @@ function bandLine() {
         }
     }
 
+    var _rScaleOfBandLine = constant(2)
+    var rScaleOfBandLine = function(spec) {
+        if(spec !== void(0)) {
+            _rScaleOfBandLine = spec
+            return obj
+        } else {
+            return _rScaleOfBandLine
+        }
+    }
+
+    var _rScaleOfSparkStrip = constant(2)
+    var rScaleOfSparkStrip = function(spec) {
+        if(spec !== void(0)) {
+            _rScaleOfSparkStrip = spec
+            return obj
+        } else {
+            return _rScaleOfSparkStrip
+        }
+    }
+
     var _yRange = [0, 1]
     var _yScalerOfSparkStrip
     var _yScalerOfBandLine
@@ -199,6 +218,8 @@ function bandLine() {
         valueAccessor: valueAccessor,
         xScaleOfBandLine: xScaleOfBandLine,
         xScaleOfSparkStrip: xScaleOfSparkStrip,
+        rScaleOfBandLine: rScaleOfBandLine,
+        rScaleOfSparkStrip: rScaleOfSparkStrip,
         yRange: yRange,
         yAxis: yAxis,
         pointStyleAccessor: pointStyleAccessor

diff --git a/model.js b/model.js
@@ -401,6 +401,11 @@ function calculateScales() {
         return population.filter(defined).sort(d3.ascending)
     }
 
+    var outlierClassifications = ['lowOutlier', 'normal', 'highOutlier']
+    var outlierClassificationIndex = function(classification) {
+        return outlierClassifications.indexOf(classification)
+    }
+
     function makeOutlierScale(population) {
         var iqrDistanceMultiplier = 1 // Stephen Few's Introduction of Bandlines requires a multiplier of 1.5; we deviate here to show outliers on the dashboard
         var values = sortedNumbers(population)
@@ -410,7 +415,7 @@ function calculateScales() {
             .domain([
                 iqr[0] - iqrDistanceMultiplier * midspread,
                 iqr[1] + iqrDistanceMultiplier * midspread ])
-            .range(['lowOutlier', 'normal', 'highOutlier'])
+            .range(outlierClassifications)
     }
 
     function medianLineBand(population) {
@@ -427,6 +432,13 @@ function calculateScales() {
     s.assignmentBands = window2(bandThresholds).concat([medianLineBand(assignmentScores)])
     s.assessmentBands = window2(bandThresholds).concat([medianLineBand(assessmentScores)])
 
+    s.bandLinePointRScale = function(classification) {
+        return [2.5, 1.5, 3][outlierClassificationIndex(classification)]
+    }
+    s.sparkStripPointRScale = function(classification) {
+        return 2 // r = 2 on the spark strip irrespective of possible outlier status
+    }
+
     var assignmentScoreVerticalDomain = d3.extent(bandThresholds) // fixme adapt the scale for the actual score domain
 
     var assignmentScoreCount = 7 //  5 past assignments and 2 future assignments

diff --git a/render.js b/render.js
@@ -914,6 +914,8 @@ function render() {
         .pointStyleAccessor(s.assignmentOutlierScale)
         .xScaleOfBandLine(s.assignmentScoreTemporalScale)
         .xScaleOfSparkStrip(s.assignmentScoreTemporalScale2)
+        .rScaleOfBandLine(s.bandLinePointRScale)
+        .rScaleOfSparkStrip(s.sparkStripPointRScale)
         .yRange(s.assignmentScoreVerticalScale.range())
         .yAxis(false)
 
@@ -938,6 +940,7 @@ function render() {
             .valueAccessor(property('standardScores'))
             .pointStyleAccessor(s.assessmentOutlierScale)
             .xScaleOfBandLine(s.assessmentScoreTemporalScale)
+            .rScaleOfBandLine(s.bandLinePointRScale)
             .yRange(s.assessmentScoreScale.range())
             .yAxis(false)
     ;(function renderAssessmentScores(root) {
@@ -1249,6 +1252,7 @@ function render() {
             .valueAccessor(property('assignmentScores'))
             .pointStyleAccessor(s.assignmentOutlierScale)
             .xScaleOfBandLine(s.assignmentScoreTemporalScale)
+            .rScaleOfBandLine(s.bandLinePointRScale)
             .yRange(s.assignmentScoreVerticalScaleLarge.range())
             .yAxis(d3.svg.axis().orient('right').ticks(4).tickFormat(d3.format('%')))
         root['assignmentAggregateMetrics'].call(aggregateAssignmentBandLine.renderBandLine)