Create labels from numeric data with quantize scales.

.idea/workspace.xml

@@ -2,9 +2,6 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/v4-tutorial.iml" afterPath="$PROJECT_DIR$/.idea/v4-tutorial.iml" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -39,8 +36,8 @@
       <file leaf-file-name="app.js" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/app.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="224">
-              <caret line="16" column="0" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" />
+            <state relative-caret-position="182">
+              <caret line="13" column="0" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -253,12 +250,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="2071000" />
+      <workItem from="1478355760990" duration="2515000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="2071000" />
+    <option name="totallyTimeSpent" value="2515000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="284" y="23" width="1152" height="877" extended-state="0" />
@@ -372,8 +369,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="224">
-          <caret line="16" column="0" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" />
+        <state relative-caret-position="182">
+          <caret line="13" column="0" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" />
           <folding />
         </state>
       </provider>

src/app.js

@@ -1,16 +1,13 @@
-var timeScale = d3.scaleTime()
-  // Minimum value (01/01/16) to maximum value (today).
-  .domain([new Date(2016, 0, 1), new Date()])
-  .range([0, 100])
-  .clamp(false);
+var quantizeScale = d3.scaleQuantize()
+  .domain([0, 100])
+  .range(["blue", "white", "red"]);
 
-for (var i = 0 ; i < 12 ; i++) {
-  console.log(timeScale(new Date(2016, i, 1)));
-}
-
-// A few milliseconds later.
-console.log(timeScale(new Date()));
+for (var i = 0 ; i <= 100 ; i += 10) {
+  console.log(i, quantizeScale(i));
 
-// Returns a date.
-console.log(timeScale.invert(50));
+}
 
+// Has invertExtent(), not invert(), because values have ranges.
+["blue", "white", "red"].forEach(color => {
+  console.log(quantizeScale.invertExtent(color));
+});