Skip to content

Instantly share code, notes, and snippets.

@marionzualo

marionzualo/index.html

Forked from anonymous/index.html
Created November 3, 2015 08:21
Show Gist options
  • Save marionzualo/dab287829560e6255818 to your computer and use it in GitHub Desktop.
Save marionzualo/dab287829560e6255818 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/fewazu
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">
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 15, 20, 25];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
function colorPicker(v) {
if (v<=20) { return "#666666"; }
else if (v>20) { 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*4); },
width: w / dataset.length - padding,
height: function(d) { return (d*4); },
fill: function(d) { return colorPicker(d); }
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 15, 20, 25];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
function colorPicker(v) {
if (v<=20) { return "#666666"; }
else if (v>20) { 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*4); },
width: w / dataset.length - padding,
height: function(d) { return (d*4); },
fill: function(d) { return colorPicker(d); }
});</script></body>
</html>
Raw
jsbin.fewazu.js
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 15, 20, 25];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
function colorPicker(v) {
if (v<=20) { return "#666666"; }
else if (v>20) { 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*4); },
width: w / dataset.length - padding,
height: function(d) { return (d*4); },
fill: function(d) { return colorPicker(d); }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment