Skip to content

Instantly share code, notes, and snippets.

@sharonhoward

sharonhoward/README.md

Forked from iosonosempreio/README.md
Created August 21, 2024 05:33
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. @iosonosempreio iosonosempreio revised this gist Aug 2, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    let width = 600
    let height = 400
    let width = 960
    let height = 500

    let svg = d3.select('body').append('svg')
    .attr('width', width)
  2. @iosonosempreio iosonosempreio revised this gist Aug 2, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    How to create custom symbols to use with d3.symbol().

    As far as I understood, commands are [theese](https://www.w3.org/TR/2dcontext/#canvaspathmethods).

    Readapted from this [fiddle](https://jsfiddle.net/nimezhu/anzqbm6e/).
  3. @iosonosempreio iosonosempreio revised this gist Aug 2, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,3 @@
    How to create custom symbols to use with d3.symbol().
    As far as I understood, commands are [theese](https://www.w3.org/TR/2dcontext/#canvaspathmethods).
    Readapted from this [fiddle](https://jsfiddle.net/nimezhu/anzqbm6e/).
  4. @iosonosempreio iosonosempreio revised this gist Aug 2, 2018. 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
    @@ -13,7 +13,6 @@
    </style>

    <body>
    <h1>D3 V5 custom symbols</h1>
    <script src="//d3js.org/d3.v5.min.js"></script>
    <script src="script.js"></script>
    </body>
  5. @iosonosempreio iosonosempreio revised this gist Aug 2, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    How to create custom symbols to use with d3.symbol().
    Readapted from this [fiddle](https://jsfiddle.net/nimezhu/anzqbm6e/).
  6. @iosonosempreio iosonosempreio created this gist Aug 2, 2018.
    21 changes: 21 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <html>
    <style>
    line {
    stroke: #dadada;
    stroke-width: 1px;
    }

    path {
    fill: none;
    stroke: black;
    stroke-width: 1px;
    }
    </style>

    <body>
    <h1>D3 V5 custom symbols</h1>
    <script src="//d3js.org/d3.v5.min.js"></script>
    <script src="script.js"></script>
    </body>

    </html>
    51 changes: 51 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    let width = 600
    let height = 400

    let svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)

    let g = svg.append('g')
    .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')

    g.append('line')
    .attr('x1', 0)
    .attr('y1', -height / 2)
    .attr('x2', 0)
    .attr('y2', height / 2)

    g.append('line')
    .attr('x1', -width / 2)
    .attr('y1', 0)
    .attr('x2', width / 2)
    .attr('y2', 0)
    .style('stroke', '#DADADA')
    .style('stroke-width', 1)

    var cross = {
    draw: function(context, size) {
    context.moveTo(-size / 2, -size / 2)
    context.lineTo(size / 2, size / 2)
    context.moveTo(size / 2, -size / 2)
    context.lineTo(-size / 2, size / 2)
    }
    }

    var diamond = {
    draw: function(context, size) {
    context.moveTo(0, -size / 2)
    context.lineTo(size / 3, 0)
    context.lineTo(0, size / 2)
    context.lineTo(-size / 3, 0)
    context.lineTo(0, -size / 2)
    context.closePath();
    }
    }

    let size = 50;

    g.append("path")
    .attr("d", d3.symbol().type(cross).size(size))

    g.append("path")
    .attr("d", d3.symbol().type(diamond).size(size*1.3))