JuanRomero1016

@JuanRomero1016·3 public vizzes

Let's make a face with D3.js!

A smiling face is drawn in SVG with D3.js v6, featuring a yellow head, two eyes, and eyebrows, with the right eyebrow animating upward via a `transition()` over two seconds. The code builds the figure using `select`, `append`, and `arc` from the D3 library, positioning elements through SVG `transform` attributes and computing the mouth’s path from an arc generator with specified angles. The static parts render instantly, while the animated eyebrow demonstrates D3’s transition system on SVG attributes.

Oct 8, 2020

Loading thumbnail…

Shapes with SVG & CSS

This example shows a collection of SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and an external CSS file. It demonstrates how SVG elements inherit CSS properties like stroke and fill, and how grouped elements apply shared styling via the `<g>` element. The code uses plain React with JSX to render the SVG, leveraging SVG attributes such as `transform` for scaling and translation. CSS classes like `.lines` style the path and line stroke colors, while inline fills override defaults for specific shapes.

Oct 8, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing three used vehicles with prices, highlighting one item in red via the `.highlighted` CSS class. The page uses plain HTML for structure and a linked `styles.css` for typography and color, with a 30-point monospace body font. A small inline script logs “Hello JavaScript!” to the browser console, which is visible when Chrome developer tools are open. The data is hard-coded in the markup rather than fetched or generated dynamically, making it a minimal static visualization of tabular information.

Oct 8, 2020