Skip to content

Instantly share code, notes, and snippets.

@vlandham

vlandham/README.md

Forked from mbostock/.block
Created January 11, 2013 21:11
Download ZIP

Revisions

  1. @mbostock mbostock revised this gist Dec 20, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. @mbostock mbostock revised this gist Dec 20, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@

    var data = d3.svg.symbolTypes;

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

  3. @mbostock mbostock revised this gist Dec 20, 2012. 2 changed files with 3 additions and 2 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    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.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,9 +38,9 @@

    var data = d3.svg.symbolTypes;

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

    var x = d3.scale.ordinal()
    .domain(data)
  4. @mbostock mbostock created this gist Dec 20, 2012.
    88 changes: 88 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    <!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: 10, right: 10, bottom: 20, left:10},
    width = 960 - margin.right - margin.left,
    height = 100 - 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>