Step 2: replace circles by <g><circle /><text /></g>.

.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$/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" />
     </list>
@@ -34,18 +31,7 @@
     <favorites_list name="v4-tutorial" />
   </component>
   <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <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="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>
-        </entry>
-      </file>
-    </leaf>
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300" />
   </component>
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
@@ -65,8 +51,8 @@
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/src/responsivefy.js" />
         <option value="$PROJECT_DIR$/data/data.js" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/data/data.json" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/src/app.js" />
       </list>
     </option>
@@ -278,18 +264,18 @@
       <updated>1478355759772</updated>
       <workItem from="1478355760990" duration="14794000" />
       <workItem from="1478430008755" duration="3280000" />
-      <workItem from="1478438832989" duration="6521000" />
+      <workItem from="1478438832989" duration="7137000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="15129000" />
+    <option name="totallyTimeSpent" value="15745000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="916" height="877" extended-state="0" />
-    <editor active="true" />
+    <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.25743708" 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" />
@@ -480,18 +466,18 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
+    <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <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" />
+        <state relative-caret-position="647">
+          <caret line="65" column="27" selection-start-line="65" selection-start-column="27" selection-end-line="65" selection-end-column="27" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app.js">
+    <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <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" />
+        <state relative-caret-position="252">
+          <caret line="18" column="8" selection-start-line="18" selection-start-column="8" selection-end-line="18" selection-end-column="8" />
           <folding />
         </state>
       </provider>

index.html

@@ -9,6 +9,10 @@
         background: lightgray;
         border: 1px solid black;
       }
+      circle {
+        fill-opacity: 0.5;
+        fill: steelblue;
+      }
     </style>
   </head>
 

src/app.js

@@ -18,7 +18,7 @@ let svg = d3.select(".chart")
   .append("g")
     .attr("transform", () => `translate(${margin.left},${margin.top})`);
 
-d3.json('data/data.json', function (err, data) {
+d3.json("data/data.json", function (err, data) {
   let yScale = d3.scaleLinear()
     .domain(d3.extent(data, d => d.expectancy))
     .range([height, 0])
@@ -41,18 +41,30 @@ d3.json('data/data.json', function (err, data) {
   // 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])
+    .range([0, 40]);
 
-  svg
-    .selectAll('circle')
+  let circles = svg
+    .selectAll(".ball")
     .data(data)
     .enter()
-    .append('circle')
+    .append("g")
+    .attr("class", "ball")
+    .attr("transform", d => {
+      return `translate(${xScale(d.cost)},${yScale(d.expectancy)})`;
+    });
+
+  circles
+    .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');
+    .attr("cx", 0)
+    .attr("cy", 0)
+    .attr("r", d => rScale(d.population));
+
+  circles
+    .append("text")
+    .style("text-anchor", "middle")
+    .style("fill", "black")
+    .text(d => d.code)
+    .attr('y', 4);
 
 });