New Draw

100%

New Draw - Adding group

✓ Published0🌍 Public

Last edited May 21, 2020

Created on May 21, 2020

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.

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

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

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

76% match

Loading thumbnail…

Untitled

A grouped bar chart shows retrieval counts across six dates, with each date divided into five folders. Bars animate upward from zero using staggered delays and a mouseover darkens their color. The chart uses D3 v3 with ordinal and linear scales, SVG axes, and transition methods. Data is loaded from a JSON file and rendered as colored SVG rectangles with a fading legend.

LLokeyyyy

69% match

Loading thumbnail…

d3 grouped bar

This example shows a grouped bar chart comparing weekly values across two series, distinguished by fill color (blue for the previous series and gray for the current one). The data comes from a JSON endpoint (`/trends.json`) containing arrays for weeks and months. Using D3’s ordinal scales for positioning, it renders SVG rectangles for each bar, with a color-coded layer per series and month labels placed along the x-axis. The visualization is drawn inside an SVG container sized to the page element, using D3’s selection and data-join patterns to bind the nested values.

CCaged

69% match

Loading thumbnail…

Bar chart

This example shows a horizontal bar chart with a time-based x-axis and categorical y-axis, displaying progress along a timeline for crew groups. The bars are rendered with a fixed green fill, and the x-axis includes a custom tick format with negative tick sizes. The code uses D3 v5 APIs including `scaleTime`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, and loads data from a local CSV file via `d3.csv`. An SVG container with specific width and height dimensions is selected using `d3.select`.

Eelaine-xiao

68% match

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays population data across multiple categories, with each group of bars representing a different region or time period. The visualization uses D3.js v5 to render the chart as SVG elements, employing `d3.scaleBand` for positioning the grouped bars and `d3.scaleLinear` for the y-axis. A legend identifies each bar’s category, while axes are formatted using `d3.axisBottom` and `d3.axisLeft`. The chart also demonstrates dynamic data handling through `d3.csvParse` with auto-typing.

FfaRriaN

67% match

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Mmbostock

67% match