Skip to main content
Log in
D

dok0086m

@dok0086m·9 public vizzes

Loading thumbnail…

Fork of Customizing Axes

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 customizes D3 axes by removing domain lines, styling tick marks and labels, and adding a custom x-axis label and title. Using D3’s `scaleLinear` and `scaleBand`, the chart maps population values to bar widths and country names to vertical positions, with axis tick labels formatted using `format('.3s')` and converted from billions to a shorter notation. The SVG rendering includes styled grid lines and text elements via CSS.

Dec 20, 2022
Loading thumbnail…

Fork of Customizing Axes

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 customizes D3 axes by removing domain lines, styling tick marks and labels, and adding a custom x-axis label and title. Using D3’s `scaleLinear` and `scaleBand`, the chart maps population values to bar widths and country names to vertical positions, with axis tick labels formatted using `format('.3s')` and converted from billions to a shorter notation. The SVG rendering includes styled grid lines and text elements via CSS.

Dec 20, 2022
Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that fills the entire browser window and redraws its content whenever the viewport size changes. The page uses CSS to stretch a chart container to full screen, then d3.js extracts the container’s clientWidth and clientHeight on each resize event to update the SVG’s width and height attributes. Two diagonal lines form a green X marker whose endpoints adjust to the current dimensions, showcasing how to bind data containing the new coordinates and re-render with a selection merge. The code relies on d3.select, selection.attr, and window.addEventListener for the resize handling.

Dec 20, 2022
Loading thumbnail…

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

A smiley face rendered as an SVG reacts to mouse movement by shifting its eyebrows. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create and style the face’s circles and paths. The code loads D3 from a CDN and applies CSS rules for full-bleed layout. The interaction is driven by pointer events, though the specific eyebrow movement logic is not detailed in the files shown.

Dec 19, 2022
Loading thumbnail…

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

A smiley face rendered in green on an SVG canvas demonstrates basic DOM manipulation with D3.js v7. The face’s eyebrows move, though no animation logic is visible in the provided code. The example uses `select` from D3 to target the `<svg>` element and apply a background color, while the face itself is likely drawn through standard SVG shapes. It serves as a fork of a tutorial exercise focused on fundamental D3 selection and styling methods.

Dec 19, 2022
Loading thumbnail…

Untitled

A D3.js animation draws a yellow smiley face whose eyebrows bob up and down. The code builds the face from SVG shapes—circles for the eyes and head, rectangles for the brows, and an arc-generated path for the mouth—centered via a translated group. Using `d3.select` and `d3.arc`, it applies chained `transition().duration()` calls to animate the eyebrow group’s vertical position, creating a looping motion. The rendering is a lightweight DOM manipulation example with no external data, running entirely in the browser.

Dec 19, 2022
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face with yellow circular head, black-outlined eyes, and an arc-based mouth. Animation brings the face to life as the eyebrows, drawn as rectangles, move upward and downward through chained `transition().duration(2000)` calls on the group element containing them. The visualization uses D3 v7 with SVG output, constructing the face within a centered `<g>` group and positioning features relative to the viewport dimensions. The code explicitly imports `select` and `arc` from the D3 library, with the mouth path generated using `d3.arc()` with specified inner and outer radii and angle bounds.

Dec 19, 2022
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes like circles, rectangles, lines, and paths can be styled with CSS and inline attributes. It uses raw SVG markup within an HTML document, applying transformations such as scaling and translation to group elements. Fill colors, stroke widths, and stroke colors are set both directly on shapes and through CSS classes. The visualization serves as a static, code-driven illustration of basic vector graphics rendering, with no external libraries or data sources.

Dec 19, 2022
Loading thumbnail…

HTML Cars Report

This example shows a simple HTML report listing three used cars with their prices, highlighting one vehicle in red. It demonstrates basic page styling through a linked CSS file, where the body uses a monospace font at 3em and the `.highlighted` class applies red color. The page structure relies on plain HTML elements—an `h1` heading and an unordered list—with no JavaScript libraries or data processing involved. The content is hardcoded directly in the markup rather than loaded from an external dataset.

Dec 19, 2022