Margin convention.

.idea/workspace.xml

@@ -2,6 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -26,8 +27,8 @@
       <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="280">
-              <caret line="20" column="0" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
+            <state relative-caret-position="154">
+              <caret line="11" column="21" selection-start-line="11" selection-start-column="21" selection-end-line="11" selection-end-column="21" />
               <folding />
             </state>
           </provider>
@@ -36,8 +37,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="227">
-              <caret line="24" column="17" selection-start-line="24" selection-start-column="17" selection-end-line="24" selection-end-column="17" />
+            <state relative-caret-position="476">
+              <caret line="34" column="0" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -157,12 +158,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="13566000" />
+      <workItem from="1478355760990" duration="14794000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="4100000" />
+    <option name="totallyTimeSpent" value="5328000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="899" height="877" extended-state="0" />
@@ -292,16 +293,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="280">
-          <caret line="20" column="0" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
+        <state relative-caret-position="154">
+          <caret line="11" column="21" selection-start-line="11" selection-start-column="21" selection-end-line="11" selection-end-column="21" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="227">
-          <caret line="24" column="17" selection-start-line="24" selection-start-column="17" selection-end-line="24" selection-end-column="17" />
+        <state relative-caret-position="476">
+          <caret line="34" column="0" selection-start-line="34" selection-start-column="0" selection-end-line="34" selection-end-column="0" />
           <folding />
         </state>
       </provider>

index.html

@@ -8,15 +8,8 @@
       .chart {
         background: lightgray;
         border: 1px solid black;
-        min-width: 200px;
-        min-height: 350px;
-      }
-      .bar {
-        height: 30px;
-        color: green;
-        fill: lightgreen;
-        stroke: black;
-        stroke-width: 1;
+        width: 425px;
+        height: 625px;
       }
     </style>
   </head>

src/app.js

@@ -1,64 +1,34 @@
-const scores = [
-  { name: "Alice", score: 96 },
-  { name: "Billy", score: 83 },
-  { name: "Cindy", score: 81 },
-  { name: "David", score: 96 },
-  { name: "Emily", score: 88 }
-];
-
-function scaleBar(selection, scale) {
-  selection.style('transform', `scaleX(${scale})`);
-}
-
-function fade(selection, opacity) {
-  selection.style('fill-opacity', opacity);
-}
-
-function setFill(selection, color) {
-  selection.style('fill', color);
-}
-
-const bar = d3.select(".chart")
+/* global d3 */
+
+// D3 convention: define margin as an object called margin with these props:
+let margin = {
+  top: 10,
+  right: 20,
+  bottom: 25,
+  left: 25
+};
+let width = 425 - margin.left - margin.right;
+let height = 625 - margin.top - margin.bottom;
+
+let svg = d3.select('.chart')
   .append('svg')
-    .attr('width', 225)
-    .attr('height', 300) // 5 * 33 = 165 < 300
-  .selectAll("g")
-  .data(scores)
-  .enter()
-    // In D3, the SVG <g> is used as a generic container like a HTML <div>.
-    .append("g")
-    // D3 convention: d for data, i for index.
-    // <g> doesn't support x,y, but needs transform.
-    // translate take a comma-separated list of x,y coordinates.
-    .attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');
-
-// Notice how we don't pass data again or use a loop: they are included in the selection.
-bar.append('rect')
-  .style("width", d => d.score)
-  .text(d => d.name)
-  .attr("class", "bar")
-
-  .on('mouseover', function (d, i, elements) {
-    d3.select(this)
-      .call(scaleBar, 1.5)
-      .call(setFill, 'orange');
-
-    d3.selectAll(elements)
-      .filter(':not(:hover)')
-      .call(fade, 0.2);
-  })
-  .on('mouseout', function (d, i, elements) {
-    d3.select(this)
-      .call(scaleBar, 1) // call returns the (modified) selection.
-      .call(setFill, 'palegreen'); // ...which allows chaining.
-
-    d3.selectAll(elements)
-      .call(fade, 1);
-  })
-
-  .on('click', (who) => console.log(`hi ${who.name}`));
-
-bar.append('text')
-  .attr('y', 20)
-  .text(d => d.name);
-
+    // Match the size of the chart-containing <div>.
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+  .append('g')
+    .attr('transform', () => `translate(${margin.left},${margin.top})`);
+// Everything below this line no longer needs to care about margins.
+
+// At this point, the "svg" variable actually contains the <g> selection.
+svg.append('rect')
+  .attr('width', width / 2)
+  .attr('height', height)
+  .style('fill', 'lightblue')
+  .style('stroke', 'green');
+
+svg.append('rect')
+  .attr('x', width / 2)
+  .attr('width', width / 2)
+  .attr('height', height)
+  .style('fill', 'lightblue')
+  .style('stroke', 'green');