block by NPashaP a23f638e133a743a45e2d315fb167307

bar - Custom Example

Full Screen

index.html



<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect{
	fill:#FF7043;
}
line{
	stroke:rgb(220,216,213);
}
path{
	stroke:none;
}
text{
	font-size:14px;
	color:rgb(55,55,55);
}
text.primaryvalue{
  fill:white;
}
</style>
<body>
  <svg width="960" height="500">
  <rect width="960" height="500" style="fill:rgb(237,234,227)"></rect>
  </svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//vizjs.org/viz.v1.1.7.min.js"></script>
<script>

  var data=[['A', 45],['B', 60],['C', 35],['D', 45],['E', 90],['F', 75],['G', 55],['H', 20],['I', 50],['J', 45]];
  
  var bar=viz.bar().data(data)
		  .valueSecondary(function(d){ return "";})
		  .valueDomain([0,100]);
		  
  var valueScale = d3.axisLeft().scale(bar.valueScale()).tickSize(-400);
	
  d3.select("svg").append("g")
          .attr("transform","translate(250,50)")
		  .call(valueScale);
  
	
  var svg = d3.select("svg")
          .append("g")
          .attr("transform","translate(250,50)")
          .call(bar);
		  
d3.selectAll(".primaryvalue")
	.attr("y",function(d){ return d.hf ? 6 : d.height -6 ;})

// adjust the bl.ocks frame dimension.
d3.select(self.frameElement).style("height","500px").style("width","960px");      
</script>