Dayalghosh

@Dayalghosh·5 public vizzes

Let's make a face with D3.js!

This example shows how to build a simple smiley face with D3.js, using SVG circles to represent facial features and animated eyebrows that move in response to a timer. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending circles with positional and styling attributes, and using D3's selection methods to update the eyebrow positions over time. The face is drawn with a yellow circle for the head and additional circles or paths for eyes, eyebrows, and a mouth, all rendered in a 960×500 viewport.

Jul 15, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to create a smiley face using D3.js, with the face displayed as a yellow circle centered in an SVG canvas. The code uses D3 selections and the `append` method to add SVG elements, and it calculates the circle’s position and size from the SVG’s width and height attributes. Though the README mentions moving eyebrows, the visible code only draws the static face, relying on D3 v5’s `select` and attribute setters for rendering.

Jul 15, 2019

Loading thumbnail…

Let's make a face with D3.js

This example draws a simple face using D3.js by appending a circle to an SVG element. The circle’s radius is set to half the SVG’s height, with its center positioned at the middle of the drawing area. The code uses `select` from D3 to grab the SVG and `attr` to set the circle’s properties based on the width and height attributes. A CSS import loads the Ubuntu font, and the SVG is scaled and translated via its transform attribute.

Jul 13, 2019

Loading thumbnail…

Untitled

This example demonstrates how VizHub integrates modular JavaScript with D3.js to create an interactive data visualization. It shows a dynamic simulation driven by `d3.forceSimulation`, where nodes respond to forces and user interaction. The code separates concerns across files, using `index.js` for logic, `myMessage.js` for data, and `styles.css` for styling. It renders SVG elements via D3’s data join methods, with transitions animating position changes over time. The visualization updates live as the simulation runs, highlighting D3’s ability to bind data to the DOM and handle real-time state changes.

Jul 9, 2019

Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub” centered on a dark blue background using a large Ubuntu font. The web page renders a static message without any interactive or animated elements. The implementation combines an HTML file that loads D3.js version 5.9.1 with a JavaScript module that exports the message string, and it uses D3’s `select` function to set the text content of a designated div element. Styling is applied through an external CSS file.

Jul 8, 2019