Toggling element visibility in v6

100%

Toggling element visibility in v6

✓ Published0🌍 Public

Last edited Sep 14, 2020

Created on Sep 14, 2020

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.

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 6 of d3.js.

mit Licensed

Similar vizzes

Loading thumbnail…

Toggling element visibility in v7

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.

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

90% match

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

87% match

Loading thumbnail…

Multiple line graph in v6

This example displays two time-series lines on a single chart, comparing the daily close and open values from a CSV file. The visualization uses a time-scaled x-axis and a linear y-axis, with the close line rendered in steel blue and the open line in red. Built with D3 v6, the code employs `d3.csv`, `d3.timeParse`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to load, parse, draw, and label the data within an SVG. The graph comes from the D3 Tips and Tricks book repository.

Dd3noob

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

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

78% match

Loading thumbnail…

Labels on multiple lines v6

This example shows two time-series lines of stock data, one for "Close" and one for "Open," plotted over dates in April and May 2012. Each line is labeled directly at its right endpoint, with the "Open" label in red and the "Close" label in steelblue, matching the line colors. The visualization uses d3.version 6, along with d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, to render an SVG chart. Data is loaded from a CSV file with d3.csv, and the paths are drawn using the d3.line generator with separate `valueline` and `valueline2` functions.

Dd3noob

77% match

Loading thumbnail…

Simple tooltips in v6

This example shows a line chart of stock closing prices over time, with circular data points that reveal a tooltip on mouseover. The tooltip displays the formatted date and closing value. Built with d3.v6, the visualization uses `d3.timeParse` to parse dates, a `d3.line` for the path, and a floating `div` for the tooltip, animated via `transition().duration()`. Data comes from a CSV file, rendered as SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

77% match