rnyc1

@rnyc1·6 public vizzes

Fork of Missing Migrants Date Histogram

This histogram visualizes the monthly total of dead and missing migrants worldwide, with bar heights representing the sum of reported cases per month. It uses React to render SVG elements, with d3.bin for time-based binning and d3.sum to aggregate values within each bin. The data comes from the Missing Migrants Dataset, loaded via d3.csv. Axis components are custom React components that use d3 scale functions to position ticks and labels.

Dec 4, 2021

Loading thumbnail…

Fade Out Fade In 4

Four red circles enter in a vertical column while two blue circles fade out and are removed, demonstrating chained selections with overlapping transitions. The example uses D3 v7 with SVG rendering, applying `transition().duration(2000).style("fill-opacity", "0").remove()` to delete the first dataset, then `.on("end", ...)` to append the second dataset. Because the removal and new selection overlap, only three of the four red circles appear, highlighting a timing issue in the transition lifecycle.

Nov 30, 2021

Loading thumbnail…

Fade Out Fade In 5

Two blue circles fade out over two seconds, then are removed and replaced by four red circles that fade in at new positions. The example demonstrates a sequential data-update pattern using SVG and D3 v7 transitions. The initial `circ` selection applies a `style("fill-opacity", "0")` transition with its `.on("end", ...)` callback, which calls `.remove()` on all circles before binding the second dataset and entering new circles with a reversed fade-in transition.

Nov 30, 2021

Loading thumbnail…

Fade Out Fade In 3

Two sets of blue and red circles demonstrate a data-join update pattern in D3 v7. Initially, two blue circles render from `data1`. Then, a transition fades those circles out over two seconds, and on completion, four red circles from `data2` fade in using `selection.enter()` and `merge()`. The example uses SVG with `transition.style("fill-opacity", ...)` to animate opacity.

Nov 28, 2021

Loading thumbnail…

Fade Out Fade In 2

Two groups of circles swap places on a D3.js SVG stage: two blue circles fade out and are removed, then four red circles fade in. The example demonstrates a common sequencing pitfall—the new data join executes before the old elements’ removal transition completes, causing selection conflicts. It uses d3.selectAll, data joins, .enter(), and transition().remove() in D3 v7, with fill-opacity transitions timed via .delay() to coordinate the fade-out and fade-in phases.

Nov 27, 2021

Loading thumbnail…

Fade Out Fade In

Two sets of circles, first blue then red, fade into and out of view on a blank SVG canvas, appearing sequentially at different coordinates. The visualization uses D3 version 7 to select the SVG element, append circles with an initial opacity of zero, and then chain transitions to animate opacity to one and back to zero. The blue circles fade in over ten seconds, while the red set delays its fade-in by 12.5 seconds before fading out. All circles use a radius of 25 pixels with hardcoded x and y positions from two separate data arrays.

Nov 27, 2021