Skip to content

Instantly share code, notes, and snippets.

@davbre

davbre/index.html

Created May 29, 2015 12:24
Show Gist options
  • Save davbre/21c44ea6ff560579b30a to your computer and use it in GitHub Desktop.
Save davbre/21c44ea6ff560579b30a to your computer and use it in GitHub Desktop.
Download ZIP
d3 - basic bar chart // source http://jsbin.com/leregu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>d3 - basic bar chart</title>
</head>
<body>
<script id="jsbin-javascript">
var w = 300;
var h = 200;
var padding = 2;
var dataset = [5, 10, 14, 20, 30, 12, 100,11,12,14,25,50];
var svg1 = d3.select("body").append("svg")
.attr("width", w).attr("height", h);
function colPick(v) {
if (v<=20) { return "#666666"; }
else if (v>20) { return "#ff0033"; }
}
svg1.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d,i) {return i*(w/dataset.length);},
y: function(d) {return h-d;},
width: w / dataset.length - padding,
height: function(d) {return d;},
fill: function(d,i) {return colPick(d); }
});
svg1.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-padding)/2;},
y: function(d) {return h-(d+padding)+14;},
"font-family": "sans-serif",
"font-size": 12,
"fill": "#ffffff"
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">
var w = 300;
var h = 200;
var padding = 2;
var dataset = [5, 10, 14, 20, 30, 12, 100,11,12,14,25,50];
var svg1 = d3.select("body").append("svg")
.attr("width", w).attr("height", h);
function colPick(v) {
if (v<=20) { return "#666666"; }
else if (v>20) { return "#ff0033"; }
}
svg1.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d,i) {return i*(w/dataset.length);},
y: function(d) {return h-d;},
width: w / dataset.length - padding,
height: function(d) {return d;},
fill: function(d,i) {return colPick(d); }
});
svg1.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-padding)/2;},
y: function(d) {return h-(d+padding)+14;},
"font-family": "sans-serif",
"font-size": 12,
"fill": "#ffffff"
});</script></body>
</html>
Raw
jsbin.leregu.js
var w = 300;
var h = 200;
var padding = 2;
var dataset = [5, 10, 14, 20, 30, 12, 100,11,12,14,25,50];
var svg1 = d3.select("body").append("svg")
.attr("width", w).attr("height", h);
function colPick(v) {
if (v<=20) { return "#666666"; }
else if (v>20) { return "#ff0033"; }
}
svg1.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d,i) {return i*(w/dataset.length);},
y: function(d) {return h-d;},
width: w / dataset.length - padding,
height: function(d) {return d;},
fill: function(d,i) {return colPick(d); }
});
svg1.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-padding)/2;},
y: function(d) {return h-(d+padding)+14;},
"font-family": "sans-serif",
"font-size": 12,
"fill": "#ffffff"
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment