function treemapDraw(treeRoot, treemap_domain){
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width1 = 700 - margin.left - margin.right,
height1 = 450 - margin.top - margin.bottom;
const svg2 = d3.create("svg")
.attr("viewBox", [-margin.Left, -margin.Top, width1, height1])
.attr("width", width1)
.attr("height", height1)
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const op_domain= d3.extent(treeRoot.descendants().filter(d=>d.depth==2).map(d1=>d1.value))
const color = d3.scaleOrdinal()
.domain(treemap_domain)
.range(d3.schemeBlues)
const opacity = d3.scaleLinear()
.domain(op_domain)
.range([0,1])
svg2.append("g")
.selectAll("rect")
.data(treeRoot.descendants().filter(d=>d.depth==2))
.enter()
.append("rect")
.attr('x', d=> d.x0)
.attr('y', d=> d.y0)
.attr('width', d=> (d.x1 - d.x0))
.attr('height', d=>(d.y1 - d.y0))
.style("stroke", "black")
.style("fill", d=> color(d.data[0]))
.style("opacity", d=> opacity(d.value))
svg2.append('g')
.selectAll("text")
.data(treeRoot.descendants().filter(d=>d.depth==2))
.enter()
.append("text")
.attr("x", d=> d.x0+(d.x1 - d.x0)/2-10)
.attr("y", d=>d.y0+(d.y1 - d.y0)/2)
.text(d=>d.data[0])
.attr("font-size", "10px")
.attr("fill", "Orange" );
svg2
.selectAll("vals")
.data(treeRoot.descendants().filter(d=>d.depth==2))
.enter()
.append("text")
.attr("x", d=> d.x0+(d.x1 - d.x0)/2-10+5)
.attr("y", d=>d.y0+(d.y1 - d.y0)/2+10)
.text(d=>d.value )
.attr("font-size", "8px")
.attr("fill", "green")
svg2 .append('g')
.selectAll("titles")
.data(treeRoot.descendants().filter(d=> d.depth==1))
.enter()
.append("text")
.attr("x", d=> d.x0+(d.x1 - d.x0)/2-20)
.attr("y", d=>d.y0+(d.y1 - d.y0)/2)
.text(d => d.data[0] )
.attr("font-size", "14px")
.attr("fill", "White" );
return svg2.node();
}