Remove images, replace with d3 icons

This will make it a bit easier to add a new 'icon' for the
new mode I'm working on, and it has the perk of making icons
hidpi-friendly

src/base.html

@@ -7,8 +7,6 @@
   <!-- @@header -->
   <div class="modes">
     <ul class="scale-list">
-      <li class="labelled-icon scale-icon scale-count" data-mode="count"><span>File Count</span></li>
-      <li class="labelled-icon scale-icon scale-size" data-mode="size"><span>File Size</span></li>
     </ul>
   </div>
   <div class="chart"></div>

src/index.js

@@ -268,14 +268,43 @@ domready(function() {
     }
   }
 
-  var modes = d3.selectAll('[data-mode]')
+  var modes = d3.select('.scale-list')
+    .selectAll('li')
+    .data(['count', 'size'])
+    .enter()
+    .append('li')
+    .attr('class', 'scale-icon scale-size')
+    .on('click', function(d) {
+      updateMode(d, true)
+    });
+
+  modes.append('span')
+    .text(function(d) {
+      return {
+        count: 'File Count',
+        size: 'File Size'
+      }[d]
+    })
+
+  modes.append('svg')
+    .attr({ width: 48, height: 48 })
+    .append('g')
+    .each(function(type) {
+      d3.select(this)
+        .attr('transform', 'translate(8, 8)')
+        .selectAll('circle')
+        .data(d3.range(0, 16))
+        .enter()
+        .append('circle').attr('fill', '#fff')
+        .attr('r', function(d, i) {
+          return type === 'size' ? 3 : (i === 0 || i === 6) ? 6 : 3
+        })
+        .attr('transform', function(d) {
+          return 'translate(' + [(d % 4) * 10, Math.floor(d / 4) * 10] + ')'
+        })
+    })
 
   updateMode(modeInitial)
-  modes.on('click', function() {
-    updateMode(
-      this.getAttribute('data-mode')
-    , true)
-  })
 
   function updateMode(mode, update) {
     value = modeFns[mode] || value

src/style.css

@@ -96,17 +96,21 @@ h2 {
   opacity: 1;
 }
 .scale-icon {
-  background-position: right center;
   height: 48px;
   line-height: 48px;
   margin-bottom: 12px;
   cursor: pointer;
-  padding-right: 64px;
   font-size: 1.2em;
   text-align: right;
-  background-repeat: no-repeat;
   opacity: 0.5;
+  padding-right:64px;
   transition: opacity 0.2s;
+  position:relative;
+}
+.scale-icon svg {
+  position:absolute;
+  top:0;
+  right:0;
 }
 .scale-icon:hover span {
   opacity: 1;
@@ -118,8 +122,6 @@ h2 {
   opacity: 0;
   transition: opacity 0.2s, left 0.2s;
 }
-.scale-size  { background-image: inline(icon-size.png); }
-.scale-count { background-image: inline(icon-count.png); }
 
 .scheme-icon.selected .scheme-text {
   display: none;