Skip to main content
SimilarExport ZIP
100%

ERP TIMEBAR

✓ Published0🌍 Public
JJimMaltby
Last edited Nov 23, 2020
Created on Nov 23, 2020
Forked from 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.

AI-generated description

Part of my ERP DataVis Project. This is the ERP timebar V2 http://bl.ocks.org/JimMaltby/844ca313589e488b249b86ead0d621a9

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

JJimMaltby
93% match
Loading thumbnail…

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.

JJimMaltby
90% match
Loading thumbnail…

ERP TIMEBAR

The ERP TIMEBAR displays stacked bar segments for event-related potential data across multiple series, with each colored group representing a factor level (Min, All, Max) over a shared time axis. The visualization animates bar growth using D3 v5 transitions, delaying each segment’s expansion to reveal the progression of values. It loads a CSV via `d3.csv` and `autoType`, applying `d3.stack()` and `d3.scaleBand`/`scaleLinear` scales, while `svg` rects are colored through a custom ordinal scale and rendered as SVG with timed `.attrTween`-like transitions.

JJimMaltby
90% match
Loading thumbnail…

ERP DisCal Chart - Scatter Plot type

This scatter plot visualizes the ERP Disruption Calculus, positioning each scenario by its 'ValueX' and 'ValueY' coordinates, which are derived from a randomly generated CSV dataset. The chart uses colored rectangles to divide the space into four quadrants, and circles are colored by their 'Group' category using a D3 ordinal scale. A D3 tooltip reveals the scenario's title and its four summary values (SumBU, SumEvo, SumGC, SumDis) on mouseover. The visualization is built with D3 v5, rendering to SVG, and includes animated transitions for the tooltip's opacity.

JJimMaltby
72% match
Loading thumbnail…

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
71% match
Loading thumbnail…

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
71% match
Loading thumbnail…

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
71% match
Loading thumbnail…

Worktime

This stacked bar chart visualizes worktime patterns by day, using a CSV file of start and end timestamps. Each bar represents a day, and segments within the bar show the duration of activities (e.g., “slq,” “edm”) between 7:30 AM and 7:30 PM. The chart uses D3 v4 with SVG, employing d3-dsv to parse data, d3-scale for positioning and color encoding, d3-axis for the time-based y-axis, and d3-shape for stacking. Hovering over a segment highlights it and displays a tooltip.

BBrunoDumas
70% match