solution365

@solution365·4 public vizzes

Fork of Let's make a face with D3.js!

This example demonstrates a smiley face whose eyebrows animate upward and downward in a looping motion. Using D3.js v5, the code constructs the face from SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with `d3.arc()` for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s vertical transform. All elements are appended to a centered `<g>` within an SVG canvas, with no external data source.

Oct 3, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to display a static text message. The page shows the phrase “Hello HTML!” rendered in a large, right-aligned font, with the styling applied via a CSS class. It uses no external libraries or frameworks, relying solely on the DOM and inline `<style>` tags for presentation. The rendering approach is straightforward, with no dynamic data or interactive behavior.

Oct 3, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

This example shows a yellow smiley face drawn in SVG using D3.js, with its eyebrows animating up and down in a repeating cycle. The face is assembled from circles, rectangles, and a path created with D3’s `arc()` helper, all positioned within a centered `<g>` group. The code uses D3 v7, loaded via UNPKG, and demonstrates `import` of `select` and `arc` from the D3 module. Eyebrow motion is achieved with chained `transition().duration()` calls that alternate the group’s transform attribute.

Sep 25, 2023

Loading thumbnail…

Fork of D3 Starter

This minimal example demonstrates how to initialize a D3 visualization with a simple text output. It uses d3.select to target the body element and d3's text method to set the content to "Hello Students version 7". The page loads D3 version 7.8.5 from a CDN, and the rendering approach is straightforward DOM manipulation without any data binding or scales. The example serves as a basic template for getting started with D3's core selection and manipulation API.

Sep 25, 2023