Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 27, 2015 23:28
Show Gist options
  • Save anonymous/5e2db7b26fc44a39bb9b to your computer and use it in GitHub Desktop.
Save anonymous/5e2db7b26fc44a39bb9b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/gateko
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">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
// Building Bar Chart
var w = 300;
var h = 300;
var padding = 2;
var dataset = [5, 10, 15, 14, 33, 25,3,45,19,11];
var svg = d3.select('body').append("svg")
.attr("width", w).attr("height", h);
function colorPicker(v) {
if (v<=20) {
return "#666666";
} else {
return "#FF0033";
}
}
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d,i){ return i * (w/dataset.length);},
y: function(d){return h-(d*3);},
width: (w/dataset.length) - padding,
height: function(d){return d*3;},
fill: function(d) {
return colorPicker(d);
}
//fill: function(d){return "rgb(0, " + (d*10) + ", 0)";}
});
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 - padding)/2;},
y: function(d) {return h - (d*3);}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Building Bar Chart
var w = 300;
var h = 300;
var padding = 2;
var dataset = [5, 10, 15, 14, 33, 25,3,45,19,11];
var svg = d3.select('body').append("svg")
.attr("width", w).attr("height", h);
function colorPicker(v) {
if (v<=20) {
return "#666666";
} else {
return "#FF0033";
}
}
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d,i){ return i * (w/dataset.length);},
y: function(d){return h-(d*3);},
width: (w/dataset.length) - padding,
height: function(d){return d*3;},
fill: function(d) {
return colorPicker(d);
}
//fill: function(d){return "rgb(0, " + (d*10) + ", 0)";}
});
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 - padding)/2;},
y: function(d) {return h - (d*3);}
});</script></body>
</html>
Raw
jsbin.gateko.js
// Building Bar Chart
var w = 300;
var h = 300;
var padding = 2;
var dataset = [5, 10, 15, 14, 33, 25,3,45,19,11];
var svg = d3.select('body').append("svg")
.attr("width", w).attr("height", h);
function colorPicker(v) {
if (v<=20) {
return "#666666";
} else {
return "#FF0033";
}
}
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d,i){ return i * (w/dataset.length);},
y: function(d){return h-(d*3);},
width: (w/dataset.length) - padding,
height: function(d){return d*3;},
fill: function(d) {
return colorPicker(d);
}
//fill: function(d){return "rgb(0, " + (d*10) + ", 0)";}
});
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 - padding)/2;},
y: function(d) {return h - (d*3);}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment