Internet Browser Market Share

<!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="https://vizjs.org/viz.v1.1.8.min.js"></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 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>

Modified http://vizjs.org/viz.v1.1.8.min.js to a secure url

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

https://vizjs.org/viz.v1.1.8.min.js