Skip to main content
SimilarExport ZIP
100%

Bar chart

✓ Published1🌍 Public
GGeolffrey S Mena
Last edited Sep 6, 2019
Created on Sep 6, 2019
Forked from Bar chart

A bar chart displays the relative proportions of work, stop, and idle time for four crews, using horizontal stacked bars. Each crew’s row is composed of three colored segments whose lengths correspond to the numeric values from the CSV data. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to load the data, position the bars, and render axes in SVG. A static color scale assigns distinct hues to the three activity categories.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart

This bar chart displays the distribution of work, stop, and idle time for four different crews, with each crew represented by a horizontal bar. The chart uses a time-based x-axis and a categorical y-axis, with green bars showing the population value from the CSV data. The visualization is built with D3.js, using scaleTime for the time axis, scaleBand for positioning the bars, and scaleOrdinal for color mapping, though the bars appear uniformly green due to CSS styling. Data is loaded from a CSV file and rendered as SVG.

GGeolffrey S Mena
94% match
Loading thumbnail…

Bar chart

This bar chart shows the distribution of work, stop, and idle time for four different crews, with time plotted on a time-based x-axis and crews on a categorical y-axis. It uses D3.js version 5.11's `scaleTime`, `scaleBand`, and `scaleOrdinal` to map the data, and `axisLeft` and `axisBottom` for rendering the axes. The chart is drawn as an SVG with a green fill for the bars, and the data is loaded from a CSV file via `csv`. The x-axis range is set from November 2016 to February 2017, with a custom tick format function.

GGeolffrey S Mena
92% match
Loading thumbnail…

Bar chart

This bar chart displays work, stop, and idle statuses for four crews, with each crew’s data encoded as a single green bar scaled along a time-based x-axis from November 2016 to February 2017. The visualization uses d3.csv to load data, d3.scaleTime for the horizontal axis, d3.scaleBand for vertical positioning, and d3.scaleOrdinal for potential color mapping, though bars are uniformly styled via CSS. SVG rendering in index.html receives the chart through d3 selections and axes, with the dataset split into three columns per crew.

GGeolffrey S Mena
92% match
Loading thumbnail…

Bar chart

This example shows a bar chart comparing workstation states for four crews, with each crew’s data split across work, stop, and idle segments over a time-scaled horizontal axis. The visualization uses a band scale for categories and a time scale for dates, with ordinal color encoding for the segments. It loads data from a CSV file and renders as static SVG rectangles, though the chart’s axes and tooltips are not fully wired in the provided code. The implementation relies on D3 v5 primitives such as `scaleTime`, `scaleBand`, `scaleOrdinal`, and `csv`.

GGeolffrey S Mena
91% match
Loading thumbnail…

Bar chart

This example shows a horizontal bar chart comparing the "population" values of four crews across three categories: State, Stop, and Idle. The visualization displays the data from the provided `data.csv` file, with each bar’s length representing the numeric population value. Using the D3.js library (version 5.11.0), the code employs `scaleTime` for the x-axis and `scaleBand` for the y-axis, along with `axisLeft` and `axisBottom` to render the chart’s axes. The bars are drawn as rectangles with a fixed green fill, and the data is loaded asynchronously via `csv('data.csv')`. The rendering is delivered as an SVG element within an HTML page.

GGeolffrey S Mena
88% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
87% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
87% match
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
87% match