JSFiddle - React, Tailwind, and code Playground

by gricha2380

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://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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")
    
dc.renderAll();
  
$(function() {
  $('#menuselect').change(function() {
    console.log($(this).val());
  }).multipleSelect({
    placeholder: "Select Country"
  });
});