Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from dustin/index.html
Last active August 27, 2017 21:09
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save mbostock/2565344 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 Feb 9, 2016. 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 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/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 Oct 5, 2015. No changes.
  4. mbostock revised this gist Oct 5, 2015. 3 changed files with 26 additions and 16 deletions.
    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 textPath element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath).
    41 changes: 25 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,38 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    #curve-text {
    font: 40px sans-serif;
    }

    #curve-line {
    stroke: #999;
    fill: none;
    }

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

    var svg = d3.select("body").append("svg")
    .attr("viewBox", "0 0 500 300");
    .attr("width", 960)
    .attr("height", 500)
    .attr("viewBox", "0 0 1000 300");

    svg.append("defs").append("path")
    .attr("id", "s3")
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");

    var thing = svg.append("g")
    .attr("id", "thing")
    .style("fill", "navy");
    .attr("id", "curve")
    .attr("d", "M100,200C200,100 300,0 400,100C500,200 600,300 700,200C800,100 900,100 900,100");

    thing.append("text")
    .style("font-size", "20px")
    svg.append("text")
    .attr("id", "curve-text")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");
    .attr("xlink:href", "#curve")
    .text("We go up, then we go down, then up again.");

    thing.append("use")
    .attr("xlink:href", "#s3")
    .style("stroke", "black")
    .style("fill", "none");
    svg.append("use")
    .attr("id", "curve-line")
    .attr("xlink:href", "#curve");

    </script>
    Binary file modified 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 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
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.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")
  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
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <body>
    <script src="http://d3js.org/d3.v2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
    <script>

    var svg = d3.select("body").append("svg")
  7. 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.
  8. mbostock revised this gist Jul 20, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <!DOCTYPE html>
    <meta charset="utf-8">
    <body>
  9. mbostock revised this gist May 1, 2012. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@

    <!DOCTYPE html>
    <meta charset="utf-8">
    <body>
    @@ -13,17 +14,17 @@

    var thing = svg.append("g")
    .attr("id", "thing")
    .attr("fill", "navy");
    .style("fill", "navy");

    thing.append("text")
    .attr("font-size", "20")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");
    .style("font-size", "20px")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");

    thing.append("use")
    .attr("xlink:href", "#s3")
    .attr("stroke", "black")
    .attr("fill", "none");
    .attr("xlink:href", "#s3")
    .style("stroke", "black")
    .style("fill", "none");

    </script>
  10. mbostock revised this gist May 1, 2012. 1 changed file with 20 additions and 44 deletions.
    64 changes: 20 additions & 44 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,53 +1,29 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Path Test</title>
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.4.0/d3.js"></script>
    </head>
    <body>
    <svg viewBox="0 0 500 300" version="1.1">
    <defs>
    <path id="s2" d="M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
    </defs>
    <g fill="navy">
    <text font-size="20">
    <textPath xlink:href="#s2">
    Wavy text is the gimmick for many years to come (original)
    </textPath>
    </text>
    <use x="0" y="0" xlink:href="#s2" stroke="black" fill="none"/>
    </g>
    </svg>
    <meta charset="utf-8">
    <body>
    <script src="http://d3js.org/d3.v2.js"></script>
    <script>

    <script type="text/javascript">
    var svg = d3.select("body").append("svg")
    .attr("viewBox", "0 0 500 300");

    var svg = d3.select("body")
    .append("svg:svg")
    .attr("viewBox", "0 0 500 300")
    .attr("version", "1.1");

    svg.append("defs")
    .append("path")
    svg.append("defs").append("path")
    .attr("id", "s3")
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");

    svg.append("svg:g")
    var thing = svg.append("g")
    .attr("id", "thing")
    .attr("fill", "navy")
    .append("text")
    .attr("font-size", "20")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");
    .attr("fill", "navy");

    thing.append("text")
    .attr("font-size", "20")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");

    d3.select("#thing").append("use")
    .attr("x", 0)
    .attr("y", 0)
    .attr("xlink:href", "#s3")
    .attr("stroke", "black")
    .attr("fill", "none");
    thing.append("use")
    .attr("xlink:href", "#s3")
    .attr("stroke", "black")
    .attr("fill", "none");

    </script>
    </body>
    </html>
    </script>
  11. @dustin dustin revised this gist May 1, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,13 +38,13 @@
    .append("text")
    .attr("font-size", "20")
    .append("textPath")
    .attr("{http://www.w3.org/1999/xlink}:href", "#s3")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");

    d3.select("#thing").append("use")
    .attr("x", 0)
    .attr("y", 0)
    .attr("{http://www.w3.org/1999/xlink}:href", "#s3")
    .attr("xlink:href", "#s3")
    .attr("stroke", "black")
    .attr("fill", "none");

  12. @dustin dustin revised this gist May 1, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,13 +38,13 @@
    .append("text")
    .attr("font-size", "20")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .attr("{http://www.w3.org/1999/xlink}:href", "#s3")
    .text("Wavy text is the gimmick for many years to come (d3)");

    d3.select("#thing").append("use")
    .attr("x", 0)
    .attr("y", 0)
    .attr("xlink:href", "#s3")
    .attr("{http://www.w3.org/1999/xlink}:href", "#s3")
    .attr("stroke", "black")
    .attr("fill", "none");

  13. @dustin dustin revised this gist May 1, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,8 @@

    var svg = d3.select("body")
    .append("svg:svg")
    .attr("viewBox", "0 0 500 300");
    .attr("viewBox", "0 0 500 300")
    .attr("version", "1.1");

    svg.append("defs")
    .append("path")
  14. @dustin dustin revised this gist May 1, 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 @@
    .attr("font-size", "20")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come");
    .text("Wavy text is the gimmick for many years to come (d3)");

    d3.select("#thing").append("use")
    .attr("x", 0)
  15. @dustin dustin revised this gist May 1, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,17 +6,17 @@
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.4.0/d3.js"></script>
    </head>
    <body>
    <svg viewBox = "0 0 500 300" version = "1.1">
    <svg viewBox="0 0 500 300" version="1.1">
    <defs>
    <path id = "s2" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
    <path id="s2" d="M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
    </defs>
    <g fill = "navy">
    <text font-size = "20">
    <textPath xlink:href = "#s2">
    Wavy text is the gimmick for many years to come
    <g fill="navy">
    <text font-size="20">
    <textPath xlink:href="#s2">
    Wavy text is the gimmick for many years to come (original)
    </textPath>
    </text>
    <use x = "0" y = "0" xlink:href = "#s2" stroke = "black" fill = "none"/>
    <use x="0" y="0" xlink:href="#s2" stroke="black" fill="none"/>
    </g>
    </svg>

  16. @dustin dustin revised this gist May 1, 2012. 1 changed file with 3 additions and 5 deletions.
    8 changes: 3 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,22 +6,20 @@
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.4.0/d3.js"></script>
    </head>
    <body>
    <!--
    <svg viewBox = "0 0 500 300" version = "1.1">
    <defs>
    <path id = "s3" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
    <path id = "s2" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
    </defs>
    <g fill = "navy">
    <text font-size = "20">
    <textPath xlink:href = "#s3">
    <textPath xlink:href = "#s2">
    Wavy text is the gimmick for many years to come
    </textPath>
    </text>
    <use x = "0" y = "0" xlink:href = "#s3" stroke = "black" fill = "none"/>
    <use x = "0" y = "0" xlink:href = "#s2" stroke = "black" fill = "none"/>
    </g>
    </svg>

    -->
    <script type="text/javascript">

    var svg = d3.select("body")
  17. @dustin dustin revised this gist May 1, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,6 @@
    svg.append("svg:g")
    .attr("id", "thing")
    .attr("fill", "navy")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    .append("text")
    .attr("font-size", "20")
    .append("textPath")
  18. @dustin dustin revised this gist May 1, 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
    @@ -26,7 +26,7 @@

    var svg = d3.select("body")
    .append("svg:svg")
    .attr("viewBox", "0 0 500 300);
    .attr("viewBox", "0 0 500 300");

    svg.append("defs")
    .append("path")
  19. @dustin dustin revised this gist May 1, 2012. 1 changed file with 9 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,17 +24,13 @@
    -->
    <script type="text/javascript">

    var w = 960,
    h = 500;

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

    svg.append("defs")
    .append("path")
    .attr("id", "d3")
    .attr("id", "s3")
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");

    svg.append("svg:g")
    @@ -47,6 +43,13 @@
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come");

    d3.select("#thing").append("use")
    .attr("x", 0)
    .attr("y", 0)
    .attr("xlink:href", "#s3")
    .attr("stroke", "black")
    .attr("fill", "none");

    </script>
    </body>
    </html>
  20. @dustin dustin created this gist May 1, 2012.
    52 changes: 52 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Path Test</title>
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.4.0/d3.js"></script>
    </head>
    <body>
    <!--
    <svg viewBox = "0 0 500 300" version = "1.1">
    <defs>
    <path id = "s3" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
    </defs>
    <g fill = "navy">
    <text font-size = "20">
    <textPath xlink:href = "#s3">
    Wavy text is the gimmick for many years to come
    </textPath>
    </text>
    <use x = "0" y = "0" xlink:href = "#s3" stroke = "black" fill = "none"/>
    </g>
    </svg>
    -->
    <script type="text/javascript">

    var w = 960,
    h = 500;

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

    svg.append("defs")
    .append("path")
    .attr("id", "d3")
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");

    svg.append("svg:g")
    .attr("id", "thing")
    .attr("fill", "navy")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    .append("text")
    .attr("font-size", "20")
    .append("textPath")
    .attr("xlink:href", "#s3")
    .text("Wavy text is the gimmick for many years to come");

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