operations graph

100%

operations graph

✓ Published1🌍 Public

Last edited Mar 18, 2020

Created on Mar 18, 2020

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.

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

90% match

Loading thumbnail…

multiple lines better func

This interactive chart compares two series of operational data over time using multiple lines, each with a distinct curve fitting method. The visualization uses `d3.tsv` to load the dataset and `d3.scaleLinear` for axes, with `d3.line` and `d3.curveStep` and `d3.curveNatural` to render the lines, while circles mark each data point. It also includes a categorical x-axis for operation types via `d3.scaleBand`. The chart is rendered as an SVG, sourced from the example.tsv file.

RRambo-chan

74% match

Loading thumbnail…

multiple lines better func

Two line charts compare the y1 and y2 series against a shared x-axis, with green step curves and red natural curves drawn via d3.line and distinct curve interpolators. Each series has its own left and right y-axis scales created with d3.scaleLinear and d3.axisLeft/axisRight, while a third band axis lists operation labels from example.tsv, rotated for readability. The visualization uses d3.tsv to load the tab-separated data and renders SVG circles and paths for each point. Axis ticks for operations are staggered using the scaleBand step.

NNoWizards

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

71% match

Loading thumbnail…

Timeline

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

MMauradion

70% match

Loading thumbnail…

Time based moving graph with no labels

Four time-series data columns—Partner, PCL, GOLAN, and DriveU—scroll horizontally across the SVG canvas, updating continuously. The animated chart uses D3's `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with lines drawn via `line` and `curveBasis` geometry. A `transition` with `easeLinear` animates the sideways movement, clipped by a `clipPath` to reveal new data points. Each line has a distinct color from a `scaleOrdinal` range, and the visualization loads data from a CSV file.

PPiotr Paszek

69% match

Loading thumbnail…

Basic Chart, simple dataset

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

NNoWizards

69% match

Loading thumbnail…

Activity8_Task4

This visualization displays the cost of sales from 2000 to 2013 using an area chart with a smoothed basis curve line. The SVG chart uses D3 v5 scales (scaleTime, scaleLinear) and axes (axisLeft, axisBottom) to map the temporal and cost dimensions. Data is loaded from a CSV hosted on GitHub, with year values parsed as dates. The code demonstrates local ES6 module imports and D3's line and area generators with curveBasis to create the filled region and overlaid stroke.

AArun Pratap

69% match