Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active July 25, 2018 18:41
Download ZIP

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Oct 30, 2015. 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
    @@ -17,7 +17,7 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var svg = d3.select("body").append("svg")
  3. mbostock revised this gist Jun 11, 2015. 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
    @@ -17,7 +17,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var svg = d3.select("body").append("svg")
  4. mbostock revised this gist Jul 15, 2013. 1 changed file with 12 additions and 6 deletions.
    18 changes: 12 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,19 +30,25 @@
    .append("feGaussianBlur")
    .attr("stdDeviation", 5);

    svg.append("image")
    .attr("xlink:href", "octocat.jpg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("filter", "url(#blur)");

    d3.select("body").append("input")
    .attr("type", "range")
    .attr("min", 0)
    .attr("max", 100)
    .attr("value", 25)
    .on("change", blur);

    var image = new Image;
    image.src = "octocat.jpg";
    image.onload = load;

    function load() {
    svg.append("image")
    .attr("xlink:href", this.src)
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("filter", "url(#blur)");
    }

    function blur() {
    filter.attr("stdDeviation", this.value / 5);
    }
  5. mbostock revised this gist Jul 15, 2013. 2 changed files with 19 additions and 19 deletions.
    38 changes: 19 additions & 19 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,12 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <style type="text/css">
    <meta charset="utf-8">
    <style>

    body {
    position: relative;
    width: 960px;
    height: 500px;
    }

    input {
    position: absolute;
    @@ -12,24 +15,23 @@
    width: 200px;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript">
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var svg = d3.select("body").append("svg:svg")
    var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

    var filter = svg.append("svg:defs")
    .append("svg:filter")
    var filter = svg.append("defs")
    .append("filter")
    .attr("id", "blur")
    .append("svg:feGaussianBlur")
    .append("feGaussianBlur")
    .attr("stdDeviation", 5);

    svg.append("svg:image")
    .attr("xlink:href", "http://octodex.github.com/images/original.jpg")
    svg.append("image")
    .attr("xlink:href", "octocat.jpg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("filter", "url(#blur)");
    @@ -45,6 +47,4 @@
    filter.attr("stdDeviation", this.value / 5);
    }

    </script>
    </body>
    </html>
    </script>
    Binary file added octocat.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  6. mbostock revised this gist Oct 12, 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.
  7. mbostock revised this gist Nov 6, 2011. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    A demonstration of SVG's Gaussian blur filter effect: the svg:feGaussianBlur element. Image source: [GitHub's octodex](http://octodex.github.com/).
    A demonstration of SVG's Gaussian blur filter effect: the svg:feGaussianBlur element.

    Image source: [GitHub's octodex](http://octodex.github.com/original/).
  8. mbostock revised this gist Nov 6, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    A demonstration of SVG's Gaussian blur filter effect: the svg:feGaussianBlur element.
    A demonstration of SVG's Gaussian blur filter effect: the svg:feGaussianBlur element. Image source: [GitHub's octodex](http://octodex.github.com/).
  9. mbostock created this gist Nov 6, 2011.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    A demonstration of SVG's Gaussian blur filter effect: the svg:feGaussianBlur element.
    50 changes: 50 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <style type="text/css">

    input {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 200px;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript">

    var svg = d3.select("body").append("svg:svg")
    .attr("width", 960)
    .attr("height", 500);

    var filter = svg.append("svg:defs")
    .append("svg:filter")
    .attr("id", "blur")
    .append("svg:feGaussianBlur")
    .attr("stdDeviation", 5);

    svg.append("svg:image")
    .attr("xlink:href", "http://octodex.github.com/images/original.jpg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("filter", "url(#blur)");

    d3.select("body").append("input")
    .attr("type", "range")
    .attr("min", 0)
    .attr("max", 100)
    .attr("value", 25)
    .on("change", blur);

    function blur() {
    filter.attr("stdDeviation", this.value / 5);
    }

    </script>
    </body>
    </html>