kierra

@kierrakay·5 public vizzes

Lets make a face with D3.js!

Using D3.js v5, this example draws a cheerful cartoon face composed of SVG shapes: a yellow circle for the head, two black eyes, rectangular eyebrows, and a mouth created with the `arc` generator. The face is centered within a 960x500 SVG canvas using a translation transform. D3 selections append and position each shape numerically, with explicit attributes for radius, offsets, and path geometry. The code imports `select` and `arc` from the D3 module, and the face is rendered entirely client-side with no external data source.

Jul 1, 2020

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in a React component. It uses plain SVG elements with attributes for positioning, sizing, and styling, including stroke widths, fills, and a group transform. A second group applies a cyan fill and black stroke to selected shapes, while a path uses round line joins. The code relies on React’s JSX to embed SVG markup, with styles from an external stylesheet. No data source is used; the visualization solely shows static geometric primitives.

Jul 1, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple, static list of used cars with their model years and prices in a web page. The data is hard-coded into the HTML markup, presented as a bulleted list where the first item is visually emphasized. The page relies on plain HTML for structure and CSS for styling, specifically using a `monospace` font and a red color class to highlight the 2012 Nissan Leaf. No JavaScript or external libraries are used beyond the core web standards.

Jul 1, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page using a body style with 13em font size. It includes minimal HTML structure and a script that logs “Hello JavaScript!” to the browser’s developer console. The code uses vanilla HTML and a plain script tag, with no external libraries or frameworks. It serves as a bare-bones starting point for web development, contrasting with the React Starter example.

Jul 1, 2020

Loading thumbnail…

HTML Starter

This example displays “Hello HTML” as large, centered text on a plain web page. It uses standard HTML, CSS, and JavaScript, with the CSS `text-align` and `font-size` properties controlling the layout, and the browser’s `console.log` API to output a message to developer tools. The page does not use any external libraries or data sources.

Jul 1, 2020