title: How to update d3.js bar chart with new data
body: <p>I’ve started with the “Let’s make a bar chart I” example here: <a href="http://bost.ocks.org/mike/bar/">http://bost.ocks.org/mike/bar/</a></p>
  
  <p>And I’m having a hard time figuring out how to make the very simple bar chart made with HTML5 elements update with new data.  Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        #work_queues_chart div {
          font-size: 0.5em;
          font-family: sans-serif;
  
          color: white;
          background-color: steelblue;
  
          text-align: right;
          padding: 0.5em;
          margin: 0.2em;
        }
      &lt;/style&gt;
      &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8" /&gt;
      &lt;script type="text/javascript"&gt;
  
        function init() {
  
          var data = [0, 0, 0, 0, 0, 0];
  
          /* scale is a function that normalizes a value in data into the range 0-98 */
          var scale = d3.scale.linear()
                        .domain([0, 200])
                        .range([0, 98]);
  
          var bars = d3.select("#work_queues_chart")
                       .selectAll("div")
                         .data(data)
                       .enter().append("div");
  
          bars.style("width", function(d) { return scale(d) + "%"; })
          bars.text(function(d) { return d; });
  
        }
  
        function update() {
  
          var data = [4, 8, 15, 16, 23, 42];
  
          /* http://stackoverflow.com/questions/14958825/dynamically-update-chart-data-in-d3 */
        }
  
        window.onload = init;
  
      &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="work_queues_chart" /&gt;
      &lt;button onclick="update()"&gt;Update&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The question is what do I put into update() to cause the bars to draw with the new data?  I tried <code>d3.select("#work_queues_chart").selectAll("div").data(data)</code> with the new data, but I’m unclear on what needs to happen next (or whether that was the right move).</p>