Replace HTML markup by SVG markup.

- no size units: everything is in virtual pixels
- no automatic positioning: use explicit coordinates
- some CSS properties don't have the same name.

.idea/workspace.xml

@@ -27,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="168">
-              <caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
+            <state relative-caret-position="224">
+              <caret line="16" column="18" selection-start-line="16" selection-start-column="18" selection-end-line="16" selection-end-column="18" />
               <folding />
             </state>
           </provider>
@@ -37,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="322">
-              <caret line="23" column="0" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
+            <state relative-caret-position="336">
+              <caret line="24" column="25" selection-start-line="24" selection-start-column="25" selection-end-line="24" selection-end-column="25" />
               <folding />
             </state>
           </provider>
@@ -158,12 +158,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="9774000" />
+      <workItem from="1478355760990" duration="10612000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="308000" />
+    <option name="totallyTimeSpent" value="1146000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="899" height="877" extended-state="0" />
@@ -293,16 +293,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="168">
-          <caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
+        <state relative-caret-position="224">
+          <caret line="16" column="18" selection-start-line="16" selection-start-column="18" selection-end-line="16" selection-end-column="18" />
           <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="0" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
+        <state relative-caret-position="336">
+          <caret line="24" column="25" selection-start-line="24" selection-start-column="25" selection-end-line="24" selection-end-column="25" />
           <folding />
         </state>
       </provider>

index.html

@@ -11,6 +11,13 @@
         min-width: 200px;
         min-height: 350px;
       }
+      .bar {
+        height: 30px;
+        color: green;
+        fill: lightgreen;
+        stroke: black;
+        stroke-width: 1;
+      }
     </style>
   </head>
 

src/app.js

@@ -9,15 +9,17 @@ const scores = [
 /**
  * @see https://bost.ocks.org/mike/join/
  */
-d3.select('.chart')
-  .selectAll('div')
-  // A "data join": merge the data with that selection.
+d3.select(".chart")
+  .append('svg')
+    .attr('width', 225)
+    .attr('height', 300) // 5 * 33 = 165 < 300
+  .selectAll("rect")
   .data(scores)
   .enter()
-    .append('div')
+    .append("rect")
+    // D3 convention: d for data, i for index.
+    .attr('y', (d, i) => i * 33)
+    .style("width", d => d.score)
     .text(d => d.name)
-    .style('color', 'green')
-    .style('width', d => d.score + 'px')
-    .style('height', '50px')
-    .style('background-color', 'lightgreen')
-    .style('border', '1px solid black');
+    // classed('bar', true) to set, classed('bar', false) to remove.
+    .attr("class", "bar");