fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
   .node {
  border: solid 1px white;
  font: 15px arial;
  padding: 10px;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
    
	#tooltip {
	  position: absolute;
	  width: 220px;
	  height: auto;
	  padding: 10px;
	  background-color: white;
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
	  border-radius: 10px;
	  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	  pointer-events: none;
	}

#tooltip.hidden {
	  display: none;
	}

#tooltip p {
	  margin: 0;
	  font-family: sans-serif;
	  font-size: 16px;
	  line-height: 20px;
	}
  </style>
</head>

<body>
  <script>
    const margin = {top: 40, right: 10, bottom: 10, left: 10},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
    var div = d3.select("body").append("div")
    .style(";position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

d3.select("#tooltip")
    .style("left", xPosition + "px")
    .style("top", yPosition + "px");
  d3.select("#tooltip #heading")
    .text(d.data.name + " - " + d.data.capitalisation+"$");
  d3.select("#tooltip").classed("hidden", false);
};
    var mouseout = function() {
  d3.select("#tooltip").classed("hidden", true);
};
    
d3.csv("datav.csv", function(dt) {
  
  // Calculating the variation ratio for each crypto-coin
 
  variationBitcoin=d3.format(".2f")(100*(dt[dt.length-1-choice].Bitcoin-dt[dt.length-1].Bitcoin)/dt[dt.length-1-choice].Bitcoin)
  variationEthereum=d3.format(".2f")(100*(dt[dt.length-1-choice].Ethereum-dt[dt.length-1].Ethereum)/dt[dt.length-1-choice].Ethereum)
  variationRipple=d3.format(".2f")(100*(dt[dt.length-1-choice].Ripple-dt[dt.length-1].Ripple)/dt[dt.length-1-choice].Ripple)
  variationBitfinex=d3.format(".2f")(100*(dt[dt.length-1-choice].Bitfinex-dt[dt.length-1].Bitfinex)/dt[dt.length-1-choice].Bitfinex)
  variationCardano=d3.format(".2f")(100*(dt[dt.length-1-choice].Cardano-dt[dt.length-1].Cardano)/dt[dt.length-1-choice].Cardano)
  variationNEO=d3.format(".2f")(100*(dt[dt.length-1-choice].NEO-dt[dt.length-1].NEO)/dt[dt.length-1-choice].NEO)
  variationStellar=d3.format(".2f")(100*(dt[dt.length-1-choice].Stellar-dt[dt.length-1].Stellar)/dt[dt.length-1-choice].Stellar)
  variationLitecoin=d3.format(".2f")(100*(dt[dt.length-1-choice].Litecoin-dt[dt.length-1].Litecoin)/dt[dt.length-1-choice].Litecoin)
  variationEOS=d3.format(".2f")(100*(dt[dt.length-1-choice].EOS-dt[dt.length-1].EOS)/dt[dt.length-1-choice].EOS)
  variationNEM=d3.format(".2f")(100*(dt[dt.length-1-choice].NEM-dt[dt.length-1].NEM)/dt[dt.length-1-choice].NEM)
  
// This list helps us to remedy the synchronisation dilemma 
  
var Mycoins = {"variationBitcoin": variationBitcoin, "variationEthereum": variationEthereum, "variationRipple": variationRipple,"variationBitfinex":variationBitfinex,"variationCardano":variationCardano,"variationNEO":variationNEO,"variationStellar":variationStellar,"variationLitecoin":variationLitecoin,"variationEOS":variationEOS,"variationNEM":variationNEM}

d3.json("data.json", function(error, data) {
  if (error) throw error;

const root = d3.hierarchy(data, (d) => d.children)
    .sum((d) => d.capitalisation);
		
  
  const tree = treemap(root);

d3.selectAll("input").on("change", function change() {
   
    const newRoot = d3.hierarchy(data, (d) => d.children)
      .sum(value);

});
});
    
    });

</script>
  <div id="tooltip" class="hidden">
  <p><strong id="heading"></strong></p>
</div>
</body>

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