Borehole

100%

✓ Published0🌍 Public

Last edited May 13, 2019

Created on May 13, 2019

This visualization displays borehole data as a stacked bar chart, mapping geological layers along the x-axis and their depth on the y-axis. The chart uses a single band scale for the categorical layer, with a linear scale for depth, rendering black rectangular bars via SVG. Built with D3 v5, it loads the dataset from a CSV file, computes scales and axes dynamically, and binds data to rect elements. The example demonstrates basic data loading, scaling, and SVG bar rendering without interactions or responsive updates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Borehole

This example visualizes a geological borehole as a vertical stacked bar chart, showing distinct subsurface layers including Topsoil, Peat, Till, and Sandstone, along with a blue line indicating the water table. Depth ranges appear dynamically in a tooltip on mouseover, providing context for each layer. The visualization uses D3 v5’s `select` API to append SVG shapes and text, and implements custom tooltip behavior via D3 transitions. Layer rectangles are colored to represent different materials, and the water level is marked with two blue lines, creating a simple cross-section of the earth.

SShane Carey

89% match

Loading thumbnail…

Borehole Dummy Data

This visualization displays weekly water level measurements from a GSI borehole, plotting depth against date as red scatter points on an SVG canvas. The data is loaded from a CSV file via d3.csv, with dates parsed using timeParse and scales built with scaleTime and scaleLinear. Axes are rendered through axisLeft and axisBottom, including rotated date labels and gridlines, while the title and axis labels are explicitly positioned. The chart uses D3 v5 and demonstrates a template for future borehole data visualization.

SShane Carey

84% match

Loading thumbnail…

Borehole Dummy Data - Areachart

This visualization displays weekly GSI borehole water levels as a filled area chart, with date on the x-axis and depth in meters below ground level on the y-axis. The chart uses d3.area with curveBasis to create a smooth line and fills the area beneath it in steelblue, while translucent red circles mark individual data points. Mouseover interactions trigger a tooltip showing the date and depth value. The data is loaded from a CSV file using d3.csv, with dates parsed via d3.timeParse and scales created using d3.scaleTime and d3.scaleLinear. Both axes are rendered with d3.axisLeft and d3.axisBottom.

SShane Carey

82% match

Loading thumbnail…

Borehole Dummy Data - Areachart

This visualization uses D3 v5 to plot borehole depth measurements over time as an interactive scatter plot. It displays dummy data approximating future GSI borehole data, with depth on the y-axis and formatted dates on the x-axis. The chart applies `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and renders semi-transparent red circles via SVG. The data is loaded from an external CSV file using `d3.csv` and parsed with `d3.timeParse`.

Zzren2

82% match

Loading thumbnail…

Borehole Dummy Data - Areachart

This visualization plots borehole depth over time using a scatter plot with red, semi-transparent circles. The chart displays date on the x-axis and depth on the y-axis, with rotated date labels and a title. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to compute scales and axes. Data is loaded from a CSV file via `d3.csv`, and dates are parsed using `timeParse` with the format "%d/%m/%Y".

SShane Carey

82% match

Loading thumbnail…

Borehole Dummy Data - Linechart

A line chart visualizes weekly water-level measurements in a borehole, plotting depth against date and including a red semi-transparent dot for each data point. Hovering over a dot reveals a tooltip with the exact date and depth value. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to render the SVG. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `timeParse` and formatted with `timeFormat`.

SShane Carey

78% match

Loading thumbnail…

Borehole Dummy Data with menue

This interactive scatter plot displays dummy borehole data, showing water depth over time with a dropdown menu to change the x-axis variable. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.axisLeft/axisBottom for rendering ticks. A custom dropdownMenu component, built with D3 selections, lets users switch between date, temperature, and other columns. The scatterPlot module renders red circles with SVG, including formatted date ticks and axis labels, supporting future GSI borehole data visualization needs.

SShane Carey

76% match

Loading thumbnail…

Hello VizHub

This example displays two synchronized visualizations of borehole water-depth data: a bar chart and a scatter plot. Both graphs use color to distinguish data points marked as "Old" or "New," and hovering over a bar highlights the corresponding circle in the other chart with a green stroke. Both views are rendered as SVGs using D3 v5. The bar chart creates rectangles with `d3.scaleLinear` for the y-axis and `d3.axisRight` for tick marks, while the scatter plot uses circles with a left-aligned axis. Data is loaded from a CSV file and parsed with `d3.timeParse`.

SShane Carey

75% match