admk840

@admk840·6 public vizzes

Face with D3 js

This example uses D3.js to draw a simple, static face composed of SVG shapes, including a head, eyes, and mouth, within a 960x400 viewport. The code selects an existing SVG element and appends circles and paths using D3's data-binding and shape-generator APIs, such as `d3.arc` for the mouth. The visualization demonstrates basic SVG manipulation with D3 v5, though it does not include interactive or animated behavior.

Dec 24, 2019

Loading thumbnail…

Face with D3 js

This example shows a simple smiling face constructed from SVG shapes using D3.js version 5. The visualization draws a large yellow circle for the head, two smaller black circles for eyes, and an arc for the mouth, all positioned relative to the SVG canvas dimensions. The code uses D3’s selection API to append circles and a path, with the mouth created via the `arc()` function specifying inner and outer radii and a half-circle angular range. The smiley is rendered directly into an SVG element defined in the HTML, with all styling applied through D3 attribute methods.

Dec 24, 2019

Loading thumbnail…

Face with D3 js

This example renders a red 500-by-500 SVG square with a black outlined face drawn using D3.js. The code selects the SVG element with `d3.select` and applies the background color, while CSS classes style the face’s paths and lines with a thick red stroke. The face is constructed from SVG path elements inside the HTML, with no external data source. It demonstrates basic D3 v5 selection and styling within a React-compatible HTML page.

Dec 24, 2019

Loading thumbnail…

HTML Starter

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS classes and inline attributes. The shapes are organized into groups using SVG `<g>` elements with `transform` translations, which offset their positions. The `<svg>` element sets the canvas size at 500 by 500 pixels. The code uses React alongside raw SVG markup, with no external data source; it directly defines the geometry of each shape in the HTML. The `.lines` CSS class applies black strokes with a custom width, while the `.lines path` rule colors the path red.

Dec 24, 2019

Loading thumbnail…

Cars Report

This example displays a single car make from a static JSON array by rendering it as plain text in an HTML page. It reads the first record of the `carsJSON` variable and prints its `make` property, “Honda,” into a `<pre>` element. The code uses React as the framework, though no React components or state are invoked; instead, it directly manipulates the Document Object Model via `document.getElementById()` and sets the text content. The data source is a hardcoded JSON string containing three car entries with year, make, model, and price fields.

Dec 20, 2019

Loading thumbnail…

Cars Report

This example displays a static "hello world" message in large text centered on a plain HTML page. The visualization uses a React-based project structure, though the core implementation is a simple JavaScript call that sets the text content of a pre-existing HTML element. The code relies on the Document Object Model (DOM) API, specifically `document.getElementByID` and the `textContent` property, to update the message. The page itself is styled with basic CSS, using a `font-size` of 4em and text alignment to center the output. No data source or rendering framework beyond standard web technologies is employed.

Dec 20, 2019