Skip to main content
Log in
H

huizrh

@huizrh·7 public vizzes

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a natural Earth projection world map with a time-series histogram to explore missing migrant incidents globally. The map displays circles sized by the total number of dead and missing individuals, using d3.geoPath and d3.geoNaturalEarth1 for geographic rendering, while the histogram, built with d3.scaleTime and d3.histogram, shows monthly counts. Users can brush a date range on the histogram with d3.brushX, which filters the map to show only incidents within the selected period. The example uses React with d3.v5 and data from the Missing Migrants Global dataset.

Jan 29, 2023
Loading thumbnail…

Fork of Multiple Views Cleanup

This example combines a bubble map with a time-series histogram to visualize migrant deaths and disappearances worldwide. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, with circle sizes scaled by `d3.scaleSqrt`. A synchronized date histogram below aggregates monthly totals using `d3.histogram` and `d3.timeMonths`. Both views render as SVG within a React component, pulling data from a CSV of missing migrants and world-atlas TopoJSON boundaries.

Jan 29, 2023
Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for five SVG circles representing apples and lemons, with click-to-select highlighting. The visualization uses a D3 v5 `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle position, radius, and exit/enter states. The `fruitBowl` function binds data with a key function, merging enter and update selections, while `index.js` mutates the fruit array via `setTimeout` to show data-driven changes.

Jan 27, 2023
Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples sit in a row on a plain SVG canvas. A single click on any apple selects it, emphasizing it by adding a black stroke around its red circle. The example uses React 16.8 with `useState` to manage the selection data flow. D3 v5 provides ordinal scales for the position, radius, and fill color, though the static composition means no animation occurs in the running code.

Jan 27, 2023
Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples sit in a row on a plain SVG canvas. A single click on any apple selects it, emphasizing it by adding a black stroke around its red circle. The example uses React 16.8 with `useState` to manage the selection data flow. D3 v5 provides ordinal scales for the position, radius, and fill color, though the static composition means no animation occurs in the running code.

Jan 27, 2023
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The chart renders as SVG, with bars colored steelblue and a title, axis labels, and gridlines produced using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The y-axis shows country names without ticks, and the x-axis uses a custom tick format that abbreviates large numbers with 'B' for billions.

Jan 27, 2023
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays a simple cartoon face composed of SVG shapes, centered on a yellow circle with two eyes and an arc-based mouth. The face group is positioned using a transform, and the right eye animates downward over two seconds via a D3 transition. The code uses d3.arc to generate the mouth path and d3 selection/transition methods (transition.attr) to modify attributes, with the SVG drawn directly in the browser. It forks an existing "Let's make a face" example, adapting it for D3 v5.

Jan 27, 2023