zcz-hjy

@zcz-hjy·6 public vizzes

Fork of Data Table Summary

A monochrome terminal-style interface displays a summary of a population dataset for the ten most populous countries in 2018, sourced from the United Nations World Population Prospects. The page prints the number of rows, columns, and data size in kilobytes, followed by a JSON-formatted preview of the first ten rows. Built with D3 v5, the code loads the CSV using `d3.csv`, then appends two `<pre>` elements to the page body via `d3.select`. The styling uses a black background with green monospace text.

May 18, 2021

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a full-page SVG that redraws itself whenever the browser window is resized, using a green X spanning the chart’s diagonal as a visual test of the updated dimensions. The code extracts the CSS-computed `clientWidth` and `clientHeight` from the container `<div>`, then sets the SVG’s `width` and `height` attributes accordingly. It uses d3 v5’s data join (`selectAll`, `enter`, `merge`) to update two `<line>` elements, and registers a `resize` event listener on `window` to call the `redraw` function on every size change.

May 18, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling through a simple composition of circles, rectangles, lines, and a path. It uses a group element with a scale transformation to resize the entire drawing, while a nested group applies a fill and stroke to both a circle and rectangle. The example also uses CSS class selectors to style the stroke and linecap properties of the line and path elements. The SVG is rendered with a 960x500 viewport and a 1.7 scale factor.

May 16, 2021

Loading thumbnail…

Fork of HTML Cars Report

This example shows a basic HTML page titled “Cars Report” that lists three used vehicles with their model years and prices. It demonstrates static web rendering using plain HTML structure, with an unordered list for the car entries and heading elements for the title. Styling comes from a linked `styles.css` file, which applies large monospace text to the entire page and highlights the first car entry—the 2012 Nissan Leaf—in red through the `.highlighted` class. The code does not include any JavaScript libraries or dynamic data, relying solely on HTML and CSS for presentation.

May 16, 2021

Loading thumbnail…

Untitled

This example demonstrates a basic HTML and CSS page with a large monospace font and a red-highlighted text class. The page embeds a YouTube video via an iframe, using the YouTube embedded player API for playback. Styling is applied directly through a single CSS file, with the body set to a 3em font size and the `.highlighted` class turning text red. The demonstration focuses on static layout and styling rather than interactive data visualization, with no JavaScript or charting libraries involved.

May 16, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript data-processing pipeline that fetches a JSON array of car listings and outputs a formatted text report of cars priced under $2,000. The `getCars` function simulates a delayed API response using a Promise and `setTimeout`, while `generateReport` filters and maps the data with `filter` and `map`, producing a newline-separated summary via `join`. The final report is rendered directly into an HTML `<pre>` element using `textContent`, with a "Loading..." placeholder shown initially.

May 16, 2021