middle-name

100%

✓ Published0🌍 Public

Last edited Nov 8, 2017

Created on Nov 8, 2017

The visualization displays two lists: words and names. It filters a massive word list and a 2016 baby name list, showing only entries that can be constructed from the letters in "adamrichardzoia". Each valid entry is shown as a text span, sorted by length. The code uses d3.nest and d3.nestBy to count letter frequencies, and d3.select to render the filtered results into HTML.

AI-generated description

what's the longest word you can make with our names? hazard is pretty cool. diazoma is longer, doesn't need my middle name and you can make both our first names from it. also it won't look as bad in court.

Similar vizzes

Loading thumbnail…

Word Cloud Example

An interactive word cloud visualizes surname and first-name frequencies from JSON datasets, letting users toggle between "Family Names" and "First Names" via toolbar buttons. The d3.layout.cloud JavaScript library computes non-overlapping word placements using an Archimedean spiral collision algorithm, while D3.js (v3) SVG rendering displays the final text with font sizes scaled linearly. Each dataset is filtered, sorted, and truncated to the top 120 words, with animation during layout computation. Word rotation alternates randomly between horizontal and vertical orientations.

KKurtCodeAnyWhere

66% match

Loading thumbnail…

Word Cloud

This interactive word cloud visualizes the frequency of family and first names from JSON datasets, allowing users to switch between them via toolbar buttons. D3 v3 and the d3.layout.cloud plugin render the most frequent terms as SVG text elements, with font size scaled linearly by occurrence count and colors assigned from a category scale. The layout uses the cloud algorithm to position non-overlapping words with random horizontal or vertical rotation before drawing them via SVG.

AABCDB15

66% match

Loading thumbnail…

Word Cloud Example

This example presents a word cloud visualization built with D3.js v3 and the d3.layout.cloud plugin, displaying the frequency of names from a genealogical dataset. Users can toggle between family names and first names via toolbar buttons, which load respective JSON files and render the top 120 terms. The visualization uses SVG text elements with animated placement, scaling font size with d3.scale.linear, and rotating words randomly. Font sizes range from 10 to 60 pixels based on frequency counts.

Bbalajikadambi

66% match

Loading thumbnail…

Word Cloud Example

This example visualizes the frequency of family and first names from genealogical data using D3.js word clouds. The visualization displays the most common names as text, with font size scaled proportionally to their occurrence count, rendered in an animated layout using SVG. The implementation leverages the `d3.layout.cloud` module, which uses a canvas's `getImageData` method for text bounding measurements, along with the `d3.scale.linear` for size mapping and `d3.scale.category20` for coloring. Users can switch between datasets via toolbar buttons that load different JSON files.

KKurtCodeAnyWhere

65% match

Loading thumbnail…

Word Cloud Example

This example shows a word cloud visualization that displays frequency-weighted terms from JSON datasets, with buttons to toggle between family names and first names. The code uses D3 v3’s `d3.layout.cloud` plugin to arrange words in a spiral layout, scaling font size with `d3.scale.linear` based on each term’s count. Rendering occurs as SVG text elements styled with Impact font and a categorical color scale, while a setTimeout-driven animation progressively places words until the layout completes.

Yyili222

65% match

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

63% match

Loading thumbnail…

Circles

This visualization presents a list of names as hyperlinks on a black background, accompanied by animated red and blue circles that drift and pulse. The cursor and a smaller mouse follower are custom-styled elements that respond to mouse movement, with the follower scaling in size based on a frame counter. The name list skews horizontally when the mouse moves far from the center. The implementation uses vanilla JavaScript with `requestAnimationFrame`, CSS animations with `@keyframes`, and DOM manipulation via `querySelector` and `style.transform`.

Aanniehoshi18

62% 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

62% match