Yuri_Wg

@YuriWg·3 public vizzes

Let's make a face with D3.js!

This example uses D3.js to construct a smiling face with moving eyebrows, demonstrating fundamental DOM manipulation. The code selects an SVG element with `d3.select` and applies a pink background via `style`. The face itself is drawn through D3's data-binding and attribute-setting methods, with the eyebrows animated to convey expression. The visualization renders in a 960-by-500 SVG using D3 v5, emphasizing core selection and styling operations rather than complex data handling.

Jun 29, 2019

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation and styling using inline SVG elements within an HTML document. It shows circles, rectangles, lines, and paths rendered directly to the SVG canvas, with colors and transformations applied through attributes and CSS. The code uses raw SVG APIs like `<circle>`, `<rect>`, `<line>`, `<path>`, and the `transform` attribute to group and position shapes. CSS classes, such as `.lines`, control stroke properties like width and color, while global styles set the page margin and hide overflow. No external libraries are used, relying entirely on native browser SVG support.

Jun 29, 2019

Loading thumbnail…

Cars Report

This example displays a static text report of car listings, filtering the dataset to show only vehicles manufactured after 2000. It uses the native JavaScript `filter` and `map` array methods along with a custom `formatCar` function to prepare the output, though only the first car’s make is ultimately rendered. The data comes from an inline JSON array containing car make, model, year, and price, and the visualization updates a single `<pre>` element via `document.getElementById` and `textContent`.

Jun 28, 2019