FAOSTAT Radial Tree

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #999;
}

.node text {
  font: 10px sans-serif;
}

.node--internal circle {
  fill: #555;
}

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

</style>
<svg width="800" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
  <script src="https://d3js.org/d3-hierarchy.v1.min.js"></script><script>

let rowConvertor = (d) => {
    let { country, item, subject } = d
    return {
      country,
      item,
      value: +d.value,
      subject,
    }
  }
  let colors = d3.scaleOrdinal(d3.schemeCategory10);

d3.csv('armenia-flare.csv', rowConvertor, (data)=>{

let areaHarvest = data.reduce((prev,current)=>{
      if(current.subject == 'Area Harvested'){
        current['parent'] = 'FAOSTAT_Prodstat_Crops'
        prev.push(current)
      }

return prev
    },[])

let areaHash = data.reduce((prev, current)=>{
        if(prev[current.item] == null){
          prev[current.item] = { amount: 1, value: current.value};
        }else {
          prev[current.item].amount++
          prev[current.item].value += current.value
        }
        return prev 
    }, {})

let finalArea = Object.keys(areaHash).reduce((prev, current)=>{
      let product = {
        name: current,
        parent: 'Area Harvested',
        amount: areaHash[current].amount,
        value: areaHash[current].value
      }

return [...prev, product]
    }, [])

let production = data.reduce((prev,current)=>{
      if(current.subject == 'Production'){
        current['parent'] = 'FAOSTAT_Prodstat_Crops'
        prev.push(current)
      }

return prev
    },[])

let productionHash = data.reduce((prev, current)=>{
            if(prev[current.item] == null){
              prev[current.item] = { amount: 1, value: current.value};
            }else {
              prev[current.item].amount++
              prev[current.item].value += current.value
            }
            return prev 
        }, {})

let finalProduction = Object.keys(productionHash).reduce((prev, current)=>{
          let product = {
            name: current,
            parent: 'Production',
            amount: areaHash[current].amount,
            value: areaHash[current].value
          }

return [...prev, product]
        }, [])
     
let ultimateDataSet = [
{amount:1, parent:'', name:'FAOSTAT_Prodstat_Crops' },
{amount:1, name:'Area Harvested', parent:'FAOSTAT_Prodstat_Crops' }, 
{amount:1, name:'Production', parent:'FAOSTAT_Prodstat_Crops' },
...finalArea,
...finalProduction

]

let areaHarvestScale = d3.scaleLinear()
                              .domain([
                                  d3.min(ultimateDataSet, (d)=> { return d.value}),
                                  d3.max(ultimateDataSet, (d)=>{ return d.value})
                                ])
                              .range([5, 10]);

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + (width / 2 ) + "," + (height / 2 ) + ")");

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

var tree = d3.tree()
    .size([2 * Math.PI, 200])
    .separation(function(a, b) { return (a.parent == b.parent ? 4 : 2) / a.depth; });

//have to first tell who is the parent. whatever method you choose. either objects or weird slice method bottom
let stratify2 = d3.stratify()
                .id(function(d) { return d.name; })
                .parentId(function(d) { return d.parent; })

//area Harvest root example

let radialFlareData = stratify2(ultimateDataSet)

tree(radialFlareData)

var link = g.selectAll(".link")
    .data(radialFlareData.links())
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.linkRadial()
          .angle(function(d) { return d.x; })
          .radius(function(d) { return d.y; }));

var node = g.selectAll(".node")
    .data(radialFlareData.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; });

node.append("circle")
      .style('fill', (d)=>{
            return d.data.parent == 'Production' ? colors(4) : colors(5)
          })
      .attr("r", (d)=>{
        
        return areaHarvestScale(d.data.value)
      })

node.append("text")
      .attr("dy", "0.31em")
      .attr("x", function(d) { return d.x < Math.PI === !d.children ? 11 : -11; })
      .attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
      .attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
 })// end of csv call to armenia shit

function radialPoint(x, y) {
  return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
}

</script>

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

https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js

https://d3js.org/d3-hierarchy.v1.min.js