Bar chart

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.

91% match

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.

91% match

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.

90% match

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.

90% match

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.

Bar chart

Bar chart

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.