Skip to content

Instantly share code, notes, and snippets.

@chrisbrich
Created November 30, 2012 03:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save chrisbrich/4173587 to your computer and use it in GitHub Desktop.
Ordinal scale w/ brushing
<!DOCTYPE html>
<html>
<head>
<title>Ordinal scale w/ brushing</title>
<script src="http://d3js.org/d3.v2.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript">
var alphabet = "abcdefghijklmnopqrstuvwxyz",
yScale = d3.scale.ordinal().domain(d3.range(26).map(function(d){return alphabet.charAt(d)})).rangePoints([0,500],1);
axis = d3.svg.axis().scale(yScale).tickSize(5).orient("right"),
brushed = function(){var selected = yScale.domain().filter(function(d){return (brush.extent()[0] <= yScale(d)) && (yScale(d) <= brush.extent()[1])});
d3.select(".selected").text(selected.join(","));},
brush = d3.svg.brush().y(yScale).on("brush",brushed);
d3.select("body").append("svg")
.attr("class", "axis")
.attr("width", "300")
.attr("height", "530")
.append("g")
.attr("transform", "translate(50,30)")
.call(axis)
.append("g")
.attr("class", "brush")
.call(brush)
.selectAll("rect")
.style("visibility", null)
.attr("x", -15)
.attr("width", 30);
d3.select("svg").append("text")
.attr("class","selected")
.attr("transform","translate(70,30)");
</script>
</body>
</html>
.axis line,.axis path {
fill: none;
stroke: lightgrey;
}
rect.background {
fill: transparent;
}
.resize rect {
fill: rgba(0,0,0,0.1);
}
rect.extent {
fill: rgba(255,255,255,0.25);
stroke: rgba(0,0,0,0.6);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment