Skip to content

Instantly share code, notes, and snippets.

@JesuscoinsIII

JesuscoinsIII/.block

Forked from dysbulic/.block
Created July 30, 2024 10:50
Download ZIP

Revisions

  1. @dysbulic dysbulic revised this gist Feb 3, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -175,6 +175,7 @@
    .attr('y', centroid[1])
    .attr('dy', '0.33em')
    .style('fill', ({ data }) => data.alliance)
    .attr('title', d.data.name)
    .text(d.data.symbol)
    })

  2. @dysbulic dysbulic revised this gist Aug 6, 2020. No changes.
  3. @dysbulic dysbulic revised this gist Aug 6, 2020. 1 changed file with 27 additions and 2 deletions.
    29 changes: 27 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,8 @@
    var pieGenerator = d3.pie()
    .value(function(d) {return d.quantity;})
    .sort(function(a, b) {
    return a.name.localeCompare(b.name);
    console.log(b)
    return a.starts <= b.starts;
    });

    var months = [
    @@ -39,80 +40,104 @@
    symbol: '♑',
    starts: new Date('2021/01/21 17:15'),
    ends: new Date('2021/02/16 17:47'),
    color: 'yellow',
    color: 'gold',
    alliance: 'blue',
    },
    {
    name: 'Aquarius',
    symbol: '♒',
    starts: new Date('2021/02/16 17:47'),
    ends: new Date('2021/03/11 17:47'),
    color: 'brown',
    alliance: 'purple',
    },
    {
    name: 'Pisces',
    symbol: '♓',
    starts: new Date('2021/03/11 17:47'),
    ends: new Date('2021/04/18 17:45'),
    color: 'silver',
    alliance: 'purple',
    },
    {
    name: 'Aries',
    symbol: '♈',
    starts: new Date('2021/04/18 17:45'),
    ends: new Date('2021/05/13 17:45'),
    color: 'black',
    alliance: 'red',
    },
    {
    name: 'Taurus',
    symbol: '♉',
    starts: new Date('2021/05/13 17:45'),
    ends: new Date('2021/06/21 17:45'),
    color: 'green',
    alliance: 'red',
    },
    {
    name: 'Gemini',
    symbol: '♊',
    starts: new Date('2021/06/21 17:45'),
    ends: new Date('2021/07/20 17:45'),
    color: 'yellow',
    alliance: 'purple',
    },
    {
    name: 'Cancer',
    symbol: '♋',
    starts: new Date('2021/07/20 17:45'),
    ends: new Date('2021/08/10 17:45'),
    color: 'violet',
    alliance: 'blue',
    },
    {
    name: 'Leo',
    symbol: '♌',
    starts: new Date('2021/08/10 17:45'),
    ends: new Date('2021/09/16 17:45'),
    color: '#f5c389', //'peach',
    alliance: 'blue',
    },
    {
    name: 'Virgo',
    symbol: '♍',
    starts: new Date('2021/09/16 17:45'),
    ends: new Date('2021/10/30 17:45'),
    color: '#c99f32', //'copper',
    alliance: 'purple',
    },
    {
    name: 'Libra',
    symbol: '♎',
    starts: new Date('2021/10/30 17:45'),
    ends: new Date('2021/11/23 17:45'),
    color: 'white',
    alliance: 'red',
    },
    {
    name: 'Scorpio',
    symbol: '♏',
    starts: new Date('2021/11/23 17:45'),
    ends: new Date('2021/11/29 17:45'),
    color: 'pink',
    alliance: 'red',
    },
    {
    name: 'Ophiuchus',
    symbol: '⛎',
    starts: new Date('2021/11/29 17:45'),
    ends: new Date('2021/12/27 17:45'),
    color: 'cyan',
    alliance: 'purple',
    },
    {
    name: 'Sagittarius',
    symbol: '♐',
    starts: new Date('2021/12/27 17:45'),
    ends: new Date('2022/01/20 17:45'),
    color: 'orange',
    alliance: 'blue',
    },
    ]

  4. @dysbulic dysbulic revised this gist Aug 6, 2020. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    }
    text {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-size: 25px;
    font-weight: bold;
    fill: white;
    text-anchor: middle;
    @@ -134,7 +134,7 @@
    .enter()
    .append('path')
    .attr('d', arcGenerator)
    .style('fill', ({ data }) => console.log(data))
    .style('fill', ({ data }) => data.color)


    // Labels
    @@ -149,6 +149,7 @@
    .attr('x', centroid[0])
    .attr('y', centroid[1])
    .attr('dy', '0.33em')
    .style('fill', ({ data }) => data.alliance)
    .text(d.data.symbol)
    })

  5. @dysbulic dysbulic revised this gist Aug 6, 2020. 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
    @@ -134,7 +134,7 @@
    .enter()
    .append('path')
    .attr('d', arcGenerator)
    .style('fill', 'green')
    .style('fill', ({ data }) => console.log(data))


    // Labels
  6. @dysbulic dysbulic revised this gist Aug 6, 2020. 3 changed files with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    </head>

    <style>
    svg { max-height: 98vh; }
    path {
    fill: orange;
    stroke: white;
    @@ -38,6 +39,8 @@
    symbol: '♑',
    starts: new Date('2021/01/21 17:15'),
    ends: new Date('2021/02/16 17:47'),
    color: 'yellow',
    alliance: 'blue',
    },
    {
    name: 'Aquarius',
    @@ -130,7 +133,8 @@
    .data(arcData)
    .enter()
    .append('path')
    .attr('d', arcGenerator);
    .attr('d', arcGenerator)
    .style('fill', 'green')


    // Labels
    @@ -145,8 +149,8 @@
    .attr('x', centroid[0])
    .attr('y', centroid[1])
    .attr('dy', '0.33em')
    .text(d.data.symbol);
    });
    .text(d.data.symbol)
    })

    // Readable
    d3.select('body')
    @@ -157,7 +161,7 @@
    .each(function(d) {
    d3.select(this)
    .text(`${d.symbol}: ${d.name} <${d.starts.getMonth() + 1}/${d.starts.getDate()} - ${d.ends.getMonth() + 1}/${d.ends.getDate()}>`)
    });
    })
    </script>
    </body>
    </html>
    Binary file modified preview.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.
    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.
  7. @dysbulic dysbulic revised this gist Apr 29, 2019. 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
    @@ -19,8 +19,8 @@
    </style>

    <body>
    <svg width="700" height="220">
    <g transform="translate(300, 110)"></g>
    <svg width="100%" height="100%" viewBox="0 -150 300 300">
    <g transform="translate(150, 0)"></g>
    </svg>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  8. @dysbulic dysbulic revised this gist Apr 29, 2019. No changes.
  9. @dysbulic dysbulic revised this gist Apr 1, 2019. No changes.
  10. @dysbulic dysbulic revised this gist Apr 1, 2019. 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
    @@ -32,6 +32,7 @@
    });

    var months = [
    {}, // Don't know why that's needed
    {
    name: 'Capricorn',
    symbol: '♑',
    @@ -155,7 +156,7 @@
    .append('li')
    .each(function(d) {
    d3.select(this)
    .text(d.name);
    .text(`${d.symbol}: ${d.name} <${d.starts.getMonth() + 1}/${d.starts.getDate()} - ${d.ends.getMonth() + 1}/${d.ends.getDate()}>`)
    });
    </script>
    </body>
  11. @dysbulic dysbulic revised this gist Apr 1, 2019. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -148,13 +148,14 @@
    });

    // Readable
    d3.select('ul')
    .selectAll('li')
    d3.select('body')
    .append('ul')
    .data(months)
    .enter()
    .append('li')
    .each(function(d) {
    console.log(d)
    d3.select(this)
    .text(d.name);
    });
    </script>
    </body>
  12. @dysbulic dysbulic revised this gist Apr 1, 2019. 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
    @@ -154,7 +154,6 @@
    .enter()
    .append('li')
    .each(function(d) {
    var centroid = arcGenerator.centroid(d);
    console.log(d)
    });
    </script>
  13. @dysbulic dysbulic revised this gist Apr 1, 2019. No changes.
  14. @dysbulic dysbulic revised this gist Apr 1, 2019. No changes.
  15. @dysbulic dysbulic revised this gist Apr 1, 2019. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -146,6 +146,17 @@
    .attr('dy', '0.33em')
    .text(d.data.symbol);
    });

    // Readable
    d3.select('ul')
    .selectAll('li')
    .data(months)
    .enter()
    .append('li')
    .each(function(d) {
    var centroid = arcGenerator.centroid(d);
    console.log(d)
    });
    </script>
    </body>
    </html>
  16. @dysbulic dysbulic revised this gist Mar 17, 2019. 1 changed file with 5 additions and 11 deletions.
    16 changes: 5 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -112,20 +112,14 @@
    },
    ]



    var fruits = [
    {name: 'Apples', quantity: 20},
    {name: 'Bananas', quantity: 40},
    {name: 'Cherries', quantity: 50},
    {name: 'Damsons', quantity: 10},
    {name: 'Elderberries', quantity: 30},
    ];
    for(var i = 0; i < months.length; i++) {
    months[i].quantity = (months[i].ends - months[i].starts) / (60 * 60 * 60 * 24 * 10)
    }

    // Create an arc generator with configuration
    var arcGenerator = d3.arc()
    .innerRadius(30)
    .outerRadius(100);
    .outerRadius(150);

    var arcData = pieGenerator(months);

    @@ -150,7 +144,7 @@
    .attr('x', centroid[0])
    .attr('y', centroid[1])
    .attr('dy', '0.33em')
    .text(d.data.name);
    .text(d.data.symbol);
    });
    </script>
    </body>
  17. @dysbulic dysbulic revised this gist Mar 17, 2019. 4 changed files with 165 additions and 2 deletions.
    87 changes: 85 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,6 +31,89 @@
    return a.name.localeCompare(b.name);
    });

    var months = [
    {
    name: 'Capricorn',
    symbol: '♑',
    starts: new Date('2021/01/21 17:15'),
    ends: new Date('2021/02/16 17:47'),
    },
    {
    name: 'Aquarius',
    symbol: '♒',
    starts: new Date('2021/02/16 17:47'),
    ends: new Date('2021/03/11 17:47'),
    },
    {
    name: 'Pisces',
    symbol: '♓',
    starts: new Date('2021/03/11 17:47'),
    ends: new Date('2021/04/18 17:45'),
    },
    {
    name: 'Aries',
    symbol: '♈',
    starts: new Date('2021/04/18 17:45'),
    ends: new Date('2021/05/13 17:45'),
    },
    {
    name: 'Taurus',
    symbol: '♉',
    starts: new Date('2021/05/13 17:45'),
    ends: new Date('2021/06/21 17:45'),
    },
    {
    name: 'Gemini',
    symbol: '♊',
    starts: new Date('2021/06/21 17:45'),
    ends: new Date('2021/07/20 17:45'),
    },
    {
    name: 'Cancer',
    symbol: '♋',
    starts: new Date('2021/07/20 17:45'),
    ends: new Date('2021/08/10 17:45'),
    },
    {
    name: 'Leo',
    symbol: '♌',
    starts: new Date('2021/08/10 17:45'),
    ends: new Date('2021/09/16 17:45'),
    },
    {
    name: 'Virgo',
    symbol: '♍',
    starts: new Date('2021/09/16 17:45'),
    ends: new Date('2021/10/30 17:45'),
    },
    {
    name: 'Libra',
    symbol: '♎',
    starts: new Date('2021/10/30 17:45'),
    ends: new Date('2021/11/23 17:45'),
    },
    {
    name: 'Scorpio',
    symbol: '♏',
    starts: new Date('2021/11/23 17:45'),
    ends: new Date('2021/11/29 17:45'),
    },
    {
    name: 'Ophiuchus',
    symbol: '⛎',
    starts: new Date('2021/11/29 17:45'),
    ends: new Date('2021/12/27 17:45'),
    },
    {
    name: 'Sagittarius',
    symbol: '♐',
    starts: new Date('2021/12/27 17:45'),
    ends: new Date('2022/01/20 17:45'),
    },
    ]



    var fruits = [
    {name: 'Apples', quantity: 20},
    {name: 'Bananas', quantity: 40},
    @@ -41,10 +124,10 @@

    // Create an arc generator with configuration
    var arcGenerator = d3.arc()
    .innerRadius(20)
    .innerRadius(30)
    .outerRadius(100);

    var arcData = pieGenerator(fruits);
    var arcData = pieGenerator(months);

    // Create a path element and set its d attribute
    d3.select('g')
    Binary file modified preview.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.
    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.
    80 changes: 80 additions & 0 deletions zodiac.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    [
    {
    name: 'Capricorn',
    symbol: '♑',
    starts: new Date('2021/01/21 17:15'),
    ends: new Date('2021/02/16 17:47'),
    },
    {
    name: 'Aquarius',
    symbol: '♒',
    starts: new Date('2021/02/16 17:47'),
    ends: new Date('2021/03/11 17:47'),
    },
    {
    name: 'Pisces',
    symbol: '♓',
    starts: new Date('2021/03/11 17:47'),
    ends: new Date('2021/04/18 17:45'),
    },
    {
    name: 'Aries',
    symbol: '♈',
    starts: new Date('2021/04/18 17:45'),
    ends: new Date('2021/05/13 17:45'),
    },
    {
    name: 'Taurus',
    symbol: '♉',
    starts: new Date('2021/05/13 17:45'),
    ends: new Date('2021/06/21 17:45'),
    },
    {
    name: 'Gemini',
    symbol: '♊',
    starts: new Date('2021/06/21 17:45'),
    ends: new Date('2021/07/20 17:45'),
    },
    {
    name: 'Cancer',
    symbol: '♋',
    starts: new Date('2021/07/20 17:45'),
    ends: new Date('2021/08/10 17:45'),
    },
    {
    name: 'Leo',
    symbol: '♌',
    starts: new Date('2021/08/10 17:45'),
    ends: new Date('2021/09/16 17:45'),
    },
    {
    name: 'Virgo',
    symbol: '♍',
    starts: new Date('2021/09/16 17:45'),
    ends: new Date('2021/10/30 17:45'),
    },
    {
    name: 'Libra',
    symbol: '♎',
    starts: new Date('2021/10/30 17:45'),
    ends: new Date('2021/11/23 17:45'),
    },
    {
    name: 'Scorpio',
    symbol: '♏',
    starts: new Date('2021/11/23 17:45'),
    ends: new Date('2021/11/29 17:45'),
    },
    {
    name: 'Ophiuchus',
    symbol: '⛎',
    starts: new Date('2021/11/29 17:45'),
    ends: new Date('2021/12/27 17:45'),
    },
    {
    name: 'Sagittarius',
    symbol: '♐',
    starts: new Date('2021/12/27 17:45'),
    ends: new Date('2022/01/20 17:45'),
    },
    ]
  18. @animateddata animateddata revised this gist Aug 2, 2017. 2 changed files with 0 additions and 0 deletions.
    Binary file added preview.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.
    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.
  19. @peterrcook peterrcook created this gist Dec 15, 2016.
    3 changes: 3 additions & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    license: gpl-3.0
    height: 230
    border: no
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Pie sort.

    From [D3 in Depth](http://d3indepth.com) book by [Peter Cook](http://animateddata.co.uk).
    74 changes: 74 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <head>
    <title>Pie sort</title>
    </head>

    <style>
    path {
    fill: orange;
    stroke: white;
    }
    text {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    fill: white;
    text-anchor: middle;
    }
    </style>

    <body>
    <svg width="700" height="220">
    <g transform="translate(300, 110)"></g>
    </svg>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <script>
    var pieGenerator = d3.pie()
    .value(function(d) {return d.quantity;})
    .sort(function(a, b) {
    return a.name.localeCompare(b.name);
    });

    var fruits = [
    {name: 'Apples', quantity: 20},
    {name: 'Bananas', quantity: 40},
    {name: 'Cherries', quantity: 50},
    {name: 'Damsons', quantity: 10},
    {name: 'Elderberries', quantity: 30},
    ];

    // Create an arc generator with configuration
    var arcGenerator = d3.arc()
    .innerRadius(20)
    .outerRadius(100);

    var arcData = pieGenerator(fruits);

    // Create a path element and set its d attribute
    d3.select('g')
    .selectAll('path')
    .data(arcData)
    .enter()
    .append('path')
    .attr('d', arcGenerator);


    // Labels
    d3.select('g')
    .selectAll('text')
    .data(arcData)
    .enter()
    .append('text')
    .each(function(d) {
    var centroid = arcGenerator.centroid(d);
    d3.select(this)
    .attr('x', centroid[0])
    .attr('y', centroid[1])
    .attr('dy', '0.33em')
    .text(d.data.name);
    });
    </script>
    </body>
    </html>