Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active June 26, 2016 08:04
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save mbostock/1067636 to your computer and use it in GitHub Desktop.
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 Nov 17, 2015. 1 changed file with 45 additions and 49 deletions.
    94 changes: 45 additions & 49 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,100 +1,96 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">
    <meta charset="utf-8">
    <style>

    body {
    background: #333;
    }

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

    var w = 960,
    h = 500;
    var width = 960,
    height = 500;

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

    var defs = svg.append("svg:defs");
    var defs = svg.append("defs");

    defs.append("svg:clipPath")
    defs.append("clipPath")
    .attr("id", "circle1")
    .append("svg:circle")
    .append("circle")
    .attr("cx", 350)
    .attr("cy", 200)
    .attr("r", 180);

    defs.append("svg:clipPath")
    defs.append("clipPath")
    .attr("id", "circle2")
    .append("svg:circle")
    .append("circle")
    .attr("cx", 550)
    .attr("cy", 200)
    .attr("r", 180);

    defs.append("svg:clipPath")
    defs.append("clipPath")
    .attr("id", "circle3")
    .append("svg:circle")
    .append("circle")
    .attr("cx", 450)
    .attr("cy", 300)
    .attr("r", 180);

    svg.append("svg:rect")
    svg.append("rect")
    .attr("clip-path", "url(#circle1)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#ff0000");

    svg.append("svg:rect")
    svg.append("rect")
    .attr("clip-path", "url(#circle2)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#00ff00");

    svg.append("svg:rect")
    svg.append("rect")
    .attr("clip-path", "url(#circle3)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#0000ff");

    svg.append("svg:g")
    svg.append("g")
    .attr("clip-path", "url(#circle1)")
    .append("svg:rect")
    .append("rect")
    .attr("clip-path", "url(#circle2)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#ffff00");

    svg.append("svg:g")
    svg.append("g")
    .attr("clip-path", "url(#circle2)")
    .append("svg:rect")
    .append("rect")
    .attr("clip-path", "url(#circle3)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#00ffff");

    svg.append("svg:g")
    svg.append("g")
    .attr("clip-path", "url(#circle3)")
    .append("svg:rect")
    .append("rect")
    .attr("clip-path", "url(#circle1)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#ff00ff");

    svg.append("svg:g")
    svg.append("g")
    .attr("clip-path", "url(#circle3)")
    .append("svg:g")
    .append("g")
    .attr("clip-path", "url(#circle2)")
    .append("svg:rect")
    .append("rect")
    .attr("clip-path", "url(#circle1)")
    .attr("width", w)
    .attr("height", h)
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#ffffff");

    </script>
    </body>
    </html>
    </script>
  3. mbostock revised this gist Dec 20, 2012. No changes.
  4. 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.
  5. mbostock created this gist Jul 6, 2011.
    100 changes: 100 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">

    body {
    background: #333;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">

    var w = 960,
    h = 500;

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

    var defs = svg.append("svg:defs");

    defs.append("svg:clipPath")
    .attr("id", "circle1")
    .append("svg:circle")
    .attr("cx", 350)
    .attr("cy", 200)
    .attr("r", 180);

    defs.append("svg:clipPath")
    .attr("id", "circle2")
    .append("svg:circle")
    .attr("cx", 550)
    .attr("cy", 200)
    .attr("r", 180);

    defs.append("svg:clipPath")
    .attr("id", "circle3")
    .append("svg:circle")
    .attr("cx", 450)
    .attr("cy", 300)
    .attr("r", 180);

    svg.append("svg:rect")
    .attr("clip-path", "url(#circle1)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#ff0000");

    svg.append("svg:rect")
    .attr("clip-path", "url(#circle2)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#00ff00");

    svg.append("svg:rect")
    .attr("clip-path", "url(#circle3)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#0000ff");

    svg.append("svg:g")
    .attr("clip-path", "url(#circle1)")
    .append("svg:rect")
    .attr("clip-path", "url(#circle2)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#ffff00");

    svg.append("svg:g")
    .attr("clip-path", "url(#circle2)")
    .append("svg:rect")
    .attr("clip-path", "url(#circle3)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#00ffff");

    svg.append("svg:g")
    .attr("clip-path", "url(#circle3)")
    .append("svg:rect")
    .attr("clip-path", "url(#circle1)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#ff00ff");

    svg.append("svg:g")
    .attr("clip-path", "url(#circle3)")
    .append("svg:g")
    .attr("clip-path", "url(#circle2)")
    .append("svg:rect")
    .attr("clip-path", "url(#circle1)")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "#ffffff");

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