Skip to main content
SimilarExport ZIP
100%

Line Plot with menu

✓ Published3🌍 Public
Nnorangai
Last edited Nov 3, 2019
Created on Nov 3, 2019

A line plot displays monthly price data for two columns, with a dropdown menu above the chart to switch which column is rendered on the y-axis. The menu, built via a custom `dropdownMenu` component, triggers the `scatterPlot` component on change, which uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `curveBasis` to draw the smoothed path. Animated transitions of 1000 milliseconds update the line when a new column is selected, using SVG rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Line Plot with menu

This interactive line plot shows how commodity prices change over time, with a dropdown menu letting users switch between different price columns from the dataset. The visualization uses D3 v5 with a modular component approach, where a reusable `dropdownMenu` function handles the selection interface and a `scatterPlot` component manages the SVG rendering. The code applies `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` generator with `curveBasis` to create smooth paths. Transitions animate the line update when the user selects a new column, while axis ticks include gridlines for readability.

WW9183907
90% match
Loading thumbnail…

Line Plot with menu

This line plot displays price trends over time for multiple commodities, with a dropdown menu allowing users to select which price column to visualize. The chart uses an SVG rendered with D3 v5, employing scales, axes, and a line generator with basis curve interpolation. Data is loaded as CSV from a remote URL, parsed with date and numeric formatting, and rendered through reusable dropdownMenu and scatterPlot modules. The dropdown menu dynamically updates the y-axis based on user selection.

TThiago Carvalho
87% match
Loading thumbnail…

Fork of Line Plot with menu

This interactive line chart displays price trends across months, letting users switch between two price columns via a dropdown menu. The visualization redraws the line with a smooth basis curve and animated transition whenever a new column is selected. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and a custom `dropdownMenu` component to handle user input. The data is loaded from an external CSV file, with month values parsed as dates and price strings converted to numbers.

Mmauricio-acosta-reyes
86% match
Loading thumbnail…

Line Plot with menu

This interactive line plot displays eyeSight data over time, with a dropdown menu to toggle between the S and C data columns. Users can also append new data points via a form that accepts a year, S value, and C value, which are then added to the dataset and trigger a re-render. The visualization is built with D3 v5, using `csv` to load data, `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `transition().duration(1000)` to animate the line path update. The menu is constructed using a custom `dropdownMenu` component that appends `option` elements to a `select` element.

Nnorangai
79% 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
78% 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
77% match
Loading thumbnail…

Line Plot with menu

This line plot displays average marks per module across a department, with a dropdown menu to select which performance metric (PASS or FAIL) to visualize. The chart updates dynamically with a smooth transition when the selection changes. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded from a CSV file, and the dropdown is created using a reusable selection-based component that binds to the menu's `change` event.

WW9183907
77% match
Loading thumbnail…

Scatter plot with menus

This example presents a scatter plot of automobile data, where users actively select which numerical columns to display on the x- and y-axes via two interactive dropdown menus. The visualization updates dynamically, smoothly animating the repositioning of data points over a 1.5-second transition with a staggered delay, making comparisons between different attribute pairings intuitive. The implementation leverages D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart, and it uses custom `dropdownMenu` and `scatterPlot` modules to manage the SVG interface. Data is loaded from a remote CSV file using `d3.csv`.

PPeter S
76% match