czhang746

@czhang746·6 public vizzes

Q3

This visualization displays a minimal HTML page with a title "Q3" and a signature element, using D3 v5 loaded from a local file path. The page contains no interactive charts or data rendering, only a static div with the text "czhang746". The code imports d3.v5.min.js via a script tag but does not call any D3 functions, making it a barebones skeleton rather than an active visualization. The author, czhang746, provides a placeholder structure that could later integrate React components, as referenced in the linked Starter example.

Feb 21, 2023

Loading thumbnail…

Make a bar chart

This example shows a blank SVG canvas with the title “Make a bar chart” and loads a CSV dataset containing population figures for ten countries, converting each value from millions to raw thousands. The code uses D3 v5’s `select` and `csv` methods to fetch and parse `data.csv`, logging the transformed array to the console. Although the data is prepared and the SVG element is sized at 960 by 500 pixels, the visualization itself is not yet rendered, leaving only the empty chart area.

Feb 18, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Feb 18, 2023

Loading thumbnail…

D3

This example uses D3 v3 within a React framework to render an SVG visualization on a nearly full-screen canvas. The code sets up a basic HTML page with an SVG element sized to 960 by 500 pixels, demonstrating the integration of D3’s layout and rendering capabilities with React’s component structure. The visualization relies on D3’s data-driven approach, though the specific data or simulation details are not defined in the provided files. The example highlights how SVG elements are manipulated via JavaScript, with CSS controlling page margins and overflow to create a clean, immersive display.

Feb 17, 2023

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates how geometric shapes can be composed and styled using SVG and CSS. It shows circles, rectangles, lines, and a path, with attributes like fill color, stroke, and stroke-width applied both inline and through CSS classes. The SVG is scaled and translated using transform groups, while CSS rules set stroke properties for the line and path elements. The code uses standard SVG elements (`circle`, `rect`, `line`, `path`) with inline styles and an external stylesheet (`styles.css`) that defines classes like `.lines` and `.lines path`.

Feb 17, 2023

Loading thumbnail…

HTML Cars Report

This example displays a static HTML report listing three used cars, each with its model year, make, model, and price. The page uses plain CSS for styling, setting a large monospace font for the body and highlighting the first list item in red via the `.highlighted` class. It relies on standard JavaScript and CSS, with no external libraries or frameworks, to render the content directly in the browser. The data is hardcoded in the HTML markup, and the rendering approach is purely document-based rather than chart-based.

Feb 17, 2023