Armenia: Tree-Flare

<!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="700" height="500"></svg>
  <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,
    }
  }

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

var tree = d3.cluster()
    .size([height, width - 300]);

//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; })

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

let areaHarvest = data.reduce((prev,current)=>{
      if(current.subject == 'Area Harvested'){
        current['parent'] = 'FAOSTAT'
        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'
        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' },
{amount:1, name:'Area Harvested', parent:'FAOSTAT' }, 
//{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]);

let maxValue = finalArea.reduce((prev, current)=>{
      return prev + current.value
    },0)

//   let maxValue = Math.max(...finalArea.value)
 //   console.log(maxValue)
//GFN Data
let areaRoot = stratify2(ultimateDataSet)

//GFN Data
tree(areaRoot)

var link = g.selectAll(".link")
      .data(areaRoot.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 100) + "," + d.x
            + " " + (d.parent.y + 100) + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

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

node.append("circle")
      .attr("r", (d,i)=>{
        return 5//d.data.percentage
      })
      .on("mouseover", function(d) {
            d3.select(this)
              .style("fill", (d)=>{
                return 'orange'
              });
              let currentNode = d

svg.append('text')
              .attr('x', (d)=>{

return currentNode.y + 200
              })
              .attr('y', (d)=>{
                return currentNode.x + 5
              }) 
              .text(()=>{
                console.log(currentNode)
                return ((currentNode.data.value/maxValue) * 100).toFixed(5) + '%'
              })
              .attr('id', 'node')
          
         })
      .on("mouseout", function(d) {
           d3.select(this)
            .style("fill", "grey")

svg.select('#node').remove()
         });

/*
            // Specify where to put label of text
            svg.append("text").attr({
               id: "t" + d.x + "-" + d.y + "-" + i,  // Create an id for text so we can select it later for removing on mouseout
                x: function() { return xScale(d.x) - 30; },
                y: function() { return yScale(d.y) - 15; }
            })
            .text(function() {
              return [d.x, d.y];  // Value of the text
            });
*/

node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
 })// end of csv call to armenia

</script>

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

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