Karol Paks

@K-Paks·4 public vizzes

Let's make a face with D3.js

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes. It shows a yellow circle for the head, two eyes, eyebrows, and an arc-based smile, all positioned relative to the SVG’s center. The code leverages D3 selections and the `arc` generator to define the mouth path, while attributes like `cx`, `r`, and `transform` place elements. The face is rendered purely in SVG within a React framework, with no external data source.

Aug 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements with CSS styling. It shows how presentation attributes like `fill` and `stroke` can be set either directly on elements, grouped in a `<g>` tag, or via CSS classes such as `.lines`. The code uses raw SVG markup within a React application, applying transforms for scaling and translation. The styling approach highlights CSS’s role in controlling stroke width, line joins, and colors, while the SVG namespace handles the coordinate-based drawing.

Aug 11, 2020

Loading thumbnail…

HTML Cars Report

This example uses React to render a plain HTML page displaying a simple cars report. It lists three vehicle entries with their model years and prices, with the first item highlighted in red via a CSS class. The page structure is defined in `index.html` using an unordered list, while `styles.css` sets a large monospace font and the `.hl` class for emphasis. No JavaScript logic or data fetching is involved; it is a minimal static markup demonstration.

Aug 11, 2020

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript-based report generator that displays a filtered list of cars under a specified price threshold. The visualization initially shows a "loading..." message, then asynchronously fetches car data after a 2-second delay using a Promise. The report formats each car's year, make, model, and price using the `formatCar` function, and filters the dataset with `generateReport`. The code separates concerns across modules, with `getCars` providing mock JSON data and `index.js` coordinating the UI update through DOM manipulation. The final output appears as a plain text list in the browser.

Aug 11, 2020