prativis

@prativis·4 public vizzes

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates fundamental DOM manipulation through a yellow circle, two eyes, animated eyebrows, and a mouth. The eyebrows transition up and down using D3's `transition().duration()`, while shapes are created with `select`, `append`, and `attr` calls. The mouth uses the `d3.arc()` path generator with specified inner and outer radii and angles. SVG rendering displays the face centered via a translated `<g>` group, with dimensions derived from the SVG attributes.

Nov 13, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through HTML and CSS. It shows circles, rectangles, lines, and paths arranged in groups with varying fill colors, stroke properties, and transforms. The code applies CSS classes to style the line and path elements, while inline attributes handle other visual properties. Rendering uses SVG markup directly, with the `line` element and `path` element for the polyline, all scaled and translated within the `<g>` container.

Nov 13, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates VizHub’s capability to render a simple text message using D3.js. It displays the author’s name in large, styled typography over a dark blue background. The code uses `select` from D3 v5 to target the `#message` div and set its text content, while an ES6 module (`myMessage.js`) exports the string. Styling is handled entirely through CSS, including the Ubuntu font and centered layout.

Nov 13, 2019

Loading thumbnail…

Hello VizHub

This example displays a single, large “Hello VizHub!” message in the center of a dark blue page with light text. It demonstrates basic D3.js DOM selection and text manipulation, using `select` from the D3 v5 library to set the content of a `<div>` element. The text originates from an ES6 module, `myMessage.js`, which exports the string. Styling relies on the Ubuntu font from Google Fonts and CSS, with the `body` element set to a 12em font size and centered alignment.

Nov 13, 2019