diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index 735733e..77c70a6 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -132,8 +132,97 @@
                 $log.warn('SvgUtilService: loadGlow -- To Be Implemented');
             }
 
+            // --- Ordinal scales for 7 values.
+            // TODO: tune colors for light and dark themes
+            // Note: These colors look good on the white background. Still, need to tune for dark.
+
+            //               blue       brown      brick red  sea green  purple     dark teal  lime
+            var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
+                lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
+
+                darkNorm  = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
+                darkMute  = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'];
+
+            var colors= {
+                light: {
+                    norm: d3.scale.ordinal().range(lightNorm),
+                    mute: d3.scale.ordinal().range(lightMute)
+                },
+                dark: {
+                    norm: d3.scale.ordinal().range(darkNorm),
+                    mute: d3.scale.ordinal().range(darkMute)
+                }
+            };
+
             function cat7() {
-                $log.warn('SvgUtilService: cat7 -- To Be Implemented');
+                var tcid = 'd3utilTestCard';
+
+                function getColor(id, muted, theme) {
+                    // NOTE: since we are lazily assigning domain ids, we need to
+                    //       get the color from all 4 scales, to keep the domains
+                    //       in sync.
+                    var ln = colors.light.norm(id),
+                        lm = colors.light.mute(id),
+                        dn = colors.dark.norm(id),
+                        dm = colors.dark.mute(id);
+                    if (theme === 'dark') {
+                        return muted ? dm : dn;
+                    } else {
+                        return muted ? lm : ln;
+                    }
+                }
+
+                function testCard(svg) {
+                    var g = svg.select('g#' + tcid),
+                        dom = d3.range(7),
+                        k, muted, theme, what;
+
+                    if (!g.empty()) {
+                        g.remove();
+
+                    } else {
+                        g = svg.append('g')
+                            .attr('id', tcid)
+                            .attr('transform', 'scale(4)translate(20,20)');
+
+                        for (k=0; k<4; k++) {
+                            muted = k%2;
+                            what = muted ? ' muted' : ' normal';
+                            theme = k < 2 ? 'light' : 'dark';
+                            dom.forEach(function (id, i) {
+                                var x = i * 20,
+                                    y = k * 20,
+                                    f = get(id, muted, theme);
+                                g.append('circle').attr({
+                                    cx: x,
+                                    cy: y,
+                                    r: 5,
+                                    fill: f
+                                });
+                            });
+                            g.append('rect').attr({
+                                x: 140,
+                                y: k * 20 - 5,
+                                width: 32,
+                                height: 10,
+                                rx: 2,
+                                fill: '#888'
+                            });
+                            g.append('text').text(theme + what)
+                                .attr({
+                                    x: 142,
+                                    y: k * 20 + 2,
+                                    fill: 'white'
+                                })
+                                .style('font-size', '4pt');
+                        }
+                    }
+                }
+
+                return {
+                    testCard: testCard,
+                    getColor: getColor
+                };
             }
 
             function translate(x, y) {