ERP TIMEBAR

ERP TIMEBAR

This visualization displays ERP (Enterprise Resource Planning) process timing data as a horizontally stacked bar chart, where each row represents a series and colored segments show time ranges from minimum to maximum values across multiple groups. The bars animate from zero width to their full extent using D3 transitions, with a tooltip feature implemented via the d3-tip library. The chart uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.stack for data serialization. Data is loaded from a CSV file via d3.csv with autoType parsing, rendered as SVG elements with ordinal color scaling per group.

92% match

ERP TIMEBAR

This example presents a stacked bar chart that visualizes temporal ERP data across multiple series. A dropdown filter enables users to select and compare different data groups. The visualization animates the bars, drawing them from right to left to represent a consistent timeline starting at year 2000. The chart uses an ordinal color scale with distinct palettes per group to differentiate categories. The implementation relies on D3 v5’s core API, including `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.csv`, with data fetched from a GitHub gist. Rendering is done via SVG with CSS-based hover effects that highlight individual bars.

91% match

ERP TIMEBAR

The ERP Timebar visualizes stacked timeline data for enterprise resource planning projects, showing duration breakdowns across four time categories for each server or task. Categories are color-coded, with a distinct palette applied to Infrastructure groups versus other project types. The chart uses D3 v5 with SVG rendering, employing `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.stack()` for data aggregation, and `d3.axisTop`/`d3.axisLeft` for axes. Data loads from a CSV via `d3.csv`, and a legend clarifies the category colors.

90% match

Time Series Bar Chart!

This time series bar chart visualizes hierarchical grouping and temporal spans across categories. The SVG visualization uses D3 v5’s scaleLinear and scaleBand to map start and end times along the x-axis, while grouping data points by category on the y-axis. Bars respond to mouseover with a transition that expands their height and displays a tooltip, implemented via d3.select and event listeners. The code loads data from windows.csv using d3.csv, applying a linear scale for time intervals and styling with CSS classes for layout and interactivity.

Ffoomoon

70% match

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena

Bar chart

GGeolffrey S Mena

Bar chart

GGeolffrey S Mena

ERP DisCal Chart - Force Bubble start COMPLEX - DisCal

This force-directed bubble chart visualizes randomly generated data points on a quadrant grid that measures the "game-changingness" of an ERP system against the ability to respond in time. The four colored rectangles delineate strategic response zones, with bubble positions plotted using `scaleLinear` on the x and y axes and `scaleSqrt` for symbol sizing. The chart is rendered as an SVG using D3.js v5, with axis labels designating the quadrants and a tooltip showing circle details upon hover.