Fridayk7

@Fridayk7·11 public vizzes

Lets make a face with D3.js!

A yellow circle becomes a cartoon face with black-outlined features, built using D3.js selections and SVG primitives. The example constructs the face from a central `circle` for the head, two smaller circles for eyes, and a `path` generated with the `arc()` generator to form a half-circle mouth. Two white rectangles serve as teeth, with the right tooth animating downward via a chained `transition().duration(2000)` that changes its `y` attribute. The code utilizes D3 v5’s `select`, `arc`, and transition APIs within a React framework, rendering to an SVG canvas.

Jul 2, 2020

Loading thumbnail…

Lets make a face with D3.js!

This example draws a simple face using D3.js version 5 within a React framework, rendering to an SVG canvas. It demonstrates basic shape creation by appending a circle element with a fixed radius of 200 pixels, illustrating how D3’s selection and attribute methods control SVG geometry. The code imports `select` and `arc` from the D3 module, though only `select` is actively used to target the existing SVG container. The visualization serves as a minimal starting point for building more complex parametric graphics, relying on D3’s data-driven approach to manipulate SVG primitives.

Jul 2, 2020

Loading thumbnail…

Lets make a face with D3.js!

This example shows a simple face constructed from SVG shapes using D3.js. The code appends a circle element to an SVG container and sets its radius to 200 pixels, creating the basic head shape. The visualization relies on D3 v5’s `select` function to access the SVG element and demonstrates fundamental data-binding and SVG manipulation with a React framework and a minimal HTML page. The styling keeps the SVG fullscreen by hiding overflow, while the source references d3.v5 loaded from a CDN.

Jul 2, 2020

Loading thumbnail…

Lets make a face with D3.js!

This example builds a simple, static face using D3.js, rendered as a single circle in an SVG. It demonstrates the core concept of data visualization by starting with a blank canvas and appending a graphical element. The visualization uses D3 v5's `select` and `selection.append` methods within a React framework, with the circle’s radius set via `attr`. The code is minimal, focusing on the fundamental SVG rendering approach rather than complex data binding or animations.

Jul 2, 2020

Loading thumbnail…

Lets make a face with D3.js!

This example shows a single circle rendered as a face using D3.js v5 in an SVG, with the circle’s radius set to 200 pixels. The code imports the `select` function from D3 to target the SVG element, appends a circle (spelled “cirlce” in the source), and sets its radius attribute. No facial features are drawn beyond this basic circle, so the “face” remains minimal and abstract. The rendering relies on D3’s selection and attribute methods, with a React framework noted but not used in the visible code.

Jul 2, 2020

Loading thumbnail…

HTML Starter

A friendly face built from basic SVG shapes, rendered with D3 v5 in a React framework. The code uses D3 selections to append circles, rectangles, and an arc-based mouth onto an SVG canvas. A yellow circle forms the head, black circles serve as eyes, and rectangles create eyebrows. A `transition().duration(2000)` animates the right eyebrow upward, while the left remains static, creating a subtle asymmetrical expression.

Jul 2, 2020

Loading thumbnail…

Shapes with SVG and CSS

A minimal example demonstrates how SVG shapes can be positioned using CSS, showing a single red circle rendered on a 960 by 500 canvas. The code uses D3 v5's `select` and `append` APIs to create the circle element and set its radius and coordinates, while a linked stylesheet applies basic styling. The circle is centered at roughly the midpoint of the canvas, illustrating basic SVG placement with D3 and CSS integration.

Jul 2, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in large, centered type on a blank page. It is a minimal demonstration of an HTML document structure, using embedded CSS for styling and a script tag to log “Hello JavaScript!” to the browser’s developer console. The code relies solely on native web APIs—no external libraries—and serves as a foundation for more complex visualizations.

Jul 2, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays an SVG canvas that fills the viewport and is styled with a red background using D3’s selection and `style` method. It demonstrates basic shape rendering within a React framework, leveraging D3 v5 to select the SVG element and apply CSS-based styling. The page includes a stylesheet with a `.highlighted` class that turns text red, though no shapes or data are actually drawn—only the empty SVG container and its background color change are shown. The code uses `d3.select` and raw SVG elements.

Jul 2, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders a hardcoded car sales report. It displays a list of three vehicles and their sales figures, with the first entry visually emphasized in red. The page’s structure is defined using standard HTML elements such as `<h1>`, `<ul>`, and `<li>`, while its styling is applied via an external `styles.css` file. The included JavaScript logs a message to the browser’s console.

Jul 2, 2020

Loading thumbnail…

HTML Starter

Jul 2, 2020