abreudude

@abreudude·5 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG shapes, including eyes, eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows moving up and down over a two-second cycle. Rendered in an SVG canvas, it highlights how D3 v5 binds data and updates attributes directly, with all elements positioned relative to a centered group.

Oct 19, 2018

Loading thumbnail…

Hello VizHub!

A single gray circle is centered on a solid background, demonstrating a minimal D3.js visualization. The code selects an SVG element using `d3.select` and appends a circle, setting its radius and positioning its center coordinates. The example imports D3 v5 and uses an ES6 module to define a message string, though the message is not displayed. The page relies on a stylesheet for typography and layout, with the circle rendered entirely through D3’s SVG manipulation.

Oct 19, 2018

Loading thumbnail…

smile to a smile

A single large circle is drawn at the center of an SVG canvas, demonstrating basic shape creation with D3. The visualization shows a static black circle with a radius of 200 pixels, positioned at the midpoint of a 960×500 viewport. The code uses D3 v5’s selection and append methods to create the circle, then sets its radius and center coordinates via attribute chaining. The SVG rendering is styled with CSS that removes page margins and hides overflow.

Oct 18, 2018

Loading thumbnail…

Hello VizHub!

This example displays a single blue circle centered on an SVG canvas, demonstrating the basic workflow of creating and positioning shapes with D3. The code imports the `select` function from D3 v5, appends a `circle` element to the SVG, and sets its radius and center coordinates using the `attr` method. The SVG is sized at 960 by 500, matching the viewport dimensions used for the circle's position. The visualization serves as a minimal, foundational template for D3-based projects, with styling defined in a separate CSS file that imports the Ubuntu font.

Oct 18, 2018

Loading thumbnail…

Hello VizHub!

This example renders the text "Hello VizHub!" in a web page. The visualization uses the D3.js library, specifically the `select` function, to target a div element by its ID and set its text content. The message itself is defined as an ES6 module in a separate file and imported into the main `index.js` script. The page structure is created with HTML, styled with CSS, and leverages D3 version 5.5.0 loaded from a CDN.

Oct 18, 2018