Range Column Bar Chart

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

operations graph

This visualization compares planned versus actual oil well operations using two connected line charts. The top chart tracks operation timelines against dates, while the bottom chart displays cumulative costs over time. Using D3.js v5 with SVG rendering, the code employs d3.scaleBand, d3.scaleTime, and d3.scaleLinear to map operations, dates, and costs. Data comes from a hardcoded JavaScript array containing operation names, planned/real dates, and costs.

NNoWizards

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.

71% match

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

70% match

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

69% match