DDDDDanica

@DDDDDanica·10 public vizzes

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

Apr 23, 2017

Loading thumbnail…

Final bar chart with animation

A single rounded bar chart compares total monthly expense against budget, encoding the ratio as bar width. The bar animates from zero width to its final proportional length using a D3 v4 `transition`, with its fill color shifting from teal to orange to red as the ratio exceeds thresholds. Text labels display the fixed expense amount, while an SVG input element permits budget adjustment. The visualization renders with D3 selections, a linear scale for width mapping, and SVG rectangle and text elements.

Apr 9, 2017

Loading thumbnail…

Pie chart with labels

This pie chart displays three categories (A, B, C) as a donut, with each slice labeled by its numeric value and connected to the slice via a thin pointer line. Built with D3 v3, it uses `d3.layout.pie` to compute angles, `d3.svg.arc` with an inner radius for the donut shape, and `d3.scale.category20` for slice colors. Labels are positioned outside the chart using trigonometry on start and end angles, with anchors adjusted based on text bounding boxes. The data is hardcoded in the script.

Apr 5, 2017

Loading thumbnail…

SVG House

This example draws a simple house composed entirely of SVG shapes. A hot pink roof, a rectangular body, a door, and a window are assembled using `d3` selections with `<path>`, `<rect>`, `<circle>`, and `<line>` elements. The door is semi-transparent, and the window includes a cross pattern. The code renders these shapes directly in an `index.html` file, using D3 v4 to create the SVG structure against a light gray background.

Apr 4, 2017

Loading thumbnail…

Bar chart

A bar chart displays categorical values with six colored, semi-transparent rectangles. The visualization maps lettered categories (A through F) to numeric values, with axes labeled and gridlines rendered via D3's SVG axis API. It uses `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis range, while `d3.svg.axis` generates the ticks. Rectangles are appended and styled with `d3.scale.category10` colors, and the data comes from an inline array of objects with `x` and `y` properties.

Apr 4, 2017

Loading thumbnail…

Pie chart with annimation

This interactive pie chart displays six categorical values under three selectable datasets (“Total,” “Option 1,” “Option 2”) with a donut layout and legends. It animates slice arc changes using D3’s `transition` and `attrTween`, interpolating between old and new arc paths when switching datasets via radio buttons. The SVG rendering includes slice paths, label polylines, and tooltips on mouseover, while colors come from `d3.scale.category20()`. The code mixes d3.v4 and d3.v3 APIs, including `d3.layout.pie` and `d3.svg.arc`.

Apr 4, 2017

Loading thumbnail…

React, redux, Expect and Deep Freeze

This example demonstrates a pure function called `testFunction` that takes a state number and an action object, returning an updated number for increment, decrement, or unchanged states. The code uses the Expect library to assert five specific input-output pairs, validating correct logic for both counter operations and an unknown action type. After the assertions, it logs "tests passed!" to the console. The reducer pattern mirrors Redux’s action dispatch, though no UI or visualization is rendered—the focus is solely on unit-testing the state transition logic.

Feb 27, 2017

Loading thumbnail…

1.10 Pure functions

This example demonstrates the concept of pure functions in JavaScript by comparing operations on arrays and age-checking functions. It shows how `slice()` preserves the original array, returning the same result each time, while `splice()` mutates the array, producing different outputs on repeated calls. The code also contrasts an impure `checkAge` function that relies on an external `minimum` variable against a pure version with the variable defined inside. Using CodePen’s built-in console, the visualization visually juxtaposes these behaviors, highlighting the benefits of cacheability, portability, and testability.

Jan 10, 2017

Loading thumbnail…

2016.12.20

This visualization demonstrates a JavaScript coding exercise, using the spread operator and array methods to find the longest word in a given string. The example shows the result logged directly to the console, with the sentence “never forget to empty your vacuum bags” processed through `split(' ')`, `reduce`, and a comparison of string lengths. The code, authored by Danica Shen, is presented as a CodePen snippet and relies on standard JavaScript APIs rather than any external libraries or data sources.

Jan 4, 2017

Loading thumbnail…

Transparent Box

A CSS-powered sign-up form floats over a full-screen background photograph. The modal box uses a semi-transparent dark overlay with a pink gradient button, while form inputs have translucent white fields. Hovering triggers a skewed light sweep across the button, and the box transitions its shadow and visibility. The code relies on plain HTML and CSS, including pseudo-elements, gradients, and transitions, with no JavaScript or external libraries.

Mar 18, 2016