bar chart with negative value

<!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; }
  </style>
</head>

<body>
  <script>
    var data = [
      {
        "date": "2018-04-24",
        "institution": "FAS",
        "value": "0.01886792452830188679245283019"
      },
      {
        "date": "2018-04-24",
        "institution": "NUGT",
        "value": "0.03189420458965383119408790354"
      },
      {
        "date": "2018-04-24",
        "institution": "SPXL",
        "value": "0.03901631591392764246866871601"
      },
      {
        "date": "2018-04-24",
        "institution": "TNA",
        "value": "0.01653355751716407454112372145"
      },
      {
        "date": "2018-04-24",
        "institution": "SOXL",
        "value": "0.02432194575566045283622689815"
      },
      {
        "date": "2018-04-24",
        "institution": "JNUG",
        "value": "0.03142458100558659217877094972"
      },
      {
        "date": "2018-04-24",
        "institution": "TECL",
        "value": "0.05218216318785578747628083491"
      },
      {
        "date": "2018-04-24",
        "institution": "ERX",
        "value": "0.03156708004509582863585118377"
      },
      {
        "date": "2018-04-24",
        "institution": "LABU",
        "value": "0.05291548933984073978936552787"
      },
      {
        "date": "2018-04-24",
        "institution": "TMV",
        "value": "0.01569933396764985727878211227"
      },
      {
        "date": "2018-04-24",
        "institution": "TZA",
        "value": "0.01821493624772313296903460838"
      },
      {
        "date": "2018-04-24",
        "institution": "DUST",
        "value": "0.03702163061564059900166389351"
      },
      {
        "date": "2018-04-24",
        "institution": "EDC",
        "value": "0.01588260681916271040138109625"
      },
      {
        "date": "2018-04-24",
        "institution": "YINN",
        "value": "0.03460207612456747404844290657"
      },
      {
        "date": "2018-04-24",
        "institution": "SPXS",
        "value": "0.04"
      },
      {
        "date": "2018-04-24",
        "institution": "KNOW",
        "value": "0.01054955839057899901864573111"
      },
      {
        "date": "2018-04-24",
        "institution": "JDST",
        "value": "0.03274807654369698165318603275"
      },
      {
        "date": "2018-04-24",
        "institution": "CURE",
        "value": "0.02330316742081447963800904977"
      },
      {
        "date": "2018-04-24",
        "institution": "RUSL",
        "value": "0.009114279037158214536106566955"
      },
      {
        "date": "2018-04-24",
        "institution": "QQQE",
        "value": "0.01278246975576352430951837480"
      },
      {
        "date": "2018-04-24",
        "institution": "BRZU",
        "value": "0.01460361613351877607788595271"
      },
      {
        "date": "2018-04-24",
        "institution": "FAZ",
        "value": "0.01989150090415913200723327306"
      },
      {
        "date": "2018-04-24",
        "institution": "GUSH",
        "value": "0.03508771929824561403508771930"
      },
      {
        "date": "2018-04-24",
        "institution": "CWEB",
        "value": "0.02366381068951448388412892697"
      },
      {
        "date": "2018-04-24",
        "institution": "INDL",
        "value": "0.004543823986607676671051058233"
      },
      {
        "date": "2018-04-24",
        "institution": "TMF",
        "value": "0.01558152476349471341124095715"
      },
      {
        "date": "2018-04-24",
        "institution": "DFEN",
        "value": "0.06876371616678858814923189466"
      },
      {
        "date": "2018-04-24",
        "institution": "CHAD",
        "value": "0.02072213500784929356357927786"
      },
      {
        "date": "2018-04-24",
        "institution": "DRIP",
        "value": "0.03376018626309662398137369034"
      },
      {
        "date": "2018-04-24",
        "institution": "PPLC",
        "value": "0.005279244234509585996110030564"
      },
      {
        "date": "2018-04-24",
        "institution": "EURL",
        "value": "0.01589783685170706280948657806"
      },
      {
        "date": "2018-04-24",
        "institution": "LABD",
        "value": "0.05465116279069767441860465116"
      },
      {
        "date": "2018-04-24",
        "institution": "DRN",
        "value": "0.01314965560425798371947401378"
      },
      {
        "date": "2018-04-24",
        "institution": "EDZ",
        "value": "0.01591827037301021620337372297"
      },
      {
        "date": "2018-04-24",
        "institution": "CHAU",
        "value": "0.04530138524897042306252339948"
      },
      {
        "date": "2018-04-24",
        "institution": "MIDU",
        "value": "0.02118171683389074693422519509"
      },
      {
        "date": "2018-04-24",
        "institution": "NAIL",
        "value": "-0.02864363942712721145745577085"
      }, 
      { 
        "date": "2018-04-24",
        "institution": "ZMLP",
        "value": "0.01211305518169582772543741588"
      },
      {
        "date": "2018-04-24",
        "institution": "YANG",
        "value": "0.03473312401883830455259026688"
      },
      {
        "date": "2018-04-24",
        "institution": "DPST",
        "value": "-0.02406586447118429385687143762"
      },
      {
        "date": "2018-04-24",
        "institution": "COM",
        "value": "0.002016129032258064516129032258"
      },
      {
        "date": "2018-04-24",
        "institution": "ERY",
        "value": "0.03240252897787144362486828240"
      },
      {
        "date": "2018-04-24",
        "institution": "SOXS",
        "value": "0.02393038433647570703408266860"
      },
      {
        "date": "2018-04-24",
        "institution": "GASL",
        "value": "-0.04227336777829967120713950211"
      },
      {
        "date": "2018-04-24",
        "institution": "DZK",
        "value": "-0.01082011557850731587360137711"
      },
      {
        "date": "2018-04-24",
        "institution": "TECS",
        "value": "-0.05153547476173667490292975644"
      }, 
      {
        "date": "2018-04-24",
        "institution": "JPNL",
        "value": "0.0491267010173074"
      },
      {
        "date": "2018-04-23",
        "institution": "PPMC",
        "value": "0.04"
      },
      {
        "date": "2018-04-20",
        "institution": "PPDM",
        "value": "0.05"
      },
      {
        "date": "2018-04-11",
        "institution": "PPTB",
        "value": "0.002787733970529669454400637196"
      }
    ];
   var margin = {top: 20, right: 20, bottom: 50, left: 70};
    var width = 500 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
	
	//add svg with margin !important
	//this is svg is actually group
	var svg = d3.select("body").append("svg")
				.attr("width",width+margin.left+margin.right)
				.attr("height",height+margin.top+margin.bottom)
				.append("g")  //add group to leave margin for axis
				.attr("transform","translate("+margin.left+","+margin.top+")");
	
	var dataset = data;
    
	var maxHeight=d3.max(dataset,function(d){return Math.abs(+d.value)});
	var minHeight=d3.min(dataset,function(d){return Math.abs(+d.value)})
	
	//set y scale
	var yScale = d3.scaleLinear().rangeRound([0,height]).domain([maxHeight,-maxHeight]);//show negative
	//add x axis
	var xScale = d3.scaleBand().rangeRound([0,width]).padding(0.1);//scaleBand is used for  bar chart
	xScale.domain(
    dataset.map(function(d) { return d.institution; }));
    //value in this array must be unique
	/*if domain is specified, sets the domain to the specified array of values. The first element in domain will be mapped to the first band, the second domain value to the second band, and so on. Domain values are stored internally in a map from stringified value to index; the resulting index is then used to determine the band. Thus, a band scale’s values must be coercible to a string, and the stringified version of the domain value uniquely identifies the corresponding band. If domain is not specified, this method returns the current domain.*/
	 
	var barpadding = 1;
	var bars = svg.selectAll("rect").data(dataset).enter().append("rect");
	bars
  
  .attr("x", function(d) { return xScale(d.institution); })
      
	.attr("y",function(d){
		if(+d.value<0){
			return height/2;
		}
		else{
			return yScale(+d.value);	
		}
		
	})//for bottom to top
	.attr("width", xScale.bandwidth()/*width/dataset.length-barpadding*/)
	.attr("height", function(d){
		return height/2 -yScale(Math.abs(+d.value));
	});
	bars.attr("fill",function(d){
		if(+d.value>=0){
			return "green";
		}
		else{
			return "orange";
		}
	});
	
	
	//add x and y axis
	var yAxis = d3.axisLeft(yScale);
	svg.append("g").call(yAxis);

var xAxis = d3.axisBottom(xScale);/*.tickFormat("");remove tick label*/
	svg.append("g").call(xAxis).attr("transform", "translate(0,"+height/2+")")
  .selectAll('text')
  .attr('transform', 'translate(-11,20) rotate(-90)')
    ;
	
	//add label for x axis and y axis
	svg.append("text").text("Y Label")
		.attr("x",0-height/2)
		.attr("y",0-margin.left)
		.attr("dy","1em")
      	.style("text-anchor", "middle")
		.attr("transform","rotate(-90)");
	svg.append("text").text("X Label")
		.attr("x",width/2)
		.attr("y",height+margin.bottom)
      	.style("text-anchor", "middle");
  </script>
</body>

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