Toggling element visibility in v7

100%

Toggling element visibility in v7

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

This example shows a dual-line chart with interactive legend labels. Two overlaid time-series lines, one steelblue and one red, display close and open values from a small CSV dataset. Clicking a legend text toggles the corresponding line’s visibility by adjusting its opacity. The visualization uses D3 v7 with `d3.csv`, `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`, rendering to SVG via path elements and axis components.

AI-generated description

This is a multiple line graph demonstrating how to show / hide elements by clicking on other elements.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

mit Licensed

Similar vizzes

Loading thumbnail…

Toggling element visibility in v5

This interactive line chart displays two time series from a CSV file, showing closing and opening values over dates. The visualization allows users to toggle the visibility of each line by clicking on its corresponding legend label. Built with D3.js v5, it uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to construct the SVG paths, while legend clicks dynamically adjust the `opacity` of each line group.

Dd3noob

91% match

Loading thumbnail…

Toggling element visibility in v4

A dual-line chart displays close and open prices from a CSV file over time, with each line assigned a distinct color (steel blue and red) and its own y-axis scale. Users can toggle the visibility of either line by clicking on its corresponding legend text. The code uses d3.csv to load data, d3.timeParse to parse dates, and d3.line, d3.scaleTime, and d3.scaleLinear to construct the paths and axes. Clicking a legend label toggles the line’s opacity via d3.select and style updates, with an active flag tracking visibility state.

Dd3noob

91% match

Loading thumbnail…

Toggling element visibility in v6

This example shows a multi-line chart with two time-series lines representing stock close and open prices. Clicking the “Blue Line” or “Red Line” legend text toggles the visibility of the corresponding line by adjusting its CSS opacity. The chart uses two separate y-axes, with the left axis for close prices and the right axis for open prices. The visualization is built with D3 v6, using `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisRight`, with data loaded from a CSV file. Both lines share a single SVG path element each, and interactivity is handled via click event listeners on the legend text.

Dd3noob

91% match

Loading thumbnail…

Dual axes in v7

This example displays two line charts sharing a common time axis, with each line assigned its own colored vertical scale: a steelblue line for the "close" values on the left axis and a red line for the "open" values on the right axis. It uses the d3.v7 library, specifically the `d3.line` generator, `d3.scaleTime`, and two `d3.scaleLinear` scales. Data is loaded from a local CSV file via `d3.csv`, with dates parsed using `d3.timeParse`. The SVG output renders the paths and axes with custom CSS classes for axis-label coloring.

Dd3noob

77% match

Loading thumbnail…

Show / hide elements on mouse click with d3.js

A small multiple-line chart displays two time series of stock data, each with its own Y axis, in an SVG rendered by d3.js. Clicking the colored text labels toggles the visibility of each line and its corresponding axis by adjusting their opacity. The code uses d3.svg.line for the paths and d3.svg.axis with a time scale and linear scales, binding click handlers via d3.select to update element styles. The data is embedded inline as JSON, and the example builds on a Stack Overflow solution for showing and hiding elements.

Dd3noob

77% match

Loading thumbnail…

Labels on multiple lines v7

This example shows two time series lines—one for “close” and one for “open” values—plotted against a date axis, with each line labeled directly at its right‑end point using SVG `<text>` elements. The data is loaded from a local CSV via `d3.csv` and parsed with `d3.timeParse`. The chart is built with D3 v7 primitives: `d3.line` generates the path geometry, `d3.scaleTime` and `d3.scaleLinear` map data to coordinates, and `d3.axisBottom` and `d3.axisLeft` render the axes. Red and steel‑blue strokes distinguish the two lines, and their labels are positioned using the scaled y‑values of the first data point.

Dd3noob

77% match

Loading thumbnail…

Multiple line graph in v7

This example displays two line graphs on a shared time-based x-axis, comparing the open and close prices from a small CSV dataset over a three-month period. The close price is shown as a steelblue line, while the open price appears in red, with both axes scaled to fit the data. The visualization uses d3.line and d3.scaleTime to map data points, d3.axisBottom and d3.axisLeft to render the axes, and d3.csv to load the data. The SVG output includes two separate path elements styled with CSS classes.

Dd3noob

76% match

Loading thumbnail…

Multi-line graph 4 with v6: Toggle

A multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM. D3.js v6 is used to parse CSV data, scale the time and price domains, and render the SVG lines with distinct colors. Clicking a legend label toggles the corresponding line’s opacity via a transition, hiding or showing that company’s data. The example uses `d3.csv`, `d3.timeParse`, `d3.line`, and `d3.scaleOrdinal`.

Dd3noob

75% match