Fork of Scatter/Line Plot with Menus

100%

Fork of Scatter/Line Plot with Menus

✓ Published0🌍 Public

Last edited Mar 21, 2021

Created on Mar 21, 2021

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

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% match

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

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

82% match

Loading thumbnail…

Fork of Scatter Plot with Menus

A fork of the classic scatter plot, this visualization displays the Iris Dataset with interactive dropdown menus that allow users to select which attribute to map to the x-axis and y-axis. Built with React and D3 v5, the SVG chart uses `scaleLinear` for axes and renders circles as marks, with tooltips showing values. The code demonstrates reusable components for axes, dropdowns, and marks, and loads data via D3's `csv` function.

Pparshwa30122002@gmail.com

80% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot uses D3 v6 to visualize the Iris Dataset, shifting points between axes selected from dropdown menus. Built with a reusable `scatterPlot` component, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` with a 1000-millisecond duration, plus a 10-millisecond stagger delay, to animate both circle positions and axis updates. Selections trigger D3's `dispatch` events, while `join` handles entering, updating, and exiting SVG `circle` elements.

TThaverman

80% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This fork of the animated scatter plot uses dropdown menus to let users choose which Iris dataset columns map to the x and y axes. The chart displays points with a grow-in animation on entry and repositions them with a staggered transition when the axis selection changes. Axes update smoothly using D3 transitions. Data is loaded from a GitHub Gist as CSV, and the visualization is built with D3 v6 using reusable chart and menu components.

AAlex

80% match

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot displays car data from the UCI Auto MPG dataset, with dropdown menus letting users choose which numeric columns map to the X and Y axes. The visualization uses D3 v5 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` component handles option selection. SVG circles render each data point with animated transitions via `transition().duration()` and staggered `delay()` per point, creating a cascading effect when the axis variables change.

Wwzhang88

80% match