Stacked-to-Grouped | Generated Data, Vertical Bars

switch between stacked and grouped layouts using sequenced transitions ✨

animations preserve object constancy and allow the user to follow the data across views

animation design by Heer and Robertson inspired by Byron and Wattenberg

this iteration generates random data and draws vertical bars

an ES2015 implementation in something like the airbnb style

inspired by Stacked-to-Grouped Bars from @mbostock

custom radio buttons from the codepen Pure CSS & HTML cross-browser elegant Radio Buttons from knitevision1

you can also view this set of experiments in github repo form

Stacked-to-Grouped | Generated Data, Vertical Bars
Stacked-to-Grouped | JSON Data, Vertical Bars
Stacked-to-Grouped | Generated Data, Horizontal Bars
Stacked-to-Grouped | JSON Data, Horizontal Bars
Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

<!DOCTYPE html>
<meta charset='utf-8'>
<style>
/* Radio button */
.custom-radio input[type="radio"] {
    display:none;
}
.custom-radio input[type="radio"] + label {
    font-size:14px;
    color: black;
    cursor: pointer;
}
.custom-radio input[type="radio"] + label span {
    display:inline-block;
    width:10px;
    height:10px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}
.custom-radio input[type="radio"] + label span {
    background-color: #c4c4c4; /* have to be of the same color */
    border: 2px solid #c4c4c4; /* have to be of the same color */
}
/* Checked state for radio */
.custom-radio input[type='radio']:checked + label span{
     background-color: #31A354;
}
</style>
<div class='custom-radio'>
  <div>
    <input type='radio' id='grouped' name='mode' value='grouped'>
    <label for='grouped'><span></span> Grouped</label>
  </div>
  <div>
    <input type='radio' id='stacked' name='mode' value='stacked' checked>
    <label for='stacked'><span></span> Stacked</label>
  </div>
</div>
<svg width='960' height='500'></svg>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js'></script>
<script src='vis.js' lang='babel' type='text/babel'></script>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js