Interactive Baby Names with ggvis

100%

Interactive Baby Names with ggvis

✓ Published0🌍 Public

Last edited Oct 1, 2016

Created on Oct 1, 2016

This example visualizes the frequency of baby names over time, plotting the number of births per year for a selected name among females. An interactive dropdown menu lets the viewer choose one of ten sample names, and the chart updates to show that name’s trend. Built with R’s `ggvis` package, the code uses `input_select` for the menu and `filter` to subset the data, while `add_axis` formats the year and y-axis labels. The dataset comes from the `babynames` package, and the visualization renders points for each year.

AI-generated description

Similar vizzes

Loading thumbnail…

Interactive Streamgraph Template in React

This interactive streamgraph visualizes the popularity of eight baby names over time using a wide-format CSV dataset. Built with React and D3 v5, it employs `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut`, along with `d3.area` and `curveBasis` to create smooth, layered paths. Each name’s category is colored via `scaleOrdinal` with `schemeDark2`. Hovering a stream dims other paths and displays the name in an SVG tooltip, with opacity and text managed through React `useState` hooks.

RRoland

70% match

Loading thumbnail…

Untitled

A dropdown menu controls a single line chart that plots baby name popularity over time, showing the annual count for a selected name. The code reads from a CSV file and uses D3 v4 to render an SVG with axes and a smooth animated transition. The user selects a name from the menu to trigger a `transition` that updates the line path, colored via a sequential scale. The display uses `d3.csv` for data loading and `d3.line` for the path generation, with a simple but effective interactive filter.

Mmab3105

69% match

Loading thumbnail…

Visualizing Data With React & D3

This bar chart visualizes the top ten baby names from an 1880 dataset, loaded via `d3.csv` from a GitHub gist. React manages the component state for loading and rendering, while D3 utilities (`scaleBand`, `scaleLinear`, `max`) compute the scales and axis ticks. The SVG output displays horizontal bars with labeled axes, where each rect’s width reflects name frequency. React’s `useEffect` and `useState` handle data fetching, and the chart updates the visualization once the CSV is parsed.

AAdrianna87

67% match

Loading thumbnail…

Aggregating Data With React & D3 (skipped ahead)

This example shows a horizontal bar chart of the top 10 baby names from an 1880 dataset, with each bar’s length scaled to the name’s frequency. It uses React’s `useState` and `useEffect` to asynchronously load CSV data via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The chart also includes gridlines, tick labels, and axis labels generated from `xScale.ticks()`. The data source is a GitHub Gist, and the visualization updates only after the CSV resolves.

AAdrianna87

67% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React test

This interactive streamgraph displays the changing popularity of eight baby names over time, using a silhouette offset to emphasize fluctuations. Built with React and D3.js v5, it leverages `d3-shape`'s `stack`, `area`, and `curveBasis` for layout, while `d3-scale-chromatic` and `d3-scale` handle color and axes. The SVG renders a path per category, with hover effects that highlight a stream and display its name. Data comes from a CSV file loaded via `d3-fetch`'s `csv` function, featuring yearly counts for names like Amanda and Dorothy.

Bben440

66% match

Loading thumbnail…

Test StreamGraph

This visualization shows the popularity of eight baby names (Amanda, Ashley, Betty, and others) over time using a streamgraph with stacked, layered areas. The React component wraps D3 v5 APIs including `stack`, `area`, `curveBasis`, `stackOffsetSilhouette`, and `stackOrderInsideOut`. It uses `scaleOrdinal` with the `schemeDark2` color palette and `scaleLinear` for axes. Hovering over a stream highlights that category and displays its name in a tooltip, while non-hovered streams fade to 20% opacity. The data comes from the provided CSV dataset containing yearly name counts.

NNicoA

66% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React test 2

This interactive streamgraph visualizes the changing popularity of baby names over time, with each colored stream representing a different name. The chart is built using React and D3 v5, combining React state management for hover interactions with D3’s `stack`, `area`, and `curveBasis` functions from the `d3-shape` module. The data, loaded via `d3-fetch`'s `csv` method, is rendered as SVG paths, with a tooltip displayed in the top-left corner.

Bben440

66% match

Loading thumbnail…

Interactive Streamgraph Template in React

This example shows a streamgraph of baby name frequencies over time, recreated from a d3-graph-gallery template using React instead of pure D3. The chart uses stacked areas with a silhouette offset and inside-out ordering, where hovering a stream highlights it in the tooltip. The code uses `d3.stack`, `area`, `curveBasis`, `scaleLinear`, and `scaleOrdinal` with the `schemeDark2` palette, while React manages the interactive state. Data comes from a CSV loaded via `d3.csv`.

Iiblub

65% match