ME - Com Timescale (Zoom)

100%

ME - Com Timescale (Zoom)

✓ Published0🌍 Public

Last edited Apr 24, 2020

Created on Apr 17, 2020

This visualization shows the flow of inventory movements between stock locations over time, with each bar representing the quantity transferred and its position on the timeline indicating when the movement occurred. The chart uses an SVG rendering with D3 v5, employing `scaleTime` and `scaleBand` to map timestamps and stock names, while `drag` events enable horizontal panning of the timeline. Rectangles sized by `scaleLinear` display quantities, and the data comes from a static JSON file with fields for stock, quantity, and timestamp. The axis labels use the `timeFormat` function to display dates with seconds precision.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ME - Com Timescale

This example visualizes stock movements over time, showing quantities transferred between storage locations as horizontal bars linked by curved paths. The visualization uses a timeline on the x-axis and inventory locations on the y-axis, with each bar’s width proportional to the quantity moved. It implements zooming via d3.zoom on the x-axis and employs d3.scaleTime, d3.scaleBand, and d3.scaleLinear to map the data. The code uses d3.linkHorizontal to draw connecting curves between source and destination points, with data loaded from a local JSON file.

PPedro Ernesto Tramontina

94% match

Loading thumbnail…

ME - Com Bandscale

This example visualizes stock movements over time using a band scale for time and a color-coded bar chart for quantities. It plots quantities across different storage locations, with horizontal links showing transfer origins between elevators and destinations. The visualization uses D3 v5 with SVG rendering, employing `scalePoint` for time, `scaleBand` for locations, `scaleLinear` for quantities, and `linkHorizontal` for the flow paths. Data comes from a JSON file containing timestamps, quantities, and location references.

PPedro Ernesto Tramontina

84% match

Loading thumbnail…

ME - Com Bandscale (no lines)

This visualization displays stock movement data over time, showing quantities transferred between different storage locations like "Salão," "Elevador," and "SD-10." Each bar represents a transaction, with its width proportional to the absolute quantity and its position determined by timestamp on the x-axis and storage location on the y-axis. The chart uses d3.scalePoint, d3.scaleBand, and d3.scaleLinear for positioning and sizing, with bars rendered as SVG rectangles. Text labels display the signed quantity values, while d3.axisBottom and d3.axisLeft provide time-formatted and categorical axes.

PPedro Ernesto Tramontina

84% match

Loading thumbnail…

New Draw

This chart shows the movement of inventory quantities over time across different stock locations. Each horizontal band represents a storage area, and the length of each green rectangle encodes the quantity moved at a specific timestamp. The visualization uses D3’s `scaleBand` for the y-axis categories and `scalePoint` for the time axis, with rectangles sized by a linear scale. The data comes from a local JSON file, and the SVG output includes a rotated time axis and a custom title.

PPedro Ernesto Tramontina

77% match

Loading thumbnail…

Stock movement

This visualization tracks stock quantities across multiple warehouse categories over time. It displays each movement as a horizontal bar, where green bars show net increases and gray dashed bars show decreases, with remaining totals labeled above. The chart uses D3 v5 with an SVG rendering approach, scaling linear amounts within a point-based time scale and a band scale for stock categories. Data is loaded from a JSON file and parsed with Moment.js for date formatting on the x-axis.

PPedro Ernesto Tramontina

75% match

Loading thumbnail…

New Draw - Adding group

This example visualizes stock movements over time as a horizontal bar chart. Each bar represents a quantity value, grouped by stock location (Salão, Elevador, SD-10) along the y-axis, with timestamps on the x-axis. Using D3 v5, the code loads JSON data and employs `scalePoint` for time, `scaleBand` for stock locations, and `scaleLinear` for bar widths. It renders SVG rectangles with rounded corners and labels the quantity inside each bar, with axes formatted via `axisLeft` and `axisBottom`.

PPedro Ernesto Tramontina

70% match

Loading thumbnail…

New Draw - Adding lines

This example visualizes stock movement over time in a D3.js SVG rendering. It shows quantities as horizontal bars positioned by timestamp on the x-axis and stock location on the y-axis, with lines connecting source and destination entries. The visualization uses d3.scalePoint and d3.scaleBand for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.curveBundle.beta(1) to draw curved flow lines from origin to destination. Data is loaded from a JSON file containing timestamps, quantities, and origin references.

PPedro Ernesto Tramontina

69% match

Loading thumbnail…

Time based moving graph

This animated chart tracks four network metrics (Partner, PCL, GOLAN, DriveU) over a two-minute period. It shows a moving time window, with the axis and legend translating leftward to follow the data. The visualization uses D3 v6 'scaleTime' and 'scaleLinear' for axes, 'line' for paths, and 'transition' with 'easeLinear' for animation. Data is sourced from a CSV file containing per-second readings.

PPiotr Paszek

69% match