sirenajbpearl@gmail.com

test css

responsive do you feel the heat tablet

Fork of responsive do you feel the heat tablet

This visualization presents a simple question—"DO YOU FEEL THE HEAT?"—as a horizontal gradient bar ranging from 1 to 5, overlaid with white tick marks and a line chart-like annotation. The code embeds an Observable notebook iframe alongside an inline SVG, using CSS media queries for responsive sizing. The SVG applies a linear gradient from white through yellow, orange, pink, and purple to dark blue, with text rendered in the Myriad Pro font. The implementation uses plain HTML, CSS, and SVG, with no external JavaScript libraries.

Fork of responsive do you feel the heat tablet

This example shows a short text prompt (“DO YOU FEEL THE HEAT?”) overlaid on a horizontal gradient bar, with numeric endpoints 1 and 5, and thin white lines marking a segment of the scale. The visualization compares the prompt against an embedded Observable notebook, likely for temperature-related data. The SVG is rendered with React and plain HTML/CSS, using a linear gradient defined in SVG defs and Roboto font styling. It demonstrates responsive sizing via CSS media queries, pulling an external iframe from Observablehq.com to display the underlying interactive chart.

responsive do you feel the heat

This responsive visualization uses an embedded Observable notebook to explore a color gradient that transitions from white through yellow, orange, pink, and purple. The SVG layout displays a linear gradient bar with scale numbers from 1 to 5 and the question "DO YOU FEEL THE HEAT?" centered above. CSS media queries adjust the SVG and iframe dimensions for tablet and mobile screens. The code relies on SVG elements, CSS styling with Roboto and Myriad Pro fonts, and an iframe embedding an Observable cell for content.

Fork of Fork of do you feel the heat2

This visualization presents a minimalist color scale and typographic poster asking “DO YOU FEEL THE HEAT?” within an SVG rendered via React. The scale uses a linear gradient from white through yellow, orange, pink, purple, and blue, labeled with endpoints 1 and 5, flanked by thin white lines. The text and gradient are drawn directly in SVG markup, styled with CSS using the Roboto font. An embedded iframe loads an Observable notebook cell, suggesting additional interactive heat mapping content.

Fork of do you feel the heat2

This example presents a minimal HTML page that displays a stylized question, "DO YOU FEEL THE HEAT?", alongside a numeric scale ranging from 1 to 5. The visualization incorporates a linear gradient bar and simple line elements to suggest a color or intensity scale. The page is structured as an SVG graphic with embedded CSS for styling text, using the Roboto font. The layout includes an iframe that embeds an external Observable notebook, integrating interactive content alongside the static SVG elements within the same page.

do you feel the heat

This example presents a minimalist, typographic visualization titled "DO YOU FEEL THE HEAT?" rendered as an SVG graphic. It displays a horizontal gradient bar alongside a scale from 1 to 5, framed by black and white lines. The design uses embedded CSS for styling and relies on the Roboto font. The visualization is embedded within an HTML page that also incorporates an iframe linking to an Observable notebook, suggesting an interactive component despite the static SVG core.

Fork of Fork of Fork of HTML Starter

This example visualizes a survey-like question, "DO YOU FEEL THE HEAT?", presented as a horizontal gradient bar with numeric endpoints (1 to 5) and a central line marker. The SVG drawing uses embedded CSS classes and a linear gradient definition to style the graphic. The visualization is embedded in an HTML page that also loads a Roboto font and an external Observable notebook iframe. The rendering relies on SVG elements like `<rect>`, `<line>`, and `<text>` with custom styling, while the iframe fetches data from Observable. The static SVG structure is fixed, with no interactive or dynamic behavior.

Fork of Fork of HTML Starter

This visualization presents a minimal embedded Observable notebook within an HTML page, using an SVG graphic to display a simple heat-level indicator. The SVG shows a gradient bar marked with the number “1” on the left, “5” on the right, and the text “DO YOU FEEL THE HEAT?” centered above a line. The page uses CSS via Google Fonts for Roboto typography and includes an iframe that loads an Observable notebook cell, leveraging the Observable runtime for interactive content. The SVG is hand-authored with inline styles and defs, while the embedded iframe handles the interactive data.

Fork of HTML Starter

This example displays a decorative SVG illustration composed of an abstract background, scattered circular points, and text elements rendered in the Roboto font. The visualization uses static SVG shapes with CSS styling for gradients, stroke effects, and typography. The code defines a hidden iframe positioned behind the graphic and applies font loading via Google Fonts API. The SVG includes a linear gradient with multiple color stops, various styled shapes, and text elements, all hardcoded within the HTML structure using inline SVG markup.

Fork of Reusable D3 Scatter Plot test

This example presents a reusable scatter plot that visualizes data read from a Google Sheets document via the Google Visualization API. The chart maps two selected spreadsheet columns to x and y positions using D3’s `scaleLinear`, rendering circles with an SVG `join` pattern. Axes are drawn with `axisLeft` and `axisBottom`. The implementation follows a reusable chart pattern, allowing configuration of data, margins, radius, and value accessors.

Fork of Reusable D3 Scatter Plot

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It encodes data points as circles using D3’s `scaleLinear` to compute positions from the dataset’s extent. The visualization is rendered as an SVG in a full-window view, with axes generated via `axisLeft` and `axisBottom`. Data is loaded as CSV using `d3.csv` with numeric parsing, and marks are joined to the DOM with `selectAll` and `join`. The code is a vanilla HTML/JavaScript implementation using D3 v6.

Fork of Reusable D3 Scatter Plot 3

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It encodes data points as circles using D3’s `scaleLinear` to compute positions from the dataset’s extent. The visualization is rendered as an SVG in a full-window view, with axes generated via `axisLeft` and `axisBottom`. Data is loaded as CSV using `d3.csv` with numeric parsing, and marks are joined to the DOM with `selectAll` and `join`. The code is a vanilla HTML/JavaScript implementation using D3 v6.

Fork of Reusable D3 Scatter Plot

Fork of Animated Reusable D3 Scatter Plot

Fork of Responsive Scatter Plot

Sol Lewitt Reproduction with D3

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This example generates an animated Sol LeWitt-inspired composition using SVG and the Web Animations API. Two overlapping visual layers are present: a grid of tall, vertically oriented rectangles with random colors and upward-floating motion, and a second grid of horizontal rectangles clipped by a circular mask. A white circle is drawn at the center to overlap the first grid. The piece combines generative randomness in color and animation timing with geometric order, rendering entirely in vanilla JavaScript without external libraries.

Fork of Fork of Sol Lewitt Reproduction vertical

Fork of Sol Lewitt Reproduction

Sol Lewitt Reproduction

Sol Lewitt Reproduction

Fork of Exercise 1: SVG Fundamentals

test

This example displays a single red rectangle on an SVG canvas. The rectangle is defined with inline attributes and CSS styles that apply a border and fill color. Interactive behavior is included: hovering over the shape triggers a CSS transition, gradually changing its fill to green and expanding its stroke width over three seconds. The code uses plain HTML, CSS, and SVG, with no external libraries. The rendering relies on the SVG `rect` element and CSS `:hover` and `transition` properties.

SVG Fundamentals

SVG Fundamentals