Fertsman

@Fertsman·3 public vizzes

Let's make a face with D3.js!

A yellow circle with two black eyes forms a simple cartoon face in an SVG canvas using D3.js v6. The code draws the head and eyes with `select` and `append` circle attributes, while a mouth is rendered using the `d3.arc` generator with specified inner and outer radii and an angle range of PI. The face is centered using the SVG width and height, and the eyes are positioned with fixed offsets. All shapes are directly manipulated through D3 selections in a React starter setup.

Nov 5, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—circles and rectangles—with different fill colors and a grouped set styled with white fill, black stroke, and a translation transform. A separate group contains line and path elements drawn with CSS class styling. The visualization uses raw SVG markup within an HTML document, while a React component renders a simple “Hello React!” message. CSS defines the line group’s stroke properties and hides page overflow. The code relies on standard SVG APIs and React’s `ReactDOM.render` for mounting.

Nov 5, 2020

Loading thumbnail…

HMTL Cars Report

This example shows a static cars report listing three vehicles as plain HTML list items, with the first entry highlighted in red via CSS class. The page uses simple monospace typography and a large font size, rendered directly in the browser without data binding or interactivity. The React starter code in `index.js` renders a static “Hello React!” message, while the actual report content lives entirely in `index.html` with a linked `style.css` stylesheet. No visualization libraries or data sources are invoked; the display relies solely on standard DOM elements and CSS styling.

Nov 5, 2020