Skip to content

Instantly share code, notes, and snippets.

@NPashaP

NPashaP/.block

Last active December 15, 2016 23:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NPashaP/a23f638e133a743a45e2d315fb167307 to your computer and use it in GitHub Desktop.
Save NPashaP/a23f638e133a743a45e2d315fb167307 to your computer and use it in GitHub Desktop.
Download ZIP
bar - Custom Example
Raw
.block
license: gpl-3.0
Raw
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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment