Skip to main content
SimilarExport ZIP
100%

Test

✓ Published1🌍 Public
CCheah Peng Huat
Last edited Jul 10, 2024
Created on Jul 8, 2024
Forked from HTML Starter

This visualization uses D3.js to display percentile trends over time for performance metrics. The view combines multiple SVG areas and a line to represent the 5-95%, 25-75%, and median values across dates from August to September 2014. Animated markers slide upward from the bottom to highlight Client and Server release versions, using D3 transitions with dynamic path lengths. The chart includes axes, a custom clip path for the legend area, and smooth basis interpolation for all drawn shapes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundametal

This example demonstrates a time series of percentiles (5th to 95th) as layered, colored areas, with a bold median line and animated markers showing client and server version releases. It uses a custom React application with the `d3.svg.area()` and `d3.svg.line()` APIs to render the smooth, interpolated bands, and animates the markers with `transition().attr()` over one second. The data comes from `data.json`, with release events from `markers.json`, and the visualization also includes a legend and axis clipping to keep the chart clear.

CCheah Peng Huat
87% match
Loading thumbnail…

Fork of SVG Fundametal

This visualization shows a time series of page load performance metrics, displaying percentile bands (5–95% and 25–75%) as shaded areas alongside a bold median line. Animated circular markers highlight specific events—client releases and server versions—that slide upward from the chart’s baseline. Built with React and D3.js, the code uses `d3.svg.area()` and `d3.svg.line()` with basis interpolation to render smooth paths, while `transition()` animates marker positions. The data is loaded from JSON files containing daily percentile values and event annotations.

Mmotobernix@gmail.com
82% match
Loading thumbnail…

Fork of Visualizing Percentages

Three alternative views of the current date's progress through the year appear side by side: a rounded progress bar, a donut chart, and a semicircular gauge. Each chart displays the same percentage value, computed from the current day of year divided by the total days in the year. The code uses D3 v6 arc generators for the donut and gauge paths, along with SVG rectangles for the bar, and renders the percentage labels as SVG text elements within a React application.

Cckp8
77% match
Loading thumbnail…

Fork of Visualizing Percentages

This example visualizes the current day of the year as a percentage of the year's progress, using three different chart types: a progress bar, a donut chart, and a gauge. The data is derived from the current date, calculated with `d3.timeFormat`, and the visualization is rendered as an SVG within a React framework. The code defines custom components for each chart type, leveraging D3's `arc` API to generate the donut and gauge paths, while the bar uses simple SVG rectangles.

Cckp8
75% match
Loading thumbnail…

Visualizing Percentages

This example shows three different ways to visualize the same percentage: the current day of the year as a fraction of the total days in the year, computed using `timeFormat` from d3. It presents a progress bar, a donut chart, and a semicircular gauge side by side, each displaying the computed value. The React components render SVG primitives, with the donut and gauge using d3’s `arc` generator to create their shapes. The progress bar uses simple SVG rectangles, and all three update dynamically based on the current date.

WWaseem Medhat
75% match
Loading thumbnail…

Line practice

This example shows a time series of percentage values plotted as a connected scatter plot, where each point is color-coded (green, amber, or red) based on its value’s threshold against 50% and 75% reference lines. The React-based visualization uses d3’s `scaleTime` and `scaleLinear` for axes, `line` to draw the main trend and dashed threshold lines, and CSV data loaded via `d3.csv`. Point colors are assigned with a custom `colorDot` function, and interactivity is limited to a native SVG `<title>` tooltip showing the raw percentage value.

333Bambam33
74% match
Loading thumbnail…

Fork of Visualizing Percentages

This visualization shows the current day of the year as a percentage using three different progress indicators: a horizontal bar, a donut, and a gauge. The percentage is computed from today’s date using `d3.timeFormat` to compare the day-of-year against the total days in the year. Each indicator is built with React components and SVG paths generated by `d3.arc`, with progress values driving the bar width, donut arc end angle, and gauge sweep. The layout is arranged using SVG groups with transforms, and the background container is toggled via a margin rect.

Cckp8
74% match
Loading thumbnail…

Fork of Visualizing Percentages

This example visualizes the current day of the year as a percentage of the total year, derived from JavaScript's `Date` object and D3's `timeFormat`. It displays this value through three distinct SVG components: a rounded progress bar, a donut chart, and a semicircular gauge. The code uses D3's `arc` generator to construct the donut and gauge paths, while React components manage the rendering. Margins and layout are handled by a custom `VizContainer` component that wraps the SVG output.

Cckp8
74% match