Skip to content

Instantly share code, notes, and snippets.

@ozluy

ozluy/index.html

Created June 15, 2016 09:01
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 ozluy/832f4d64c771a7cef61c28645c387f7b to your computer and use it in GitHub Desktop.
Save ozluy/832f4d64c771a7cef61c28645c387f7b to your computer and use it in GitHub Desktop.
Download ZIP
D3- Bar Chart with data, label and style
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="shape">
</div>
</body>
</html>
Raw
shape.js
var w = 300;
var h = 100;
var padding = 2;
var dataSet = [8, 21, 18, 12, 25, 4, 24, 10, 18, 21];
var svg = d3.select("#shape")
.append("svg")
.attr("width", w)
.attr("height", h);
function colorPicker(v){
if(v>=20){
return '#aa0000';
}
return '#999';
}
svg.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr(
{
x: function(d, i){ return i * (w / dataSet.length);},
y: function(d){return h - (d * 4);},
width: w / dataSet.length - padding,
height: function(d){ return d * 4;},
fill: function(d){return colorPicker(d);}
}
);
svg.selectAll("text")
.data(dataSet)
.enter()
.append("text")
.text(function(d) {return d;})
.attr({
"text-anchor": "middle",
x: function(d,i){ return i * (w / dataSet.length) + (w / (dataSet.length * 2));},
y: h-padding,
"font-family": "sans-serif",
"font-size": 12,
fill: "#fff"
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment