Skip to content

Instantly share code, notes, and snippets.

@chromy
Last active August 29, 2015 14:05
Show Gist options
  • Save chromy/f8cb242657a7027cf60c to your computer and use it in GitHub Desktop.
Save chromy/f8cb242657a7027cf60c to your computer and use it in GitHub Desktop.
Drawable Graphs

Drawable Graphs in d3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-family: "PT Sans", sans-serif;
}
.example rect {
fill: steelblue;
}
.example text {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div id="content">
<svg id="example1" class="example"></svg>
<svg id="example2" class="example"></svg>
<svg id="example3" class="example"></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function chart() {
var width = 700, // default width
height = 80; // default height
var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
var max = 100;
var discrete = false;
var y = d3.scale.linear()
.range([height, 0]);
function my(selection) {
y.domain([0, max]);
var barWidth = width / data.length;
selection
.attr("width", width)
.attr("height", height);
var bar = selection.selectAll("g")
.data(data);
var enterg = bar.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });
enterg.append("rect");
var rect = bar.select("rect")
.attr("y", function(d) { return y(d); })
.attr("height", function(d) { return height - y(d); })
.attr("width", barWidth - 1);
selection
.on('mousemove', function() {
var pt = d3.mouse(this);
var px = pt[0];
var py = pt[1];
var sample = Math.floor(px / barWidth);
var newValue = y.invert(py);
if (discrete) {
newValue = Math.floor(newValue);
}
data[sample] = newValue;
my(selection);
});
}
my.width = function(value) {
if (!arguments.length) return width;
width = value;
return my;
};
my.height = function(value) {
if (!arguments.length) return height;
height = value;
return my;
};
my.max = function(value) {
if (!arguments.length) return max;
max = value;
return my;
};
my.data = function(value) {
if (!arguments.length) return data;
data = value;
return my;
};
my.n = function(value) {
if (!arguments.length) return data.length;
data.length = value;
// Set any new values to 50%
for (var i=0; i<data.length; i++) {
if (!data[i]) {
data[i] = max / 2;
}
}
return my;
};
my.discrete = function(value) {
if (!arguments.length) return discrete;
discrete = value;
return my;
};
return my;
}
// Minimal example.
var example1 = chart();
d3.select("#example1").call(example1);
// Large n.
var example2 = chart()
.n(100);
d3.select("#example2").call(example2);
var example3 = chart()
.n(20)
.max(8)
.discrete(true);
d3.select("#example3").call(example3);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment