Skip to content

Instantly share code, notes, and snippets.

@ninjaPixel

ninjaPixel/README.md

Last active November 19, 2015 17:15
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 ninjaPixel/8471bd29a2033e088355 to your computer and use it in GitHub Desktop.
Save ninjaPixel/8471bd29a2033e088355 to your computer and use it in GitHub Desktop.
Download ZIP
Grouped Bar Chart - Reusable
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>ninjaPixel.js Bar Chart</title>
</head>
<style>
.ninja-axis path,
.ninja-axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.ninja-background{
fill: #333333;
stroke: black;
}
text {
font: 12px sans-serif;
position: absolute;
}
.ninja-chartTitle {
font: 18px sans-serif;
}
.yTitle,
.xTitle {
font: 16px sans-serif;
}
.d3-tip {
line-height: 1;
padding: 8px;
background: rgba(100, 100, 100, 0.7);
color: #fff;
border-radius: 2px;
font: 12px sans-serif;
width: 100px;
}
/* Creates a small triangle extender for the tip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(100, 100, 100, 0.7);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.ninja-yAxisGroup.ninja-axis g.tick line{
stroke: #333333;
opacity: 0.7;
}
</style>
<body>
<div id="chart"></div>
<div id="message"></div>
</body>
<script src="ninjaPixel.bundle.js" charset="utf-8"></script>
<script>
var barChart = new ninjaPixel.GroupedBarChart();
barChart.transitionDuration(2000)
.margin({
top: 20,
bottom: 50,
left: 60,
right: 30
})
.plotBackground(true)
.transitionEase('linear')
.transitionDelay(function(d,i){return i*30;})
.onMouseover(function (d, i) {
d3.select('#message').text(d.x);
})
.mouseOverItemStroke('red')
.height(500)
.plotHorizontalGridTopping(true)
.cornerRounding(0)
.isTimeseries(false)
.itemFill(function(d,i){return d.color;})
.mouseOverItemOpacity(function(d,i){return d.opacity;});
var toolTip = barChart.toolTip();
toolTip.html(function (d) {
return d.y;
});
barChart.toolTip(toolTip);
ready();
function menWomenData(sex, color){
return {group: sex, y: Math.random() * (10), color: color};
}
function ready(error) {
var data = [
{x:'Jersey', data:[menWomenData('men', '#fc8d59'), menWomenData('women','#91cf60')]},
{x:'Guernsey', data:[menWomenData('men', '#fc8d59'), menWomenData('women','#91cf60')]},
{x:'Sark', data:[menWomenData('men', '#fc8d59'), menWomenData('women','#91cf60')]}
];
barChart.plot(d3.select("#chart")
.datum(data));
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment