Borehole Dummy Data with menue

100%

Borehole Dummy Data with menue

✓ Published1🌍 Public

Last edited Feb 26, 2019

Created on Oct 8, 2018

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.

AI-generated description

This is dummy data and will be used as a template to represent GSI Borehole data in the future.

MIT Licensed

Similar vizzes

Loading thumbnail…

Borehole Dummy Data with menue

This interactive scatter plot displays borehole dummy data, allowing users to compare two variables selected from dropdown menus. The visualization uses D3 v5 with an animated scatter plot that transitions circles from the center to their positions over two seconds. The code implements a reusable dropdownMenu component and scatterPlot module, utilizing d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. Data is loaded from an external CSV file, with Depth, Date, and Temp columns parsed from strings to proper data types.

SShane Carey

96% match

Loading thumbnail…

Scatter/Line Plot with Menus

This visualization displays borehole data as an animated scatter/line plot, with a dropdown menu controlling which measurement (Depth or Temp) appears on the y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` for axes, plus a `line` generator for the connecting path. Circles transition over two seconds using `transition().delay()`, while the menu is built with a custom `dropdownMenu` module that binds `<select>` options to data columns.

SShane Carey

87% match

Loading thumbnail…

Scatter/Line Plot with Menus

This interactive visualization displays borehole depth and temperature measurements over time, plotted as red circles connected by a steelblue line. Users can switch the y-axis variable between Depth and Temp via dropdown menus, while the x-axis remains fixed to date. The chart uses D3 v5 scales, axes, and a line generator for rendering, with animated transitions on circle positions. SVG elements are updated through enter/merge/exit selections, and the menus are built using a reusable dropdownMenu module.

WW9183907

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

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

83% match

Loading thumbnail…

Fork of Scatter/Line Plot with Menus

This visualization combines a scatter plot with a line chart, showing depth and temperature data from a borehole dataset over time. Users can select which variable to display on the y-axis (Depth or Temp) through dropdown menus built with a custom `dropdownMenu` function. The chart is rendered using D3 v5 with SVG elements, featuring animated circles that transition and expand into place, along with a line path connecting data points. Axes, labels, and gridlines are generated using `d3.axisLeft` and `d3.axisBottom`, with dates formatted via `d3.timeParse` and `d3.timeFormat`.

NNarayana Reddy

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

81% match