Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active April 16, 2023 06:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbostock/3680957 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbostock/3680957 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mbostock revised this gist Aug 30, 2017. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    A series of related examples:

    * [Canvas geometric zooming](http://bl.ocks.org/3680958)
    * [Canvas semantic zooming](http://bl.ocks.org/3681006)
    * [SVG geometric zooming](http://bl.ocks.org/3680999)
    * [Canvas geometric zooming](https://bl.ocks.org/mbostock/3680958)
    * [Canvas semantic zooming](https://bl.ocks.org/mbostock/3681006)
    * [SVG geometric zooming](https://bl.ocks.org/mbostock/3680999)
    * **SVG semantic zooming**
  2. mbostock revised this gist Aug 30, 2017. 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
    @@ -13,7 +13,7 @@
    data = d3.range(2000).map(function() { return [randomX(), randomY()]; });

    var circle = svg.selectAll("circle")
    .data(data)
    .data(data)
    .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", transform(d3.zoomIdentity));
  3. mbostock revised this gist Aug 30, 2017. 1 changed file with 23 additions and 56 deletions.
    79 changes: 23 additions & 56 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,73 +1,40 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoom + Pan</title>
    <style>

    svg {
    font: 10px sans-serif;
    }

    .overlay {
    fill: none;
    pointer-events: all;
    }

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

    </style>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    var width = 960,
    height = 500;

    var randomX = d3.random.normal(width / 2, 80),
    randomY = d3.random.normal(height / 2, 80);

    var data = d3.range(2000).map(function() {
    return [
    randomX(),
    randomY()
    ];
    });

    var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

    var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));

    svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);
    var randomX = d3.randomNormal(width / 2, 80),
    randomY = d3.randomNormal(height / 2, 80),
    data = d3.range(2000).map(function() { return [randomX(), randomY()]; });

    var circle = svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", transform);
    .attr("transform", transform(d3.zoomIdentity));

    svg.append("rect")
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .attr("width", width)
    .attr("height", height)
    .call(d3.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoom));

    function zoom() {
    circle.attr("transform", transform);
    circle.attr("transform", transform(d3.event.transform));
    }

    function transform(d) {
    return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
    function transform(t) {
    return function(d) {
    return "translate(" + t.apply(d) + ")";
    };
    }

    </script>
  4. 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
  5. mbostock revised this gist Oct 31, 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
    @@ -21,7 +21,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 width = 960,
  6. 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
    @@ -21,7 +21,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 width = 960,
  7. mbostock revised this gist Jan 29, 2014. 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
    @@ -1,7 +1,6 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoom + Pan</title>
    <script src="http://d3js.org/d3.v2.min.js"></script>
    <style>

    svg {
    @@ -22,6 +21,7 @@

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

    var width = 960,
  8. 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.
  9. mbostock revised this gist Sep 8, 2012. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    A series of related examples:

    * [Canvas geometric zooming](http://bl.ocks.org/3680958)
    * [Canvas semantic zooming](http://bl.ocks.org/3681006)
    * [SVG geometric zooming](http://bl.ocks.org/3680999)
    * **SVG semantic zooming**
  10. mbostock revised this gist Sep 8, 2012. 1 changed file with 27 additions and 5 deletions.
    32 changes: 27 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,11 +4,22 @@
    <script src="http://d3js.org/d3.v2.min.js"></script>
    <style>

    svg {
    font: 10px sans-serif;
    }

    .overlay {
    fill: none;
    pointer-events: all;
    }

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

    </style>
    <body>
    <script>
    @@ -26,26 +37,37 @@
    ];
    });

    var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

    var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
    .append("g");
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));

    svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

    svg.selectAll("circle")
    var circle = svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return "translate(" + d + ")"; });
    .attr("transform", transform);

    function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    circle.attr("transform", transform);
    }

    function transform(d) {
    return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
    }

    </script>
  11. mbostock created this gist Sep 8, 2012.
    51 changes: 51 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoom + Pan</title>
    <script src="http://d3js.org/d3.v2.min.js"></script>
    <style>

    .overlay {
    fill: none;
    pointer-events: all;
    }

    </style>
    <body>
    <script>

    var width = 960,
    height = 500;

    var randomX = d3.random.normal(width / 2, 80),
    randomY = d3.random.normal(height / 2, 80);

    var data = d3.range(2000).map(function() {
    return [
    randomX(),
    randomY()
    ];
    });

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
    .append("g");

    svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

    svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return "translate(" + d + ")"; });

    function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    </script>