Alessan123

@Alessan123·8 public vizzes

Let's make a face with D3.js

This example builds a simple cartoon face with D3.js, rendering a yellow circle for the head, two black circles for eyes, and a curved path for a smile. Using SVG, it positions the face at the center of a 960x500 viewport. The code applies D3 selections to append elements, and the smile is generated with the `d3.arc()` function by specifying inner and outer radii and start and end angles relative to the center.

Jul 13, 2020

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple smiling face entirely with SVG shapes. It centers a yellow circle on a 960-by-500 canvas, adds two black eye circles, and creates a smile with a curved arc using the `d3.arc` path generator. All elements are positioned relative to the center via a translated group, with coordinates hardcoded in the JavaScript. The styling is minimal, relying on a CSS file for full-screen display without margins or scrollbars.

Jul 12, 2020

Loading thumbnail…

Let's make a face with D3.js

A minimalist SVG canvas is filled with a solid red background via D3.js, creating the base for a playful facial expression. The page uses D3 v5 to select the SVG element and apply a background color, with the `d3.select` API targeting the root `svg` node. The example demonstrates basic D3 styling and layout within a fixed 960-by-500-pixel viewport. No additional facial features are drawn beyond the red rectangle, leaving the image as a blank slate.

Jul 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS rules. It shows default black shapes, shapes with explicit `fill` colors, a group with a cyan fill and black stroke, and a separate group of lines and paths styled via CSS classes. The rendering uses SVG elements placed in an HTML page, with the `styles.css` file providing stroke width, color, and line-join properties for the `.lines` class and its path child.

Jul 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes, including circles, rectangles, a line, and a path, rendered within a 960 by 500 pixel SVG canvas. The shapes demonstrate various SVG presentation attributes, such as fill colors, stroke colors, and stroke widths, applied both directly and through the `<g>` grouping element. The visualization uses the SVG rendering API with an HTML page and a linked CSS stylesheet, where CSS is only used for global body styling and a non-applied `.highlighted` class. It does not incorporate any JavaScript libraries or external data.

Jul 11, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report that lists three used vehicles with their model years and prices. The page uses a plain HTML unordered list, with one car highlighted in red via a custom CSS class. The styling is defined in a separate stylesheet that sets the body font to a large monospace size. The visualization relies solely on static HTML markup and CSS, with no JavaScript libraries or data-loading mechanisms involved.

Jul 10, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML-based report listing three used cars with their model years and prices, using a bulleted list to present the data. The first entry, a 2012 Nissan Leaf, is visually emphasized with red text via the `.highlighted` CSS class. The page is styled using a monospace font and larger font size through an external `styles.css` file. It relies on core HTML elements (`<ul>`, `<li>`) and CSS rules for styling, without any JavaScript libraries or data-loading mechanisms.

Jul 10, 2020

Loading thumbnail…

Cars Report

This example displays the text “Hello World” in a large, centered font on a blank page using a React application structure. The code renders the message by selecting the `message-element` DOM node and setting its `textContent` property, while the HTML page includes a minimal stylesheet and a console log. It uses vanilla JavaScript DOM APIs and React Starter conventions to demonstrate a basic data-driven report output.

Jul 10, 2020