Skip to main content
SimilarExport ZIP
100%

operations graph

✓ Published0🌍 Public
NNoWizards
Last edited Apr 13, 2020
Created on Mar 18, 2020
Forked from 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.

AI-generated description

Bar chart to display population data of most populated countries in the world United Nations: world population prospects 2017 page.

MIT Licensed

Similar vizzes

Loading thumbnail…

operations graph

This visualization compares two data series on a shared timeline: one series plots numeric x/y values with stepped and natural curves, while a second set overlays planned versus real operation dates and costs for drilling activities. The chart uses two linear scales for the primary data, a time scale for the right axis, and a band scale for rotated operation labels along the bottom. It is built with D3 v5, rendering SVG circles and paths via `d3.line` and curves, with data loaded from a TSV file and a hardcoded JavaScript array.

NNoWizards
90% match
Loading thumbnail…

Range Column Bar Chart

This range column bar chart displays the downtime periods of nine oil wells, plotting each well's start and end dates as a horizontal bar against a time axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the date range and `scaleBand` for well names. Data comes from a CSV file with parsed date values, and the chart includes axes with tick marks, labels, and a title.

IImmaculata-Mary Muoghalu
72% match
Loading thumbnail…

Untitled

This example visualizes operating room schedules as an animated stacked bar chart, showing patient transfer, preparation, operation, and cleanup phases across multiple groups over time. Each horizontal bar represents a procedure timeline, with colored segments for planned versus actual durations. The chart uses D3 v5 with SVG transitions, loading CSV data and mapping it through a linear scale for time and an ordinal scale for color-coded groups. Rectangles animate their width and x-position on load to reveal the temporal structure. Tooltips and hover effects are configured through the d3-tip library and CSS styling.

Cchrisp76
67% match
Loading thumbnail…

Total usage

A stacked bar chart displays total usage per operation, with each rectangular segment sized proportionally to its contribution and labeled with absolute values, percentages, and operation codes. The chart uses D3 v5’s `scaleLinear` for positioning and percent calculations, `scaleOrdinal` with `schemeCategory10` for segment colors, and `sum` to compute the overall total. Data is loaded from a local JSON file via `json()`, and the visualization is rendered as SVG, with text elements placed above and within each bar segment.

PPedro Ernesto Tramontina
67% match
Loading thumbnail…

Multiple Instances

Two linked line charts visualize water level readings over time for two well locations. The upper chart displays the full dataset, while the lower chart contains a brushable axis. Dragging the brush updates the upper chart’s x-axis domain to the selected time range, filtering both charts to that interval. The visualization uses d3.csv, d3.scaleTime, d3.scaleLinear, and d3.brushX to manage data loading, scaling, and interactive selection, rendering paths and circles as SVG elements.

Ssleyus
67% match
Loading thumbnail…

Trend line

This visualization shows monthly water level trends for two well sites, with a brushable chart allowing users to select a date range and view a dashed regression trendline with its equation. The top chart displays the trendline and data points, while the bottom chart provides the brushing interface. The code uses d3.scaleTime, d3.scaleLinear, d3.line, d3.brushX, and d3.nest to render SVG paths and circles. The trendline is calculated via a custom least squares regression function imported from a separate module. Data is loaded from a CSV file.

SShane Carey
66% match
Loading thumbnail…

Line Chart

This line chart shows groundwater monitoring data from two EPA wells at Bog of the Ring, plotting water levels over time with an optional linear regression trendline. The visualization uses a linked-brush interaction, where selecting a date range in the smaller brush chart filters the main chart's time axis. Built with D3 v5, it employs `brushX` for brushing, `scaleTime` and `scaleLinear` for axes, and `nest` to group data by well. Data is loaded from CSV files using D3's `csv` function, and the regression calculation uses `leastSquares` from the custom `Regression` module.

PPatrickhCahill
66% match
Loading thumbnail…

Fork of Brush, Trendline, Legend, Linechart, Barchart

The visualization shows groundwater monitoring data from two observation wells at the Bog of the Ring, plotting water levels over time as a line chart with a brushed time-range selector below. A dashed linear regression trendline appears for the selected period, calculated via the least-squares method in the `Regression.js` module. The implementation uses D3 v5 APIs including `d3.brushX`, `d3.scaleTime`, `d3.scaleLinear`, `d3.nest`, and `d3.line`, rendering to SVG with a categorical color scale to distinguish the two wells. Data is loaded from external CSV files.

AAndre J Denais
66% match