Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  
  <script src="http://d3js.org/d3.v3.min.js"></script>
​
  <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="jquery.chained.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
 
​
  
​
​
<div class="btn-group">
  <button id="year" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="selection" data-selection="Year">Select Year</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
​
    <li class="dropdown-submenus selectyear">
      <a tabindex="-1" href="#">2011</a>
    </li>
    <li class="dropdown-submenus selectyear">
      <a tabindex="-1" href="#">2012</a>
    </li>
    <li class="dropdown-submenus selectyear">
      <a tabindex="-1" href="#">2013</a>
    </li>
    <li class="dropdown-submenus selectyear">
      <a tabindex="-1" href="#">2014</a>
    </li>
    <li class="dropdown-submenus selectyear">
      <a tabindex="-1" href="#">2017</a>
    </li>
    <li class="dropdown-submenus selectyear">
      <a tabindex="-1" href="#">2018</a>
    </li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="selection" data-selection="Qtr">Select Quarter</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
​
​
    <li class="dropdown-submenus letter">
      <a tabindex="-1" href="#">1</a>
    </li>
    <li class="dropdown-submenus letter">
      <a tabindex="-1" href="#">2</a>
    </li>
    <li class="dropdown-submenus letter">
      <a tabindex="-1" href="#">3</a>
    </li>
    <li class="dropdown-submenus letter">
      <a tabindex="-1" href="#">4</a>
    </li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="selection" data-selection="State">Select</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
​
    <li class="dropdown-submenu cfl">
      <a tabindex="-1" href="#">Texas</a>
      <ul class="dropdown-menu md">
        <li><a tabindex="-1" href="#">Houston</a></li>
        <li><a href="#">San Antonio</a></li>
      </ul>
    </li>
​
    <li class="dropdown-submenu cfl">
      <a tabindex="-1" href="#">California</a>
      <ul class="dropdown-menu md">
        <li><a tabindex="-1" href="#">San Francisco</a></li>
​
      </ul>
    </li>
    <li class="dropdown-submenu cfl">
      <a tabindex="-1" href="#">Nevada</a>
      <ul class="dropdown-menu md">
        <li><a tabindex="-1" href="#">Las Vegas</a></li>
​
      </ul>
    </li>
  </ul>
</div>
​
​
<button type="button" class="btn btn-default dropdown-toggle disabled" data-toggle="dropdown" id='filter' disabled>
Submit</button>
<p id="summary">
​
</p>
​
<script type="text/javascript">
var selectedValues = {
  Year: false,
  Qtr: false,
  State: false
};
$('#filter').click(function () {
  $('#summary').text('Year:' + selectedValues['Year'] + ' ' + selectedValues['Qtr'] + ': 1 State:' + selectedValues['State'])
});
​
$(".dropdown-menu li a").click(function() {
  var selection = $(this).parents(".btn-group").find('.selection'),
    selectedValue = selection.data('selection');
  selection.text(selectedValue + ': ' + $(this).text());
​
  selectedValues[selectedValue] = $(this).text();
  for (var key in selectedValues) {
    if (selectedValues.hasOwnProperty(key)) {
      if (selectedValues[key] === false) {
        return;
      }
    }
  }
  $('#filter').removeClass('disabled').prop('disabled', false);
});
          
</script>
 
<div id="chartContainer"> 
​
 
​
th { text-align: left; }
    th, td { padding: 0 1em 0.5ex 0;}
    th.center, td.center { text-align: center; }
    th.num, td.num { text-align: right; }
​
#data {
  display:none;
}
​
 
var svg = dimple.newSvg("#chartContainer", 590, 400);
​
var group_table = [
    { "channel": "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 10, "year": 2011, "quarter": 1},
    { "channel": "Supermarkets", "Price Tier": "Budget", "Unit Sales": 20, "year": 2011, "quarter": 1},
    { "channel": "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 30, "year": 2011, "quarter": 1},
    { "channel": "Supermarkets", "Price Tier": "Regular", "Unit Sales": 40, "year": 2011, "quarter": 1},
    { "channel": "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 50, "year": 2011, "quarter": 1},
    { "channel": "Supermarkets", "Price Tier": "Premium", "Unit Sales": 60, "year": 2011, "quarter": 1},
    { "channel": "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 100, "year": 2011, "quarter": 2},
    { "channel": "Supermarkets", "Price Tier": "Budget", "Unit Sales": 200, "year": 2011, "quarter": 2},
    { "channel": "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 300, "year": 2011, "quarter": 2},
    { "channel": "Supermarkets", "Price Tier": "Regular", "Unit Sales": 400, "year": 2011, "quarter": 2},
    { "channel": "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 500, "year": 2011, "quarter": 2},
    { "channel": "Supermarkets", "Price Tier": "Premium", "Unit Sales": 600, "year": 2011, "quarter": 2},
    { "channel": "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1, "year": 2012},
    { "channel": "Supermarkets", "Price Tier": "Budget", "Unit Sales": 2, "year": 2012},
    { "channel": "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 3, "year": 2012},
    { "channel": "Supermarkets", "Price Tier": "Regular", "Unit Sales": 4, "year": 2012},
    { "channel": "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 5, "year": 2012},
    { "channel": "Supermarkets", "Price Tier": "Premium", "Unit Sales": 6, "year": 2012},
    { "channel": "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 11, "year": 2013,},
    { "channel": "Supermarkets", "Price Tier": "Budget", "Unit Sales": 22, "year": 2013,},
    { "channel": "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 33, "year": 2013},
    { "channel": "Supermarkets", "Price Tier": "Regular", "Unit Sales": 44, "year": 2013},
    { "channel": "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 55, "year": 2013},
    { "channel": "Supermarkets", "Price Tier": "Premium", "Unit Sales": 66, "year": 2013}
    
];
​
function getData(data, year, quarter) {
    var extData = [];
    for(var i = 0; i < data.length; i++) {
        if (year != null && data[i]["year"] != year)
            continue;
        if (quarter != null && data[i]["quarter"] != quarter)
            continue;
        
        extData.push(data[i])
    }
    return extData
}
​
var myChart = new dimple.chart(svg, getData(group_table,""));
var myChart = new dimple.chart(svg, group_table);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", ["Price Tier", "channel"]); 
var y =myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["channel"], dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
y.tickFormat = ".0f"
myChart.draw();
​
​
  
    var tableData = {};
    var dData = [];
    
    group_table.forEach(function(d){
      if (!tableData.hasOwnProperty(d.channel)) {
        tableData[d.channel] = {};
      }
      if(!tableData[d.channel].hasOwnProperty(d['Price Tier'])) {
        tableData[d.channel][d['Price Tier']] = {total:0, enabled:0, data:[]};
      }
      
      tableData[d.channel][d['Price Tier']].total += d['Unit Sales'];
      tableData[d.channel][d['Price Tier']].data.push({'Unit Sales': d['Unit Sales'], year:d.year,quarter:d.quarter});
     
    });
​
      
    
    var columnsData = [];
    columnsData.push({ head: 'channel', cl: 'title', html: ƒ('channel') });
    Object.keys(tableData[Object.keys(tableData)[0]]).forEach(function(key){
        columnsData.push({ head: key, cl: 'title', html: ƒ('channel') });
    });
​
    
​
  
var year = null;
var quarter = null;
​
​
function colsUpdate() {
 
  d3.selectAll('table#tableData tbody tr')[0].forEach(function(el, i){
    Object.keys(dData[i]).forEach(function(k){
      var val = d3.select(el).selectAll('td.' + k)
      $(val[0]).html() && $(val[0]).html(dData[i][k]);
    });  
  });
  console.log(dData);
}
​
​
​
​
function dataUpdate(){
    Object.keys(tableData).forEach(function(e) {
    Object.keys(tableData[e]).forEach(function(f) {
        tableData[e][f].enabled = 0;
      tableData[e][f].data.forEach(function(g) {
        tableData[e][f].enabled += year === null && quarter ===null ? g['Unit Sales'] : g.year == year && g.quarter == quarter ? g['Unit Sales']  : 0; 
      });
      
    });
  });
  dData = [];
  Object.keys(tableData).forEach(function(e) {
    dData.push({channel: e});
    Object.keys(tableData[e]).forEach(function(f) {
        dData[dData.length-1][f] = tableData[e][f].enabled;
    });
  });
};
​
function update(){
dataUpdate();
    chartsUpdate();
    
    colsUpdate();
    
}
​
update();
​
var _tableData = d3.select('body')
        .append('table')
        .attr('id', 'tableData');
        
    _tableData.append('thead').append('tr')
        .selectAll('th')
        .data(columnsData).enter()
        .append('th')
        .attr('class', ƒ('cl'))
        .text(ƒ('head'));
        
    // create table body
    _tableData.append('tbody')
        .selectAll('tr')
        .data(dData).enter()
        .append('tr')
        .style("background-color", function(d, i){if(i%2 == 0){return "#D8D8D8";}})
        .selectAll('td')
        .data(function(row, i) {
            return columnsData.map(function(c) {
                // compute cell values for this specific row
                var cell = {};
                d3.keys(c).forEach(function(k) {
                    cell[k] = typeof c[k] == 'function' ? (c.head == 'Channel' ? c[k](row,i) : row[c.head]) : c[k];
                });
                return cell;
            });
        }).enter()
        .append('td')
        .html(ƒ('html'))
        .attr('class', function(d){ return d.cl + ' ' + d.head});
​
​
​
function chartsUpdate() {
  
  myChart.data = getData(group_table, year, quarter);
  myChart.draw(500);
  
}
​
myChart.draw();
​
​
​
​
​
d3.selectAll('.dropdown-submenus.selectyear > a').on("click", function(d) {
  year = this.text;
  
  // chartsUpdate();
});
​
d3.selectAll('.dropdown-submenus.letter > a').on("click", function(d) {
  quarter = this.text;
  //chartsUpdate();
});
​
$('#filter').click(chartsUpdate);
$('#filter').click(update);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers