Skip to main content
SimilarExport ZIP
100%

SVG Fundamental

✓ Published1🌍 Public
BBart van Pelt
Last edited Dec 24, 2022
Created on Dec 24, 2022
Forked from HTML Starter

This visualization shows the relationship between registration time and validity time for sequential data versions, displayed as stacked colored rectangles on an SVG canvas. Each version is represented by a distinct color (bisque, peach, coral, and orange), with rectangles positioned to indicate when each version was registered along the x-axis and its validity period along the y-axis. The chart includes labeled axes for both time dimensions, a legend explaining the color-to-version mapping, and axis markers indicating "now" on both timelines. The implementation uses raw SVG elements—including `rect`, `line`, and `text`—styled with inline CSS classes.

AI-generated description

Changed visualistation after submission, but the icon did not change!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamental

This example shows how software versions change over time by plotting registration time on the x-axis and validity time on the y-axis. Each colored rectangle represents a version, with the SVG elements `rect`, `line`, and `text` used to draw the chart, axes, and labels directly in HTML. The chart uses stacked rectangles and horizontal lines to depict the duration each version is valid, with axes labeled from 09:00 to “now.” The pure SVG rendering relies on basic styling with CSS classes for version colors and precise coordinate attributes for positioning.

Ssantoshmitra-05
84% match
Loading thumbnail…

Time series

This example visualizes time-series data as rectangles plotted on a time-based scatterplot, showing how tracked values change across registration and validity periods. The visualization maps the start and end of each validity period to the y-axis and the registration timestamps to the x-axis, with open-ended intervals extended by seven days for display. The code uses D3 v7 APIs including `scaleTime`, `axisLeft`, and `axisBottom` to construct the plot, and it processes data from a static JavaScript array, rendering output as SVG in a full-screen view.

BBart van Pelt
78% match
Loading thumbnail…

Fork of Time series - labels

This time-series plot displays the validity and registration periods of four data versions. It uses D3.js to map the temporal intervals to rectangular marks, where the x-axis represents registration time and the y-axis represents validity time. The plot includes date axes, rectangles with tooltips, and computes the maximum date ranges to accommodate open-ended intervals. The code uses D3's scaleTime, axisLeft, and axisBottom functions for layout and rendering.

BBart van Pelt
75% match
Loading thumbnail…

Fork of Fork of Time series - labels - change x,y

This visualization plots time-series data as rectangles on a two-dimensional time grid, where the x-axis represents registration times and the y-axis represents validity periods. Each rectangle encodes a versioned data entry with its start and end dates, and hovering reveals a tooltip with detailed timestamp information. The implementation uses D3 v7 with SVG rendering, including scaleTime, axisLeft, axisBottom, and mouse event handlers. The data comes from a hardcoded JavaScript array with formatted date strings.

BBart van Pelt
72% match
Loading thumbnail…

Fork of Time series - labels

This example visualizes temporal data as rectangular marks on a time-based scatterplot, encoding registration and validity periods along the x- and y-axes. Hovering a rectangle displays a tooltip with its associated label value. Built with D3.js (version 7.8.1), the visualization uses `scaleTime`, `axisLeft`, `axisBottom`, and pointer events to map date ranges to screen coordinates. Input data is parsed from ISO date strings into JavaScript `Date` objects. The SVG rendering fills the browser viewport, with rectangles styled via CSS and a custom tooltip appended to the DOM.

BBart van Pelt
70% match
Loading thumbnail…

SVG Example

This example demonstrates the fundamental structure of SVG graphics with five colored rectangles arranged to form a pseudo-bar chart. The rectangles decrease in height from left to right, with each bar positioned at a different vertical offset. The visualization uses raw SVG elements—specifically `<svg>` and `<rect>` tags—embedded directly in an HTML document, with hard-coded width, height, and position attributes. No JavaScript libraries or data sources are involved, showcasing SVG's native capability for static vector rendering.

CCurran Kelleher
69% match
Loading thumbnail…

Fork of Fork of Fork of Time series - labels - change x,y experiment ticks

This visualization displays temporal database relationships from Snodgrass’s SQL model, using rectangles to map validity and registration intervals on dual time axes. D3 v7’s `scaleTime`, `axisLeft`, and `axisBottom` render the SVG graph, while custom tooltip handlers on mouse events reveal date details. The code derives adjusted end dates for open intervals and computes rectangle widths and heights from the scale domains. Data originates from static JavaScript arrays with ISO date strings, parsed into `Date` objects for plotting.

BBart van Pelt
69% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—rectangles, text elements, and a polyline path—arranged to form a simple horizontal bar chart with category labels A through D. The SVG markup uses inline styling and CSS classes to control fill colors, stroke widths, and font properties, with a Google Fonts import for the Protest Riot typeface. The chart displays varying bar lengths on a 960×500 canvas, mixing red, black, and white fills with rounded stroke caps on a connected path line.

Jjwu534@gmail.com
68% match