d3 barchart in jquery mobile -- why are there two checkboxes?
<p>I have modified <a href="http://bl.ocks.org/mbostock/3885705" rel="nofollow noreferrer">this d3 barchart</a>, which contains a very nice sorting feature, for presentation in a jquery mobile page.</p>

<p>I get the following horrible result, which I cannot figure out. (Please ignore the equally awful x-axis labels and the wrongly positioned title; I'll fix them later).</p>

<p><a href="https://i.stack.imgur.com/utOQc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/utOQc.png" alt="enter image description here"></a> </p>

<p>The checkbox in the upper left works; you check it and the bars sort. But its evil doppelganger shows up in the center. Click on the checkbox inside the chart area, and the checkmark shows up in both checkboxes, but nothing happens.</p>

<p>I'm mystified.</p>

<p>Here's the relevant html:</p>

<pre><code>&lt;div data-role='content' class='chart-here'&gt;

  &lt;input type='checkbox' name='checkbox-2a' id='checkbox-2a' /&gt;
  &lt;label for='checkbox-2a' data-corners='true' data-shadow='false' data-iconshadow='true' data-wrapperels='span' data-icon='checkbox-on' data-theme='c' data-mini='false' class='chart1 ui-checkbox-on ui-btn ui-btn-hover-c ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c'&gt;
    &lt;span class='ui-btn-inner'&gt;
            &lt;span class='ui-btn-text'&gt;Sort cereal by type&lt;/span&gt;
    &lt;span class='ui-icon ui-icon-checkbox-on ui-icon-shadow'&gt;&amp;nbsp;&lt;/span&gt;
    &lt;/span&gt;
  &lt;/label&gt;
</code></pre>

<p>... and here's what I think is the relevant d3.js:</p>

<pre><code>  d3.select('#checkbox-2a').on('change', change);

  var sortTimeout = setTimeout(function() {
    d3.select('#checkbox-2a').property('checked', false).each(change);
  }, 1000);

  function change() {
    clearTimeout(sortTimeout);
</code></pre>

<p>... and the relevant CSS, without which the checkbox appears above the chart (where I want it) but does not work at all:</p>

<pre><code>label.chart1 {
  position: absolute;
  top: 120px;
  left: 300px;
}
</code></pre>

<p>Anybody have any idea what's going on?</p>