Lily Gaffney

@lilygaff·5 public vizzes

Fork of HTML Starter

This example displays the text "Hello HTML!" in large, centered, dark lettering on a white background. It serves as a minimal starter template for web development, demonstrating the fundamental structure of an HTML document with inline CSS styling. The code uses a `<style>` block to set the `.message` class's font size and alignment, and the HTML `<div>` element to hold the content. No JavaScript or external data sources are included, keeping the example purely static.

Oct 17, 2022

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

This chart displays cumulative COVID-19 death totals over time for each country, using a log-scaled y-axis to accommodate wide numeric ranges. Each country’s time series is drawn as a separate path with a randomly assigned color, and the most recent date is marked with a vertical line. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLog` for axes, `line` for path generation, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from the Johns Hopkins COVID-19 dataset via `csv` and parsed with `timeParse`.

Oct 14, 2022

Loading thumbnail…

Multi-Line Chart

This example shows a multi-line chart using D3 version 7, plotting sales data across years. The visualization is rendered as an SVG within an HTML container, with axes and lines drawn from a hardcoded array of sale and year values. The code uses `d3.select` to target the SVG element and sets fixed width, height, and margin dimensions. While the current script only writes "Hello D3 version 7" to the body, the accompanying markup and data structures indicate a simple line chart with no external data source, relying entirely on inline sample data.

Oct 14, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling in a static composition, combining circles, rectangles, lines, and paths. The code uses raw SVG elements with CSS classes to control stroke properties, while inline attributes apply fills and transforms. A group element translates the lower shapes, and another group applies a black stroke to its children. The stylesheet sets the overall page layout and defines the `.lines` class with rounded line joins and caps. The rendering relies entirely on SVG’s native coordinate system and CSS inheritance, with no JavaScript libraries involved.

Oct 14, 2022

Loading thumbnail…

Smiley Face

The example displays a grid of 18 cartoon smiley faces, each rendered as a yellow SVG circle with black eyes and a curved mouth. It shows how React components compose reusable SVG elements, where each face is generated from randomized eye radii. The code uses React 18 and D3 v7, specifically the `d3.arc` API to construct the mouth path, with an SVG linear gradient applied to the face backgrounds.

Oct 13, 2022