wen787

Customizing

This example displays a horizontal bar chart of the top 10 most populous countries, using UN 2018 population estimates from a CSV file. It demonstrates customizing D3 axes by removing tick lines and domains, formatting tick labels with the `format` function, and adding a styled title and axis label. The SVG is rendered using `d3.scaleLinear`, `d3.scaleBand`, `axisBottom`, and `axisLeft`, with custom CSS styling for text and tick marks.

Customizing

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, demonstrating custom axes through the `axisBottom` and `axisLeft` APIs. It employs `scaleLinear` and `scaleBand` for positioning, while formatting tick labels with `format('.3s')` and converting "G" to "B" for billions. The chart includes a title, axis label, and styled grid lines, with all data loaded from a local CSV file.

Let's make a face with D3.js!

Let's make a face with D3.js!

A smiling face is constructed entirely from SVG shapes using D3.js v5, with red background fill and static circular facial features. The example demonstrates fundamental DOM manipulation through D3 selections and the `arc` generator from the `d3` module, though the visible code only styles the SVG container and imports these tools. The face itself appears as a playful composition of geometric elements, highlighting how D3’s declarative data-binding approach can drive basic SVG rendering for abstract illustrations rather than data-driven charts. The bundled `bundle.js` contains the remaining face-assembly logic not shown in the excerpt.

Let's make a face with D3.js!

A smiley face rendered in SVG responds to mouse movement by shifting its eyebrows, demonstrating fundamental DOM manipulation with D3.js. The example uses D3 v5’s `select` method to target the SVG element and the `arc` generator to draw the face’s curved features, such as the mouth. The visualization shows how D3 binds data to existing DOM nodes without requiring `.enter()` or `.append()`, focusing instead on updating attributes in response to user interaction. The face is built entirely through SVG shapes, with styling handled by an external CSS file.

Let's make a face with D3.js!

This D3.js example creates a smiling face inside an SVG canvas and animates its eyebrows with a bouncing motion. The visualization demonstrates fundamental DOM manipulation, using `d3.select` to target the SVG element and directly adding and transforming facial features. It relies on plain SVG shapes—circles, paths, and lines—that are dynamically positioned and rotated over time to produce the playful eyebrow movement. The underlying data consists of fixed coordinates for facial components, with the animation driven by JavaScript’s own timing rather than any external dataset, showcasing D3’s utility for basic graphic construction without data mapping.

Let's make a face with D3.js!

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows. The example shows an SVG face whose eyebrows move dynamically, illustrating how D3 selects and modifies elements. The code uses `d3.select`, `append`, and `attr` to construct the face from SVG circles and paths, then applies transitions to adjust eyebrow positions. It relies on D3 v5, rendering everything as SVG within a 960x500 viewport, with accompanying CSS for styling and layout. The dataset is implicit—the face geometry is hardcoded rather than loaded from external data.

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes with CSS styling, showing how circles, rectangles, lines, and paths render with different fill and stroke properties. The code uses raw SVG elements within an HTML document, applying presentation attributes like `fill`, `stroke`, and `stroke-width` directly on shapes and grouped elements. A CSS stylesheet defines additional styling rules for elements with the `.lines` class, including rounded line joins and caps. The SVG viewport is set to 960 by 500 pixels, with shapes positioned at various coordinates using the `transform` attribute for group-level translation.

HTML Cars Report

This gallery example presents a static report page titled “HTML Cars Report” with an otherwise empty body. The document contains no data, scripts, or visualization logic; it only establishes a minimal HTML structure with a head and body. No libraries, APIs, or rendering techniques are used, and no data source is referenced. The example demonstrates a blank starting point, showing the bare skeleton of an HTML file without any visual content or interactive features.

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes and CSS classes. It shows the effects of fill colors, stroke widths, line joins, and grouped transformations such as scaling and translation. The rendering relies entirely on SVG elements styled by CSS, with classes like `.lines` controlling stroke properties and the `fill` attribute applying color. No JavaScript libraries are used; the visualization is purely static markup and styles.

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled directly with CSS, showing circles, rectangles, lines, and a path within a single scalable vector graphic. The visualization uses plain SVG markup for the shapes and a linked stylesheet to apply stroke, fill, and line styling, including classes like `.lines` for grouped elements. A nested `<g>` element with a transform applies scaling to the entire composition. The code relies solely on native SVG elements and CSS, without external JavaScript libraries, and uses inline attributes like `fill` and `stroke` for basic color specification.