Skip to main content
SimilarExport ZIP
100%

ME - Com Bandscale

✓ Published2🌍 Public
PPedro Ernesto Tramontina
Last edited Apr 20, 2020
Created on Mar 30, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

ME - Com Timescale (Zoom)

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.

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

scaleBand() in action

This example demonstrates a horizontal bar chart where each bar’s vertical position and height are determined by `d3.scaleBand`. Five data items, each with a day label and a numeric value, are mapped to a band scale with a range of 0 to 200 pixels and inner padding. The SVG renders orange rectangles whose `y` attribute comes from the scale, `height` equals the band’s `bandwidth()`, and `width` reflects the data value. The code uses D3 v7’s selection `.join()` to bind data to `rect` elements.

SSubhendu Karmakar
73% 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
72% match