vlandham/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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="http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://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>