JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<div id="rowChart"></div>
<div id='menuselect'></div>

JavaScript

var data = [{
    "country": "USA",
        "id": "0982",
        "value": 10,
        "sector": "high" 
}, {
    "country": "AUS",
        "id": "0983",
        "value": 9,
        "sector": "high" 
}, {
    "country": "IND",
        "id": "0982",
        "value": 10,
        "sector": "high"  
}, {
    "country": "CHN",
        "id": "0982",
        "value": 8,
        "sector": "high" 
}, {
    "country": "IND",
        "id": "0982",
        "value": 10,
        "sector": "high" 
}, {
    "country": "CUB",
        "id": "0986",
        "value": 5,
        "sector": "high" 
}, {
    "country": "FIN",
        "id": "0987",
        "value": 3,
        "sector": "low" 
}];
var selectField = dc.selectMenu('#menuselect');
var rowChart = dc.rowChart("#rowChart");
  var height = 300;
  var width = 300;
  
  var ndx = crossfilter(data)
	var countryDim = ndx.dimension(function (d) { 
  	return d.country; 
  });
  
	var countryDim2 = ndx.dimension(function (d) { 
  	return d.country; 
  });
  var countryGroup = countryDim.group().reduceSum(function (d) {
  	return +d.value;
  })
  var countryGroup2 = countryDim2.group().reduceSum(function (d) {
  	return +d.value;
  })
  
rowChart
    .width(300)
    .height(900)
    .margins({top: 10, right: 10, bottom: -1, left: 30})
    .dimension(countryDim)
    .group(countryGroup)
    .colors('steelblue')
    .ordering(function (d) { return -d.value; })
    .elasticX(true)
    .xAxis();
     selectField.dimension(countryDim2).group(countryGroup2).multiple(true).title(function(d) {return d.key}).promptText("All Country")
  
  
function re_jmulti(clear) {
  return function() {
    if(clear)
      selectField.selectAll('.ms-parent.dc-select-menu').remove();
    $('#menuselect select')
    .change(function() {
      console.log($(this).val());
      //selectField.replaceFilter($(this).val()); // why?
    })
    .multipleSelect({
      placeholder: "Select Country"
    });
  };
}

selectField.on('postRender',...