change format to 120

sgratzl · sgratzl · commit 4fb5990fe5f1 · 2020-01-22T16:19:51.000-05:00
diff --git a/README.md b/README.md
@@ -795,9 +795,7 @@ circles
 D3 is rather dumb when it comes to mapping data items to DOM elements. It doesn't take the order into account. So, if element 'a' was previously at the first position and now on the third it will bind it to the third element. However, this hampers animations, i.e. animated sorting. By using the _key_ argument of the `data` function, one can force that the same DOM element is bound to the same data item regardless of the item order.
 
 ```js
-const cscale = d3
-  .scaleOrdinal(d3.schemeCategory10)
-  .domain(["a", "b", "c", "d"]);
+const cscale = d3.scaleOrdinal(d3.schemeCategory10).domain(["a", "b", "c", "d"]);
 const xscale = d3
   .scaleBand()
   .domain(["a", "b", "c", "d"])
diff --git a/examples/barchart01_initial.html b/examples/barchart01_initial.html
@@ -38,9 +38,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       const data = [66.38, 21.51, 23.37, 34.17, 36.21];
diff --git a/examples/barchart02_title.html b/examples/barchart02_title.html
@@ -38,9 +38,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       const data = [66.38, 21.51, 23.37, 34.17, 36.21];
diff --git a/examples/barchart03_json.html b/examples/barchart03_json.html
@@ -38,9 +38,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       const data = [66.38, 21.51, 23.37, 34.17, 36.21];
diff --git a/examples/barchart04_scale.html b/examples/barchart04_scale.html
@@ -38,9 +38,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       let data;
diff --git a/examples/barchart05_interactive.html b/examples/barchart05_interactive.html
@@ -28,10 +28,7 @@ <h1>Student's First Barchart</h1>
     <!--html filter checkbox-->
     <div>
       <strong>Filter:</strong>
-      <label
-        ><input type="checkbox" name="US" value="1" id="filter-us-only" />US
-        only</label
-      >
+      <label><input type="checkbox" name="US" value="1" id="filter-us-only" />US only</label>
     </div>
 
     <script>
@@ -47,9 +44,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       let data;
diff --git a/examples/barchart06_animation.html b/examples/barchart06_animation.html
@@ -27,10 +27,7 @@ <h1>Student's First Barchart</h1>
 
     <div>
       <strong>Filter:</strong>
-      <label
-        ><input type="checkbox" name="US" value="1" id="filter-us-only" />US
-        only</label
-      >
+      <label><input type="checkbox" name="US" value="1" id="filter-us-only" />US only</label>
     </div>
 
     <script>
@@ -46,9 +43,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       let data;
diff --git a/examples/barchart07_final.html b/examples/barchart07_final.html
@@ -27,10 +27,7 @@ <h1>Student's First Barchart</h1>
 
     <div>
       <strong>Filter:</strong>
-      <label
-        ><input type="checkbox" name="US" value="1" id="filter-us-only" />US
-        only</label
-      >
+      <label><input type="checkbox" name="US" value="1" id="filter-us-only" />US only</label>
     </div>
 
     <script>
@@ -46,9 +43,7 @@ <h1>Student's First Barchart</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      const g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+      const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
       // Global variable for all data
       let data;
diff --git a/examples/bare.html b/examples/bare.html
@@ -27,9 +27,7 @@ <h1>D3 Example</h1>
         .attr("height", height + margin.top + margin.bottom);
 
       // Group used to enforce margin
-      var g = svg
-        .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
       /////////////////////////
       ////// YOUR CODE ////////
diff --git a/examples/mcv01_initial.html b/examples/mcv01_initial.html
@@ -4,14 +4,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Student's First Multiple Coordinated View</title>
-    <meta
-      name="description"
-      content="Student's First Multiple Coordinated View"
-    />
+    <meta name="description" content="Student's First Multiple Coordinated View" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <script src="../web_modules/d3/dist/d3.js"></script>
-    <link href="./style.css" rel="stylesheet" />
+    <link href="./mvc.css" rel="stylesheet" />
     <style>
       rect {
         fill: steelblue;
@@ -89,9 +86,7 @@ <h3>Age Histogram</h3>
           .attr("height", height + margin.top + margin.bottom);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr("transform", `translate(${margin.left},${margin.top})`);
+        const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
         // Scales setup
         const xscale = d3.scaleLinear().range([0, width]);
diff --git a/examples/mcv02_piechart.html b/examples/mcv02_piechart.html
@@ -4,14 +4,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Student's First Multiple Coordinated View</title>
-    <meta
-      name="description"
-      content="Student's First Multiple Coordinated View"
-    />
+    <meta name="description" content="Student's First Multiple Coordinated View" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <script src="../web_modules/d3/dist/d3.js"></script>
-    <link href="./style.css" rel="stylesheet" />
+    <link href="./mvc.css" rel="stylesheet" />
     <style>
       rect {
         fill: steelblue;
@@ -93,9 +90,7 @@ <h3>Age Histogram</h3>
           .attr("height", height + margin.top + margin.bottom);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr("transform", `translate(${margin.left},${margin.top})`);
+        const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
         // Scales setup
         const xscale = d3.scaleLinear().range([0, width]);
@@ -169,12 +164,7 @@ <h3>Age Histogram</h3>
           .attr("height", radius * 2 + margin * 2);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr(
-            "transform",
-            `translate(${radius + margin},${radius + margin})`
-          );
+        const g = svg.append("g").attr("transform", `translate(${radius + margin},${radius + margin})`);
 
         // 1. TODO
 
diff --git a/examples/mcv03_interaction.html b/examples/mcv03_interaction.html
@@ -4,14 +4,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Student's First Multiple Coordinated View</title>
-    <meta
-      name="description"
-      content="Student's First Multiple Coordinated View"
-    />
+    <meta name="description" content="Student's First Multiple Coordinated View" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <script src="../web_modules/d3/dist/d3.js"></script>
-    <link href="./style.css" rel="stylesheet" />
+    <link href="./mvc.css" rel="stylesheet" />
     <style>
       rect {
         fill: steelblue;
@@ -95,9 +92,7 @@ <h3>Age Histogram</h3>
           .attr("height", height + margin.top + margin.bottom);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr("transform", `translate(${margin.left},${margin.top})`);
+        const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
         // Scales setup
         const xscale = d3.scaleLinear().range([0, width]);
@@ -170,12 +165,7 @@ <h3>Age Histogram</h3>
           .attr("height", radius * 2 + margin * 2);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr(
-            "transform",
-            `translate(${radius + margin},${radius + margin})`
-          );
+        const g = svg.append("g").attr("transform", `translate(${radius + margin},${radius + margin})`);
 
         const pie = d3
           .pie()
@@ -216,9 +206,7 @@ <h3>Age Histogram</h3>
             .attr("d", arc) // TODO set the CSS class `selected` if the current data item is the selected sex in the state
             .style("fill", d => cscale(d.data.key));
 
-          path
-            .select("title")
-            .text(d => `${d.data.key}: ${d.data.values.length}`);
+          path.select("title").text(d => `${d.data.key}: ${d.data.values.length}`);
         }
 
         return update;
diff --git a/examples/mcv04_morevisses.html b/examples/mcv04_morevisses.html
@@ -4,14 +4,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Student's First Multiple Coordinated View</title>
-    <meta
-      name="description"
-      content="Student's First Multiple Coordinated View"
-    />
+    <meta name="description" content="Student's First Multiple Coordinated View" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <script src="../web_modules/d3/dist/d3.js"></script>
-    <link href="./style.css" rel="stylesheet" />
+    <link href="./mvc.css" rel="stylesheet" />
     <style>
       rect {
         fill: steelblue;
@@ -99,9 +96,7 @@ <h3>Age Histogram</h3>
           .attr("height", height + margin.top + margin.bottom);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr("transform", `translate(${margin.left},${margin.top})`);
+        const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
         // Scales setup
         const xscale = d3.scaleLinear().range([0, width]);
@@ -174,12 +169,7 @@ <h3>Age Histogram</h3>
           .attr("height", radius * 2 + margin * 2);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr(
-            "transform",
-            `translate(${radius + margin},${radius + margin})`
-          );
+        const g = svg.append("g").attr("transform", `translate(${radius + margin},${radius + margin})`);
 
         const pie = d3
           .pie()
@@ -229,9 +219,7 @@ <h3>Age Histogram</h3>
             .attr("d", arc) // TODO set the CSS class `selected` if the current data item is the selected sex in the state
             .style("fill", d => cscale(d.data.key));
 
-          path
-            .select("title")
-            .text(d => `${d.data.key}: ${d.data.values.length}`);
+          path.select("title").text(d => `${d.data.key}: ${d.data.values.length}`);
         }
 
         return update;
diff --git a/examples/mcv05_transitions.html b/examples/mcv05_transitions.html
@@ -4,14 +4,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Student's First Multiple Coordinated View</title>
-    <meta
-      name="description"
-      content="Student's First Multiple Coordinated View"
-    />
+    <meta name="description" content="Student's First Multiple Coordinated View" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <script src="../web_modules/d3/dist/d3.js"></script>
-    <link href="./style.css" rel="stylesheet" />
+    <link href="./mvc.css" rel="stylesheet" />
     <style>
       rect {
         fill: steelblue;
@@ -107,9 +104,7 @@ <h3>Survived Distribution</h3>
           .attr("height", height + margin.top + margin.bottom);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr("transform", `translate(${margin.left},${margin.top})`);
+        const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
 
         // Scales setup
         const xscale = d3.scaleLinear().range([0, width]);
@@ -182,12 +177,7 @@ <h3>Survived Distribution</h3>
           .attr("height", radius * 2 + margin * 2);
 
         // Group used to enforce margin
-        const g = svg
-          .append("g")
-          .attr(
-            "transform",
-            `translate(${radius + margin},${radius + margin})`
-          );
+        const g = svg.append("g").attr("transform", `translate(${radius + margin},${radius + margin})`);
 
         const pie = d3
           .pie()
@@ -238,9 +228,7 @@ <h3>Survived Distribution</h3>
             .attr("d", arc) // TODO set the CSS class `selected` if the current data item is the selected sex in the state
             .style("fill", d => cscale(d.data.key));
 
-          path
-            .select("title")
-            .text(d => `${d.data.key}: ${d.data.values.length}`);
+          path.select("title").text(d => `${d.data.key}: ${d.data.values.length}`);
         }
 
         return update;
@@ -251,11 +239,7 @@ <h3>Survived Distribution</h3>
       const ageHistogram = createHistogram("#age");
       const sexPieChart = createPieChart("#sex", "selectedSex", d3.schemeSet3);
       const fareHistogram = createHistogram("#fare");
-      const survivedPieChart = createPieChart(
-        "#survived",
-        "selectedSurvived",
-        d3.schemeSet3.slice(2)
-      );
+      const survivedPieChart = createPieChart("#survived", "selectedSurvived", d3.schemeSet3.slice(2));
 
       function filterData() {
         return state.data.filter(d => {
@@ -311,12 +295,7 @@ <h3>Survived Distribution</h3>
       function updateApp() {
         const filtered = filterData();
 
-        const {
-          ageHistogramData,
-          sexPieData,
-          fareHistogramData,
-          survivedPieData
-        } = wrangleData(filtered);
+        const { ageHistogramData, sexPieData, fareHistogramData, survivedPieData } = wrangleData(filtered);
         ageHistogram(ageHistogramData);
         sexPieChart(sexPieData);
         fareHistogram(fareHistogramData);
diff --git a/examples/mcv06_final.html b/examples/mcv06_final.html
diff --git a/examples/mvc.css b/examples/mvc.css
diff --git a/examples/persons.html b/examples/persons.html
diff --git a/examples/pie.html b/examples/pie.html
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
