JSFiddle - React, Tailwind, and code Playground

by Jeno Yamma

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">
<div id="rowChart"></div>
<pre id="data">
  country,id,value,sector
  USA,0982,10,high
  AUS,0983,9,high
  IND,0982,10,high
  CHN,0982,8,high
  CUB,0986,5,middle
  FIN,0987,low
</pre>

CSS

pre {display:none;}

JavaScript

var rowChart = dc.barChart("#rowChart");
d3.csv('data.csv', function(data){
  data.forEach(function(d){
    d.country = d.country;
    d.id = d.id;
    d.value = +d.value;
    d.sector = d.sector;
  });
  var height = 300;
  var width = 300;
  
  var ndx = crossfilter(data)
	var countryDim = ndx.dimension(function (d) { 
  	return d.country; 
  });
  var countryGroup = countryDim.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();

  rowChart
    .title(function (d) { return formatComma(d3.round(d.value));})
    .renderTitleLabel(true)
    .titleLabelOffsetX(10);
    
  dc.renderAll();
});