muxiaofan

@muxiaofan·6 public vizzes

Bowl of Fruit - General Update Pattern

A row of apples and lemons demonstrates D3’s general update pattern, with fruits appearing, disappearing, and changing type over timed intervals. Circles and labels update via enter, merge, and exit selections using keyed data binding by fruit id. The example uses d3.scaleOrdinal for color and radius, and renders SVG elements within a 960×500 viewport, with transitions triggered by setTimeout calls that modify the underlying data array.

Jun 11, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A row of apples animates through enter, update, and exit states as fruits are eaten and replaced by a lemon. The visualization demonstrates D3's general update pattern, using keyed data joins and transition delays to morph circle radii and fill colors over one-second intervals. The code employs d3.scaleOrdinal for color and size mapping, with selection.merge and exit transitions, all rendered as SVG circles in a static bowl-like arrangement.

Jun 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Jun 10, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling. It shows circles, rectangles, lines, and paths arranged within a scaled and translated group, with some shapes inheriting fill colors from their parent groups and others styled directly through CSS classes. The HTML embeds the SVG directly, while the linked stylesheet defines stroke properties for line elements using class selectors. The code uses standard SVG elements and CSS selectors to control visual attributes like fill, stroke, and stroke-width, with no external JavaScript libraries involved.

Jun 10, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple HTML Cars Report that presents a list of used cars with model years and prices in a static, unstyled web page. The data is hardcoded directly into the `index.html` file as list items, with one car highlighted by applying a CSS class. The page uses plain HTML elements such as `<h1>` and `<ul>` alongside linked `styles.css` for visual styling, changing the font to monospace and coloring the highlighted car red. No JavaScript libraries or external data sources are involved; the rendering relies entirely on static markup and basic CSS rules.

Jun 10, 2020

Loading thumbnail…

Cars Report

This example displays a report of cars with prices under $2,000, formatting each entry as a line like “2000 Honda Accord: $2800”. The page initially shows a “Loading...” message, then fetches the car data from a hardcoded JSON array via the `getCars` promise, filters it using `filter`, and formats the output with `formatCar` and `generateReport`, using JavaScript object destructuring and array methods. The result is rendered into a `<pre>` element styled at a large font size.

Jun 10, 2020