yili222

@yili222·6 public vizzes

Untitled

This example shows a word cloud of COVID-19 public health guidance, with words sized by frequency and randomly rotated horizontally or vertically. The visualization uses the d3.layout.cloud plugin to compute word placement, while d3’s selection and transition APIs animate words entering, updating, and exiting as the data changes. Text is rendered as SVG elements with Impact font, colored via a categorical color scale, and centered within a 500×500 canvas.

Apr 21, 2020

Loading thumbnail…

Untitled

A word cloud displays a short list of phrases, including "Cov-19," "Stay Home," and "I Love Coding In My Van Mate," arranged with varied rotations and fixed font sizes. The visualization uses the d3.layout.cloud plugin to compute word positions and d3.v4 to render each word as an SVG text element. The words are centered within a square canvas, with a subtle text shadow applied via CSS for readability.

Apr 21, 2020

Loading thumbnail…

Word Cloud

This example visualizes COVID-19 home-care guidance as a word cloud, with terms like “medical” and “breathing” scaled by frequency. A word counter filters stopwords, then `d3.layout.cloud` (from cloud.js) computes the layout, sized using a linear `d3.scale.linear` mapping counts to font sizes from 10 to 100 pixels. The SVG output uses `d3.scale.category20` for colors, random 90-degree rotations, and Impact font, rendering text elements positioned by the layout’s `draw` callback.

Apr 21, 2020

Loading thumbnail…

Word Cloud

This visualization displays a word cloud of the text "The Adventures of Aladdin," showing the frequency of significant words through font size, with color and 90-degree rotation providing additional visual variety. The word cloud layout algorithm by Jason Davies, based on Jonathan Feinberg’s spiral placement method, is implemented using the d3.layout.cloud API. Words are placed using an Archimedean spiral until the canvas is filled, with the cloud rendered as SVG text elements. The underlying word counts are computed from the provided story text, filtering out stopwords, and the animation steps through word placement iteratively.

Apr 19, 2020

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.

Apr 18, 2020

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" centered on a plain white page, using inline CSS to style the body with a large 13em font size. The visualization serves as a minimal demonstration of the HTML markup language, showcasing a basic document structure with a head section containing the title and style rules. The code uses no JavaScript libraries or external APIs, relying solely on standard HTML and CSS to render the output. It functions as a bare-bones starter template for creating web-based content.

Apr 14, 2020