Skip to main content
Log in
M

MMoronto

@MMoronto·8 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built entirely with D3.js SVG elements, whose eyebrows animate upward and then return to their original position. The face is constructed using `select` and `append` to create a yellow circle for the head, two circles for the eyes, rectangles for the eyebrows, and a mouth path drawn with the `arc` helper. The animated eyebrow movement is driven by chained `transition` calls with a 2-second duration, using `attr` to update the transform translation. The code renders to a static SVG canvas and relies on D3 v5, with all geometry defined through explicit pixel offsets.

Oct 4, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

Oct 4, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates core DOM manipulation through SVG elements, including circles for the eyes, rectangles for eyebrows, and an arc-generated mouth. Animated transitions move the eyebrows upward and back down over two-second intervals, showing how `transition().duration()` sequences chained animations. The face is centered using SVG group transforms, while D3 v5’s `select` and `arc` APIs handle element selection and path generation. The example highlights fundamental D3 concepts like attribute setting, coordinate positioning, and timed state changes within a static SVG canvas.

Oct 4, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls. The code uses D3’s `select`, `arc`, and attribute setters to construct the face, with all elements centered using a translated `<g>` group.

Oct 4, 2019
Loading thumbnail…

My D3.js face :)

This example displays a simple, static SVG face rendered using D3.js v5. It demonstrates basic SVG element creation and styling through D3’s `select` method, though the face itself is not explicitly drawn in the provided files. The visualization pairs an HTML page with an external stylesheet that sets a dark blue background and large, centered Ubuntu font. The code imports D3’s `select` function and a local ES6 module, `myMessage.js`, to display a “Hello VizHub!” text message. The rendering approach uses an in-page `<svg>` element, but no data source or interactive behavior is present.

Oct 4, 2019
Loading thumbnail…

My D3.js face :)

This example displays a simple, static SVG face rendered using D3.js v5. It demonstrates basic SVG element creation and styling through D3’s `select` method, though the face itself is not explicitly drawn in the provided files. The visualization pairs an HTML page with an external stylesheet that sets a dark blue background and large, centered Ubuntu font. The code imports D3’s `select` function and a local ES6 module, `myMessage.js`, to display a “Hello VizHub!” text message. The rendering approach uses an in-page `<svg>` element, but no data source or interactive behavior is present.

Oct 4, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization that renders a static text message, “Hello VizHub!”, in a large, centered red page using the Ubuntu font. It shows how to structure a basic VizHub project with separate HTML, JavaScript, and CSS files, and how to import modules and D3 API functions. The code uses `select` from D3 v5 to set the text content of a `div`, and an ES6 module exports the message string. The styling applies a red background and white text via CSS.

Oct 2, 2019
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled using CSS, presenting a series of circles, rectangles, lines, and paths in a 960x500 canvas. The SVG markup defines geometric primitives with inline `fill` and `stroke` attributes, while a linked stylesheet applies additional styling rules, including stroke width and line join properties. The code leverages native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS selectors targeting class-based groups to control visual appearance. Rendering relies entirely on the browser’s SVG engine and standard CSS, with no external JavaScript libraries involved.

Sep 6, 2019