Skip to main content
Log in
K

ketuckychix

@ketuckychix·5 public vizzes

Loading thumbnail…

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Mar 12, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. It shows circles, rectangles, a path, and a line, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG uses transform attributes like `scale` and `translate` to reposition groups of shapes, while the stylesheet applies stroke and stroke-width properties via class selectors, including specific styling for path elements.

Mar 12, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. It shows circles, rectangles, a path, and a line, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG uses transform attributes like `scale` and `translate` to reposition groups of shapes, while the stylesheet applies stroke and stroke-width properties via class selectors, including specific styling for path elements.

Mar 12, 2020
Loading thumbnail…

Cars Report

This example displays a single car's make, sourced from a hardcoded JSON array of five car records. It shows 'nissan' as the only visible output. The application uses a static data file named `cars.js` and parses it with `JSON.parse`. The main `index.js` file accesses the second element of the resulting `cars` array and assigns its `make` property to the `textContent` of a `<pre>` element in the HTML, demonstrating a simple array indexing and DOM update without any external libraries or visualization frameworks.

Mar 12, 2020
Loading thumbnail…

HTML Starter

This example renders the text “Hello HTML” centered on a plain white page using an enormous 13em font size. The code consists of a minimal `index.html` file that defines the page structure and styling with CSS, alongside an empty `index.js` file that contains no logic. It demonstrates the simplest possible setup for an HTML page without any external libraries, frameworks, or data sources, serving as a baseline template for more complex visualizations. The page’s static content and styling are declared entirely within the HTML document.

Mar 12, 2020