Borehole Dummy Data with menue

100%

Borehole Dummy Data with menue

✓ Published0🌍 Public

Last edited Oct 15, 2018

Created on Oct 8, 2018

Forked from 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.

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

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

89% 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…

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

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

81% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from a CSV file, with two dropdown menus letting users choose which columns to plot on the x- and y-axes. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisBottom and d3.axisLeft for the axes. Changes trigger a transition with d3.transition, animating the circles’ positions over 1.2 seconds. Menus are built with a custom reusable dropdownMenu function, and the plot renders as SVG with 10-pixel-radius red semi-transparent circles.

HHasideluxe

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

80% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

KKanishka33

80% match