Toggling element visibility in v4

100%

Toggling element visibility in v4

✓ Published0🌍 Public

Last edited Aug 16, 2016

Created on Aug 16, 2016

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.

AI-generated description

This is a multiple line graph demonstrating how to show / hide elements by clicking on other elements. This was written using d3.js v4 and is a follow on to the multiple line graph example here.

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

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

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

90% match

Loading thumbnail…

Multi-line graph 4: Toggle

This multi-line graph displays monthly stock prices for multiple companies over time, with each line assigned a unique color via D3's category10 scale. The data is loaded from a CSV file, nested by stock symbol, and rendered as separate SVG paths using D3’s time scale for dates and linear scale for prices. A legend with clickable text labels allows users to toggle individual lines on and off; clicking a legend entry fades the corresponding line to an opacity of zero or restores it to full opacity with a 100ms transition. The chart includes axes and a dynamic color assignment, with the toggle functionality demonstrated as the fourth iteration in a series focused on building interactive multi-line graphs.

663anp3ca

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

Multi-line graph 4 with v4: Toggle

This interactive multi-line chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 onward, with a clickable legend that toggles each line’s visibility. Using D3 v4, the code parses CSV data with `d3.csv`, nests records by symbol, and renders SVG paths via `d3.line` and `d3.scaleTime`/`d3.scaleLinear`. Clicking a legend text triggers a 100ms `transition` on the corresponding line’s opacity, dynamically showing or hiding it. The legend colors are assigned with `d3.scaleOrdinal` and `d3.schemeCategory10`.

Dd3noob

77% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines—one for closing prices and one for opening prices—in a single SVG chart using D3 v4. The chart uses `d3.csv` to load data from a CSV file, `d3.timeParse` to convert dates, and `d3.scaleTime` and `d3.scaleLinear` for the axes. Two `d3.line` generators create the paths, with the second line styled red via `.style("stroke", "red")`. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

76% match