New Draw

100%

New Draw - Adding group

✓ Published2🌍 Public

Last edited Mar 30, 2020

Created on Mar 27, 2020

Forked from New Draw

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

New Draw - Adding group

A grouped bar chart visualizes stock movement data, showing the duration of activities across different routes (e.g., "Elevador," "SD-10") over time. Each bar’s length represents a duration value, with groups positioned by timestamp and route category. The visualization uses D3 v5 with SVG rendering, employing `scalePoint` for the time axis, `scaleBand` for route grouping, and `scaleLinear` for bar lengths. Data is loaded from a JSON file, and axes are customized using `axisBottom` and `axisLeft`, with rotated time labels for readability.

AAjayyy

90% 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

87% match

Loading thumbnail…

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

82% 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

73% 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

73% 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

72% 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

71% 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

70% match