Honza Cahlík

@Psik628·3 public vizzes

Let's make a face with D3.js!

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows in an SVG canvas. Using D3's `select` and `append` methods, the code creates and styles SVG circles and other elements dynamically. The example relies on D3 v5's modular imports and shows how to set attributes like radius and position through chained method calls. The accompanying video explains the step-by-step process, while the working code is rendered directly in the browser using standard SVG elements within a 960×500 viewport.

Dec 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

Dec 21, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” in large, centered type. It demonstrates the basic structure of a web document, combining CSS for styling and JavaScript for interactive behavior. The code uses plain HTML elements, a style block to set the font size and text alignment, and a script tag that logs “Hello JavaScript!” to the browser console. No external libraries are used, highlighting the bare essentials of client-side web development with vanilla JavaScript.

Dec 21, 2020