balaszol

@balaszol·9 public vizzes

Ninth D3 demo

This example visualizes CPU utilization per minute for several servers, presenting the data as multiple colored line charts over time. The visualization uses the D3.js library, specifically leveraging APIs like `scaleUtc`, `scaleLinear`, `scaleOrdinal`, `line`, and `groups` to map the date-time and CPU load values to SVG paths. A legend identifies each server, and the code incorporates interactive features such as a mouse pointer and `bisectCenter` to highlight individual data lines on hover. The data is loaded from a CSV file containing server, timestamp, and CPU load columns.

Sep 24, 2020

Loading thumbnail…

Eigth D3 demo

This example displays CPU utilization over time for multiple servers, rendered as an SVG line chart using D3 v6. The chart groups data by server from a CSV file, with time on the x-axis and CPU percentage on the y-axis. It uses d3.scaleUtc, d3.scaleLinear, d3.line, and d3.groups to generate the visualization, with an axis and gridlines styled via CSS. The implementation also includes hover interactions, though the specific details of that behavior are incomplete in the provided code.

Sep 21, 2020

Loading thumbnail…

Seventh D3 demo

This D3 demo visualizes CPU utilization per minute across multiple servers, displayed as overlaid line charts in an SVG. Server identification and usage data come from a CSV file. The visualization uses `d3.csv` to load data, `d3.scaleUtc` and `d3.scaleLinear` for axes, `d3.line` to generate paths, and `d3.schemeTableau10` for color coding. Hovering over a line reveals detailed information, powered by `d3.pointer` and `d3.bisectCenter` to locate the closest data point.

Sep 20, 2020

Loading thumbnail…

Sixth D3 demo

This D3 v6 example visualizes CPU utilization over time for a single server, with data read from a CSV file. The SVG chart plots a line graph using an olive-colored path rendered via a d3.line generator, with a linear y-scale for CPU percentage and a UTC-based x-scale for timestamps. The y-axis includes horizontal grid lines and a bold "CPU Utilisation" label, while the x-axis is positioned at the bottom. The code explicitly uses d3.select, d3.csv, d3.utcParse, d3.utcFormat, d3.scaleLinear, d3.scaleUtc, d3.extent, d3.axisLeft, d3.axisBottom, and d3.line.

Sep 18, 2020

Loading thumbnail…

Failed 4th attempt to multiline with hover

This example shows CPU utilization over time for multiple servers, with each server represented as a separate line. The visualization aggregates data from a CSV file containing per-minute CPU readings for eight server instances. Built with D3 v6, the code uses `scaleUtc` and `scaleLinear` to map the temporal and numerical dimensions, while `axisBottom` and `axisLeft` produce the axes. The multi-line chart is rendered as SVG paths, styled with a stroke and `mix-blend-mode`, though the attempted hover interaction is not implemented in the provided code.

Sep 18, 2020

Loading thumbnail…

Fifth D3 demo

A line chart displays CPU utilization percentages per minute for a single server, plotted over time. The y-axis lists timestamps, while the x-axis shows CPU load on a fixed 0–100% scale. The visualization uses D3.js version 6, specifically the `select`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, `line`, and `curveBasis` APIs, to render the SVG path. Data is loaded from a CSV file with `d3.csv`, and the code comments indicate an earlier bar-chart version was replaced by this line representation.

Sep 18, 2020

Loading thumbnail…

Third D3 demo

This example shows CPU utilization per minute for a server, displayed as a vertical bar chart where each bar represents one timestamp and its height reflects CPU percentage on a fixed 0–100 scale. The SVG rendering uses D3 v6 utilities including `csv` for data loading, `utcParse` and `utcFormat` for date handling, `scaleBand` for the x-axis, and `scaleLinear` for the y-axis. Axes are drawn with `axisLeft` and `axisTop`, while bars are appended as `rect` elements, with styling defined in an external stylesheet.

Sep 17, 2020

Loading thumbnail…

Second D3 demo

This bar chart displays CPU utilization percentages per minute for a single server, with time on the vertical axis and CPU load on the horizontal axis. Using D3 v6, the code loads data from a CSV file and renders SVG rectangles via `selectAll('rect')`. The linear scale `scaleLinear` maps CPU values from 0 to 100, while `scaleBand` positions each timestamp, with axes created using `axisLeft` and `axisBottom`.

Sep 17, 2020

Loading thumbnail…

First D3 demo

A yellow smiley face rendered as SVG circles, a red nose, and a mouth drawn with the `d3.arc` path generator. D3 selections append shapes to a centered group, with the right eyebrow animating upward and downward via two sequential `transition.attr` calls on a rectangle. The code imports `create`, `select`, and `arc` from D3 v6 and uses static dimensions without external data.

Sep 17, 2020