Add responsivefy(). Remove explicit viewBox outside responsivefy.

.idea/workspace.xml

@@ -2,10 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
-      <change type="DELETED" beforePath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterPath="" />
-      <change type="MOVED" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/Wpackage.json" />
-      <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$/index.html" afterPath="$PROJECT_DIR$/index.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -26,28 +25,7 @@
     <favorites_list name="v4-tutorial" />
   </component>
   <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <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="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>
-      </file>
-      <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="322">
-              <caret line="23" column="34" selection-start-line="23" selection-start-column="34" selection-end-line="23" selection-end-column="34" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-    </leaf>
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300" />
   </component>
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
@@ -64,9 +42,9 @@
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/src/app.js" />
+        <option value="$PROJECT_DIR$/index.html" />
       </list>
     </option>
   </component>
@@ -89,7 +67,7 @@
   <component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
   <component name="ProjectFrameBounds">
     <option name="y" value="23" />
-    <option name="width" value="899" />
+    <option name="width" value="916" />
     <option name="height" value="877" />
   </component>
   <component name="ProjectLevelVcsManager" settingsEditedManually="true">
@@ -249,18 +227,18 @@
       <updated>1478355759772</updated>
       <workItem from="1478355760990" duration="14794000" />
       <workItem from="1478430008755" duration="3280000" />
-      <workItem from="1478438832989" duration="642000" />
+      <workItem from="1478438832989" duration="2137000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="9250000" />
+    <option name="totallyTimeSpent" value="10745000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="23" width="899" height="877" extended-state="0" />
-    <editor active="true" />
+    <frame x="0" y="23" width="916" height="877" extended-state="0" />
+    <editor active="false" />
     <layout>
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.26254377" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="true" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25743708" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
       <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="true" content_ui="tabs" />
@@ -368,14 +346,6 @@
     <entry file="file://$PROJECT_DIR$/data/data.tsv" />
     <entry file="file://$PROJECT_DIR$/data/data.csv" />
     <entry file="file://$PROJECT_DIR$/data/data.json" />
-    <entry file="file://$PROJECT_DIR$/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <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$/node_modules/d3-axis/build/d3-axis.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="224">
@@ -397,7 +367,7 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/Wpackage.json">
+    <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="378">
           <caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
@@ -419,10 +389,18 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="140">
+          <caret line="10" column="0" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="322">
-          <caret line="23" column="34" selection-start-line="23" selection-start-column="34" selection-end-line="23" selection-end-column="34" />
+        <state relative-caret-position="675">
+          <caret line="86" column="0" selection-start-line="86" selection-start-column="0" selection-end-line="86" selection-end-column="0" />
           <folding />
         </state>
       </provider>

index.html

@@ -8,8 +8,6 @@
       .chart {
         background: lightgray;
         border: 1px solid black;
-        width: 425px;
-        height: 625px;
       }
     </style>
   </head>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "egghead-d3v4",
   "version": "1.0.0",
-  "description" :"",
+  "description": "",
   "main": "index.js",
   "scripts": {
     "start": "browser-sync start -s -f index.html src --no-ui --no-notify"
@@ -19,5 +19,8 @@
   "homepage": "https://github.com/bclinkinbeard/egghead-d3v4#readme",
   "devDependencies": {
     "browser-sync": "2.16.0"
+  },
+  "dependencies": {
+    "d3": "^4.3.0"
   }
 }

src/app.js

@@ -10,20 +10,50 @@ let margin = {
 let width = 400 - margin.left - margin.right;
 let height = 600 - margin.top - margin.bottom;
 
-const fullWidth = width + margin.left + margin.right;
-const fullHeight = height + margin.top + margin.bottom;
+/**
+ * Adjust SVG size.
+ *
+ * @param {Selection} svg
+ *   An SVG D3 selection.
+ *
+ * @return {void}
+ */
+function responsivefy(svg) {
+  // get container + svg aspect ratio.
+  // node() returns the raw DOM node -> parentNode returns the div.chart.
+  const container = d3.select(svg.node().parentNode);
+  const width = parseInt(svg.style("width"), 10);
+  const height = parseInt(svg.style("height"), 10);
+  const aspect = width / height;
+
+  // Get width of container and resize SVG to fit it.
+  function resize() {
+    let targetWidth = parseInt(container.style("width"), 10);
+    svg.attr("width", targetWidth);
+    svg.attr("height", Math.round(targetWidth / aspect));
+  }
+
+  // Add viewBox and preserveAspectRatio properties,
+  // and call resize to that svg resizes on initial page load
+  svg.attr("viewBox", "0 0 " + width + " " + height)
+    .attr("preserveAspectRatio", "xMinYMid")
+    .call(resize);
+
+  // To register multiple listeners for the same event type,
+  // you need to add namespace, i.e. 'click.foo'
+  // necessary if you call invoke this function for multiples SVGs
+  // api docs: https://github.com/mbostock/d3/wiki/Selections#on
+  d3.select(window)
+    .on("resize." + container.attr("id"), resize);
+}
+
 let svg = d3.select('.chart')
   .append('svg')
     // Match the size of the chart-containing <div> with the viewport.
-    .attr('width', fullWidth)
-    .attr('height', fullHeight)
-    // Beware the camelCase attribute name.
-    // Graphics are :
-    // 1. first drawn to full size,
-    // 2. then cropped to viewBox
-    // 3. then scaled to viewport.
-    .attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`)
-  .append('g')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .call(responsivefy)
+    .append('g')
     .attr('transform', () => `translate(${margin.left},${margin.top})`);
 // Everything below this line no longer needs to care about margins.
 
@@ -40,33 +70,17 @@ let yScale = d3.scaleLinear()
   .range([height, 0]);
 
 let yAxis = d3.axisLeft(yScale);
-  // For 2nd ticks() param:
-  // - '%' assumes a [0,1] domain
-  // - 's' uses human-readable sizes
-  // - '.2s' gives 2 digits after decimal separator
-  // The value is a suggestion, in this case we get 6, not 5.
-  // .ticks(5);
-  // Can use explicit tick positions:
-  // .tickValues([8, 19, 43, 77])
 svg.call(yAxis);
 
 let xScale = d3.scaleTime()
   .domain([new Date(2016, 0, 1, 6), new Date(2016, 0, 1, 9)])
   .range([0, width]);
+
 let xAxis = d3.axisBottom(xScale)
   .ticks(5)
-  // .tickSize(20)
-  .tickSizeInner(10)
-  .tickSizeOuter(20)
-  .tickPadding(15)
-  // Not every 45 minutes, but every 45 minutes after the hour, plus the hour.
-  //.ticks(d3.timeMinute.every(45))
-;
-
-// This would appear at the top (but drawn for a bottom position, ticks down).
-// svg.call(xAxis);
+  .tickSize(10)
+  .tickPadding(5);
 
-// So we put it in an additional <g> below the graph.
 svg.append('g')
   .attr('transform', `translate(0, ${height})`)
   .call(xAxis);