ShuanWu

@ShuanWu·5 public vizzes

Pie Padding

This example demonstrates a pie chart with padding between its arcs, using D3 version 3.5’s `d3.layout.pie` to compute arc positions while preserving relative area and angle. The chart renders as an SVG donut with an inner and outer radius, colored via `d3.scale.category10()`. The data values are the Fibonacci sequence `[1, 1, 2, 3, 5, 8, 13, 21]`, and the gist forks mbostock’s original block, encoding each slice as a path element with `d3.svg.arc()`.

May 14, 2016

Loading thumbnail…

Donut Chart - Default Labels

This example shows a donut chart with animal names placed at the start of each arc, using default label positioning. The chart is rendered in SVG with D3.js, using `d3.svg.arc` and `d3.layout.pie` to create the slices. Text labels are attached to each arc via `textPath` elements referencing the slice’s path ID. The data is hardcoded in the script, with a color scale mapping sequential indices to a diverging palette, and the “Other” slice is grayed out.

May 14, 2016

Loading thumbnail…

Donut Chart - Default Labels

This example shows a donut chart where each slice is labeled with an animal name, with the text placed along the arc starting at each slice’s beginning. The chart uses D3.js version 3.5.6, with `d3.svg.arc` for the donut slices and `d3.layout.pie` to compute the arc angles from a hardcoded dataset of eight animal values. Color is assigned via a linear scale with an HCL interpolator, and labels are rendered using SVG `<textPath>` elements referencing the arc paths. The data is embedded directly in the script rather than loaded from an external file.

May 14, 2016

Loading thumbnail…

fresh block

A single rectangular block animates its fill color from dark red to light blue over three seconds using a bounce easing effect. The visualization is built with D3.js version 3.5.5, using the `select` and `append` methods to create an SVG canvas and the `transition` API with a specified duration and easing function. The data source is a gist authored by ShuanWu, rendered as a static SVG animation without external datasets.

May 11, 2016

Loading thumbnail…

Here are some things you can do with Gists in GistBox.

GistBox organizes code snippets, notes, and recipes into a single searchable interface. The example uses JavaScript, Ruby, and Markdown files to demonstrate the range of content it can store, from executable JavaScript snippets and a full QuickSort class to documentation and a cheesecake recipe. The interface leverages the GitHub Gist API for storage and retrieval, presenting each file with syntax highlighting and a preview of the content. The Markdown notes are rendered with standard formatting, including headings, lists, and embedded images from external URLs.

Sep 25, 2013