Ordinal Brushing

Brushing makes more sense for quantitative dimensions. It’s possible to use a brush to select categorical values, as shown here, though I’d recommend using per-value toggles instead. This way, users can pick arbitrary sets of values, rather than being forced to pick contiguous ranges.

forked from mbostock's block: Ordinal Brushing

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

path {
  -webkit-transition: fill-opacity 250ms linear;
}

.selecting path {
  fill-opacity: .2;
}

.selecting path.selected {
  stroke: #f00;
  stroke-width: 2px;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data = d3.svg.symbolTypes;

var margin = {top: 210, right: 10, bottom: 210, left: 10},
    width = 960 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(data)
    .rangePoints([0, width], 1);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

var symbol = svg.append("g").selectAll("path")
    .data(data)
  .enter().append("path")
    .attr("transform", function(d) { return "translate(" + x(d) + "," + (height / 2) + ")"; })
    .attr("d", d3.svg.symbol().type(String).size(200));

svg.append("g")
    .attr("class", "brush")
    .call(d3.svg.brush().x(x)
    .on("brushstart", brushstart)
    .on("brush", brushmove)
    .on("brushend", brushend))
  .selectAll("rect")
    .attr("height", height);

function brushstart() {
  svg.classed("selecting", true);
}

function brushmove() {
  var s = d3.event.target.extent();
  symbol.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; });
}

function brushend() {
  svg.classed("selecting", !d3.event.target.empty());
}

</script>

https://d3js.org/d3.v3.min.js