Skip to main content
100%

Custom stacked row chart

✓ Published0🌍 Public
Aamithegde
Last edited Apr 14, 2016
Created on Apr 14, 2016

This custom stacked row chart displays server uptime and health across time intervals, with each row representing a server and colored segments indicating health levels from good to bad. The chart uses D3.js version 3.5.5 to render SVG elements, mapping server data with d3.scale.linear for the time axis and d3.scale.ordinal for server rows. Health levels are encoded with four warning colors, and values exceeding three are clamped to the darkest red. The visualization includes labeled axes, dashed guide lines, and a legend explaining the color-to-health mapping, with data provided as inline JavaScript objects.

AI-generated description

Built with blockbuilder.org

This chart renders custom stacked row chart to represent bunch of servers, their up time and health level at different intervlas

Similar vizzes

Loading thumbnail…

Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, with hover highlighting on each bar. The visualization uses D3 v4 to bind the dataset, scales it from seconds to hours, and renders the bars as SVG rectangles with axes. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The bars change color on mouseover via CSS, while the data comes from an embedded inline array rather than an external file.

HHelen-Luwei-Zhang
74% match
Loading thumbnail…

d3.js learning

A stacked column chart displays weekly data for six users across six weeks, with each column segment colored per user and labeled by date. Built with D3 v3's stack layout, the chart renders as SVG with axes and gridlines. Hovering over any segment reveals a tooltip that tracks the mouse position, showing the exact value. The chart is constructed using a margin convention, ordinal x-scale for dates, and linear y-scale for cumulative sums.

Aachalvs
72% match
Loading thumbnail…

Test

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.

CCheah Peng Huat
72% match
Loading thumbnail…

D3 Example

This stacked bar chart shows the count of Up, Down, and Failed statuses across five days, with each layer’s height representing the cumulative value. It uses D3 v3’s `d3.layout.stack` and `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and a `d3.scale.category10` color scale for the status categories. The data is loaded from a CSV file, and the chart renders as SVG within a React framework, with axes and a color legend added via `d3.svg.axis` and `d3.legend.color`.

Pp4pravin
71% match
Loading thumbnail…

StackedChart

This interactive visualization displays four layers of synthetic time-series data, switching between stacked and grouped bar layouts through animated transitions. Users toggle between modes via radio buttons, with sequenced transitions preserving object constancy as bars morph between the two arrangements. The example uses D3 v3 with SVG rendering, employing `d3.layout.stack` for stacking, ordinal and linear scales for positioning, and chained `transition()` calls with staggered delays to animate rectangle positions, widths, and heights. Colors derive from a linear scale spanning blue-gray tones, while data generation uses a bump function inspired by Lee Byron’s streamgraph test data.

Aadilyalcin
71% match
Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

AAlexDaGr8
71% match
Loading thumbnail…

Fork of Fork of Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, using d3.scaleBand and d3.scaleLinear. The chart renders as SVG with hover highlighting, changing bar color from steelblue to brown on mouseover. The data is loaded from an external CSV file about crimes against Indian women, though the visible dataset is hardcoded inline. Two donut charts are mentioned as new features, but the code only implements the bar chart with simple axes and bar rects.

VVamsiYandapalli
71% match
Loading thumbnail…

Document

Two small SVG charts display time blocks as steel-blue bars against a 24-hour y-axis, with each chart representing a different dataset of start and end hour ranges. The code uses d3.v3’s `d3.svg.axis` and `d3.scale.linear` to map hours to vertical positions, calculating tick distance to size bar heights. Bars are appended as `rect` elements via `selectAll` and `enter()`, with opacity set to 0.5. Data are hardcoded arrays of objects, rendered side by side in Bootstrap grid columns.

Aackuser
71% match