d3.js Grouped Box plot
<p>I would like to ask that is it possible to plot grouped box plots by D3.js like <a href="https://i.stack.imgur.com/QtazN.png" rel="nofollow noreferrer">this example</a> from Plotly?  So far, I didn't see any example on the internet yet.</p>

<p>Thanks in advance.</p>

<hr>

<p>4th UPDATE: [SOLVED on 3/3/2016]</p>

<p><a href="https://i.stack.imgur.com/Ta0KM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ta0KM.png" alt="Boxplot"></a></p>

<p>Boxplot grouped by dates at x axis and colored according to grouping on respective dates.</p>

<p>Solution is as below:</p>

<pre><code>var state = svg1.selectAll(".state2")
  .data(dataset2)
.enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" +  x0(d.Date)  + ",0)"; } );


state.selectAll(".box")
      .data(function(d) { return d.Data; })
      .enter().append("g")
        .attr("transform", function(d) { return "translate(" +  x_1(d.group)  + ",0)"; } )
      .call(boxplot);
</code></pre>

<hr>

<p>3rd UPDATE:</p>

<p>Done modifying data format. 
Issue: Boxplot for both dates are the same. </p>

<hr>

<p>2nd UPDATE: 
Managed to group the Box plots but facing difficulties in formatting data into groups. <a href="https://plnkr.co/edit/naP7XXkNcaxSJRmpTQv5?p=preview" rel="nofollow noreferrer">plunker version 9</a></p>

<hr>

<p>UPDATE: 
I am trying to change the first chart (Grouped Bar chart) to Grouped Boxplot. Hit error on line 140 at index.html. <a href="https://plnkr.co/edit/naP7XXkNcaxSJRmpTQv5?p=preview" rel="nofollow noreferrer">plunker version 1</a>. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>state.selectAll(".box")    
  .data(function(d) { return d.data; })
  .enter().append("g")
  .attr("transform", function(d) { return "translate(" +  x_1(d)  + "," + margin.top + ")"; } )
  .call(boxplot.width(x0.rangeBand()));  //This line</code></pre>
</div>
</div>
</p>