Step 1: create simple circles.

.idea/workspace.xml

@@ -2,8 +2,8 @@
 <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$/data/data.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/responsivefy.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/data/data.json" />
+      <change type="DELETED" beforePath="$PROJECT_DIR$/data/data.js" afterPath="" />
       <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$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
@@ -35,41 +35,11 @@
   </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="210">
-              <caret line="15" column="23" selection-start-line="15" selection-start-column="14" selection-end-line="15" selection-end-column="23" />
-              <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="563">
-              <caret line="52" column="13" selection-start-line="52" selection-start-column="13" selection-end-line="52" selection-end-column="13" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="data.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/data/data.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="112">
-              <caret line="8" column="0" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="responsivefy.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/responsivefy.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="140">
-              <caret line="10" column="14" selection-start-line="10" selection-start-column="14" selection-end-line="10" selection-end-column="14" />
+            <state relative-caret-position="479">
+              <caret line="37" column="49" selection-start-line="37" selection-start-column="49" selection-end-line="37" selection-end-column="49" />
               <folding />
             </state>
           </provider>
@@ -94,8 +64,9 @@
       <list>
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/src/responsivefy.js" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/data/data.js" />
+        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/data/data.json" />
         <option value="$PROJECT_DIR$/src/app.js" />
       </list>
     </option>
@@ -307,12 +278,12 @@
       <updated>1478355759772</updated>
       <workItem from="1478355760990" duration="14794000" />
       <workItem from="1478430008755" duration="3280000" />
-      <workItem from="1478438832989" duration="4623000" />
+      <workItem from="1478438832989" duration="6521000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="13231000" />
+    <option name="totallyTimeSpent" value="15129000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="916" height="877" extended-state="0" />
@@ -477,34 +448,50 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/d3/build/d3.node.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="248">
+          <caret line="303" column="0" selection-start-line="303" selection-start-column="0" selection-end-line="303" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/node_modules/d3/build/d3.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="253">
-          <caret line="16254" column="0" selection-start-line="16254" selection-start-column="0" selection-end-line="16254" selection-end-column="0" />
+        <state relative-caret-position="248">
+          <caret line="6788" column="9" selection-start-line="6788" selection-start-column="9" selection-end-line="6788" selection-end-column="9" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
+    <entry file="file://$PROJECT_DIR$/.gitignore">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="15" column="23" selection-start-line="15" selection-start-column="14" selection-end-line="15" selection-end-column="23" />
+        <state relative-caret-position="0">
+          <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/data/data.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="196">
+          <caret line="14" column="4" selection-start-line="14" selection-start-column="4" selection-end-line="14" selection-end-column="4" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/data/data.js">
+    <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="112">
-          <caret line="8" column="0" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
+        <state relative-caret-position="154">
+          <caret line="11" column="0" selection-start-line="11" selection-start-column="0" selection-end-line="11" 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="563">
-          <caret line="52" column="13" selection-start-line="52" selection-start-column="13" selection-end-line="52" selection-end-column="13" />
+        <state relative-caret-position="479">
+          <caret line="37" column="49" selection-start-line="37" selection-start-column="49" selection-end-line="37" selection-end-column="49" />
           <folding />
         </state>
       </provider>

data/data.js

@@ -1,18 +0,0 @@
-let data = [
-  { score: 63, subject: "Mathematics" },
-  { score: 82, subject: "Geography" },
-  { score: 74, subject: "Spelling" },
-  { score: 97, subject: "Reading" },
-  { score: 52, subject: "Science" }
-];
-
-data = [
-  { score: 63, subject: "Mathematics" },
-  { score: 82, subject: "Geography" },
-  { score: 74, subject: "Spelling" },
-  { score: 97, subject: "Reading" },
-  { score: 52, subject: "Science" },
-  { score: 74, subject: "Chemistry" },
-  { score: 97, subject: "Physics" },
-  { score: 52, subject: "ASL" }
-];

data/data.json

@@ -0,0 +1,30 @@
+[
+  {
+    "country": "United States",
+    "population": 323050000,
+    "expectancy": 78.94,
+    "cost": 9024.21,
+    "code": "US"
+  },
+  {
+    "country": "Switzerland",
+    "population": 8306200,
+    "expectancy": 82.85,
+    "cost": 6786.57,
+    "code": "CH"
+  },
+  {
+    "country": "Norway",
+    "population": 5213985,
+    "expectancy": 81.75,
+    "cost": 6081,
+    "code": "NO"
+  },
+  {
+    "country": "France",
+    "population": 66627602,
+    "expectancy": 82.00,
+    "cost": 4366.99,
+    "code": "FR"
+  }
+]

index.html

@@ -9,19 +9,13 @@
         background: lightgray;
         border: 1px solid black;
       }
-      rect {
-        fill: steelblue;
-      }
-      rect:hover {
-        fill: turquoise;
-      }
     </style>
   </head>
 
   <body>
     <div class="chart"></div>
 
-    <script src="data/data.js"></script>
+    <script src="data/data.json"></script>
     <script src="src/responsivefy.js"></script>
     <script src="src/app.js"></script>
   </body>

src/app.js

@@ -1,10 +1,10 @@
-/* global d3, data, responsivefy */
+/* global d3, responsivefy */
 
 // D3 convention: define margin as an object called margin with these props:
 let margin = {
   top: 10,
   right: 20,
-  bottom: 60,
+  bottom: 30,
   left: 30
 };
 let width = 400 - margin.left - margin.right;
@@ -18,43 +18,41 @@ let svg = d3.select(".chart")
   .append("g")
     .attr("transform", () => `translate(${margin.left},${margin.top})`);
 
-let yScale = d3.scaleLinear()
-  .domain([0, 100])
-  .range([height, 0]);
-
-let yAxis = d3.axisLeft(yScale);
-svg.call(yAxis);
-
-// Bar charts NEED a band scale, nothing else (?)
-let xScale = d3.scaleBand()
-  .padding(0.2) // 0..1, default 0
-  // Inned padding is the one between values.
-  //.paddingInner(0.2)
-  // Outer padding is the one on the sides of the graph.
-  // .paddingOuter(0.5)
-  // How to distribute the set of items along the axis.
-  .align(0.5) // 0 full left, to 1 full right.
-  .domain(data.map(d => d.subject))
-  .range([0, width]);
-
-let xAxis = d3.axisBottom(xScale)
-  .ticks(5)
-  .tickSize(10)
-  .tickPadding(5);
-
-svg.append("g")
-  .attr("transform", `translate(0, ${height})`)
-  .call(xAxis)
-  .selectAll("text")
-  .style("text-anchor", "end") // start, middle, end
-  .attr("transform", "rotate(-45)");
-
-svg.selectAll("rect")
-  .data(data)
-  .enter()
-  .append("rect")
-  .attr("x", d => xScale(d.subject))
-  .attr("y", d => yScale(d.score))
-  // Automatically calculated value, unique to band scales.
-  .attr("width", xScale.bandwidth())
-  .attr("height", d => height - yScale(d.score));
+d3.json('data/data.json', function (err, data) {
+  let yScale = d3.scaleLinear()
+    .domain(d3.extent(data, d => d.expectancy))
+    .range([height, 0])
+    .nice();
+
+  let yAxis = d3.axisLeft(yScale);
+  svg.call(yAxis);
+
+  let xScale = d3.scaleLinear()
+    .domain(d3.extent(data, d => d.cost))
+    .range([0, width])
+    .nice();
+  let xAxis = d3.axisBottom(xScale)
+    .ticks(5);
+
+  svg.append("g")
+    .attr("transform", `translate(0, ${height})`)
+    .call(xAxis);
+
+  // To scale the area, we need the sqrt() of the value, since area = pi*r^2
+  let rScale = d3.scaleSqrt()
+    .domain([0, d3.max(data, d => d.population)])
+    .range([0, 40])
+
+  svg
+    .selectAll('circle')
+    .data(data)
+    .enter()
+    .append('circle')
+    // center X, center Y
+    .attr('cx', d => xScale(d.cost))
+    .attr('cy', d => yScale(d.expectancy))
+    .attr('r', d => rScale(d.population))
+    .attr('fill-opacity', 0.5)
+    .attr('fill', 'steelblue');
+
+});