NPashaP/.block

## .block
license: gpl-3.0

## 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);
}
.secondaryvalue{
	fill:white;
}
.primaryvalue, .primarykey{
	fill:black;
}
</style>
<body>
  <svg width="960" height="500">
	<g id="bar" transform="translate(150, 50)"></g>
	<g id="legend" transform="translate(600, 200)"></g>
  </svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://vizjs.org/viz.v1.1.8.min.js"></script>

<script>

var data=[
	 ['2016','IE',32.34]
	,['2016','Chrome',46.76]
	,['2016','Firefox',9.87]
	,['2016','Safari',4.41]
	,['2016','Opera',1.54]
	,['2016','Other',5.08]
	,['2015','IE',52.99]
	,['2015','Chrome',27.61]
	,['2015','Firefox',11.82]
	,['2015','Safari',4.92]
	,['2015','Opera',1.26]
	,['2015','Other',1.4]
	,['2014','IE',58.3]
	,['2014','Chrome',19.1]
	,['2014','Firefox',15.7]
	,['2014','Safari',5.45]
	,['2014','Opera',1.06]
	,['2014','Other',0.39]
	,['2013','IE',56.73]
	,['2013','Chrome',16.37]
	,['2013','Firefox',19.34]
	,['2013','Safari',5.55]
	,['2013','Opera',1.59]
	,['2013','Other',0.42]
	,['2012','IE',53.8]
	,['2012','Chrome',18.74]
	,['2012','Firefox',20.3]
	,['2012','Safari',5.02]
	,['2012','Opera',1.64]
	,['2012','Other',0.5]
	,['2011','IE',56.24]
	,['2011','Chrome',14.2]
	,['2011','Firefox',22.71]
	,['2011','Safari',4.56]
	,['2011','Opera',1.93]
	,['2011','Other',0.36]
];

var colors ={'IE':'#F44336','Chrome':'#9C27B0','Firefox':'#3F51B5','Safari':'#009688','Opera':'#2196F3','Other':'#795548'} ;

var bar=viz.bar().data(data)
		  .paddingInner(0.3)
		  .paddingOuter(0.6)
		  .keySecondary(function(d){ return d[1];})
		  .value(function(d){ return d[2];})
		  .valuePrimary(function(d){ return '';})
		  .valueSecondary(function(d){ return d.value < 5 ? '' : Math.round(d.value);})
		  .valueDomain([0,100])
		  .fill(function(d){ return colors[d.secondaryKey]});

var valueScale = d3.axisLeft().scale(bar.valueScale()).tickSize(-400);

d3.select("#bar").call(valueScale);
d3.select("#bar").call(bar);

var lg = viz.lg().data(d3.keys(colors)).height(140).paddingInner(0.4).fill(function(d){ return colors[d.key];});
d3.select("#legend").call(lg);

// adjust the bl.ocks frame dimension.
d3.select(self.frameElement).style("height","500px").style("width","960px");
</script>
	<!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);
	}
	.secondaryvalue{
	fill:white;
	}
	.primaryvalue, .primarykey{
	fill:black;
	}
	</style>
	<body>
	<svg width="960" height="500">
	<g id="bar" transform="translate(150, 50)"></g>
	<g id="legend" transform="translate(600, 200)"></g>
	</svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="http://vizjs.org/viz.v1.1.8.min.js"></script>

	<script>

	var data=[
	['2016','IE',32.34]
	,['2016','Chrome',46.76]
	,['2016','Firefox',9.87]
	,['2016','Safari',4.41]
	,['2016','Opera',1.54]
	,['2016','Other',5.08]
	,['2015','IE',52.99]
	,['2015','Chrome',27.61]
	,['2015','Firefox',11.82]
	,['2015','Safari',4.92]
	,['2015','Opera',1.26]
	,['2015','Other',1.4]
	,['2014','IE',58.3]
	,['2014','Chrome',19.1]
	,['2014','Firefox',15.7]
	,['2014','Safari',5.45]
	,['2014','Opera',1.06]
	,['2014','Other',0.39]
	,['2013','IE',56.73]
	,['2013','Chrome',16.37]
	,['2013','Firefox',19.34]
	,['2013','Safari',5.55]
	,['2013','Opera',1.59]
	,['2013','Other',0.42]
	,['2012','IE',53.8]
	,['2012','Chrome',18.74]
	,['2012','Firefox',20.3]
	,['2012','Safari',5.02]
	,['2012','Opera',1.64]
	,['2012','Other',0.5]
	,['2011','IE',56.24]
	,['2011','Chrome',14.2]
	,['2011','Firefox',22.71]
	,['2011','Safari',4.56]
	,['2011','Opera',1.93]
	,['2011','Other',0.36]
	];

	var colors ={'IE':'#F44336','Chrome':'#9C27B0','Firefox':'#3F51B5','Safari':'#009688','Opera':'#2196F3','Other':'#795548'} ;

	var bar=viz.bar().data(data)
	.paddingInner(0.3)
	.paddingOuter(0.6)
	.keySecondary(function(d){ return d[1];})
	.value(function(d){ return d[2];})
	.valuePrimary(function(d){ return '';})
	.valueSecondary(function(d){ return d.value < 5 ? '' : Math.round(d.value);})
	.valueDomain([0,100])
	.fill(function(d){ return colors[d.secondaryKey]});

	var valueScale = d3.axisLeft().scale(bar.valueScale()).tickSize(-400);

	d3.select("#bar").call(valueScale);
	d3.select("#bar").call(bar);

	var lg = viz.lg().data(d3.keys(colors)).height(140).paddingInner(0.4).fill(function(d){ return colors[d.key];});
	d3.select("#legend").call(lg);

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