New Draw

100%

New Draw - Adding lines

✓ Published1🌍 Public

Last edited Mar 30, 2020

Created on Mar 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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…

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

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

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

72% match

Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

SSheela2930

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

70% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado

70% match