Skip to content

Instantly share code, notes, and snippets.

@NPashaP

NPashaP/.block

Created December 20, 2016 20:08
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/a943025772aa638028e599920515813c to your computer and use it in GitHub Desktop.
Save NPashaP/a943025772aa638028e599920515813c to your computer and use it in GitHub Desktop.
Download ZIP
Internet Browser Market Share
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);
}
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment