Skip to main content
SimilarExport ZIP
100%

Show / hide elements on mouse click with d3.js

✓ Published0🌍 Public
Dd3noob
Last edited Nov 30, 2019
Created on May 9, 2014

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.

AI-generated description

This is a relativly straight forward graph with two lines. Each line and it's corresponding Y axis can be toggled on and off by clicking on the text labels at the bottom of the graph.

This example is based on the explanation given by 'mdml' in response to a Stack Overflow question on showing and hiding links and nodes.

It is used as an example of showing and hiding an element in d3.js using a separate element and described in the book D3 Tips and Tricks which can be downloaded for free from Leanpub.

mit Licensed

Similar vizzes

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

Simple d3.js tooltips

A line chart plots stock closing prices over time, with a tooltip that reveals the exact date and price when hovering over a data point. The visualization uses d3.js to render SVG circles for each data point and a path for the line, reading time-series data from a CSV file. The tooltip is implemented using an HTML div that appears via d3 transitions on mouseover and mouseout events, positioning itself near the cursor using `d3.event.pageX` and `d3.event.pageY`. The chart axes employ `d3.svg.axis` with time and linear scales.

Dd3noob
77% 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
77% 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
77% match
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
77% match
Loading thumbnail…

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

EElisaDnr
76% match
Loading thumbnail…

Multi y-axis with mouseover

This example extends the classic multi-axis line chart by adding a third y-axis, each color-coded to match its corresponding line: steelblue for closing values on the left, red for opening values on the right, and purple for the natural log of the opening values on an additional right-side axis. The chart uses D3 v4 with SVG rendering. When the user hovers over any line, that line is highlighted with increased stroke width and full opacity, while the other two lines are faded to 50% opacity. This interactive emphasis makes it easy to trace a single series across the chart despite the visual complexity of three overlaid trends and three separate y-axes. The axes and line colors are matched (steelblue, red, purple) to reduce ambiguity, and the effect is achieved by toggling CSS classes (`line--hover` and `line--fade`) via mouseover and mouseout events on each path.# Multi y-axis with Mouseover ## Description This visualization demonstrates a multiple line graph with three color-coded y-axes, one for each data series. The chart extends the classic dual-axis design by adding a third independent axis, allowing three different metrics to be displayed simultaneously on a shared time-based x-axis. ## Key Features **Three Y-Axes**: Each line has its own color-coded y-axis (steel blue on the left, red on the right, purple on the right). This allows three different data series with different scales—close price, open price, and log-transformed open price—to be compared directly. **Interactive Highlighting**: When hovering over a line, the hovered line is emphasized with a thicker stroke and full opacity, while the other lines fade to 50% opacity. This makes it easy to track a single series among the three. **Color-coded axes**: Each axis label color matches its corresponding line color, aiding quick visual mapping between lines and axes. **D3 v4 Implementation**: Built with D3.js version 4, this block extends d3noob's dual-axis example to include a third axis. The chart uses time-scale on the x-axis and three separate linear scales for the y-axes, with two aligned to the right side. The example uses a small CSV dataset of date, close, and open values, and includes a transformed third line plotting the logarithm of open. This is a single-file HTML + D3.js visualization (with a separate data CSV). The mouseover interaction highlights the hovered line and fades the others. Files: - `README.md` – describing the block - `index.html` – the main visualization code - `data4.csv` – the dataset </li> </ul> </div> </section> </div> </body> </html>```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Multi y-axis with mouseover</title> <style> body { font-family: sans-serif; margin: 2rem; } .example-container { border: 1px solid #ccc; border-radius: 8px; padding: 1.5rem; max-width: 1000px; } .title { font-size: 1.4rem; font-weight: bold; margin-bottom: 0.5rem; } .description { font-size: 1rem; line-height: 1.5; color: #333; margin-bottom: 1rem; } .meta { font-size: 0.85rem; color: #666; border-top: 1px solid #ddd; padding-top: 0.5rem; margin-top: 1rem; } code { background: #f4f4f4; padding: 2px 4px; border-radius: 3px; } </style> </head> <body> <h1>Multi y-axis with mouseover</h1> <p> This example extends the classic dual-axis line chart by adding a third y-axis and a mouseover interaction. Three lines share a common time axis (x), but each uses its own independent linear scale on the y-axis: the close values use the left axis (steel blue), the open values use the right axis (red), and the natural log of open is plotted against a third axis on the far right (purple). When you hover over a line, it becomes thicker and fully opaque, while the other two lines are faded, helping you trace each series. </p> <p> The chart is built with D3 v4 and rendered as SVG. It adapts d3noob's dual-axis example by adding a third y-axis and mouseover highlighting. This makes it easy to compare three different series with different scales in a single chart. </p> <p>Data and code from <a href='https://gist.github.com/ConorAspell/8252260e27a40f2bc284ca12841379a3'>gist.github.com/ConorAspell</a>.</p> </body> </html> </html>``` <!DOCTYPE html> <meta charset="utf-8"> <title>Multi y-axis with mouseover</title> <style> /* CSS styling for lines and axes */ .line { fill: none; stroke: steelblue; stroke-width: 2px; } .line--fade { opacity: 0.5; } .line--hover { stroke-width: 3px; opacity: 1.0; } .axisSteelBlue text{ fill: steelblue; } .axisRed text{ fill: red; } .axisPurple text { fill: purple; } </style> <svg width="960" height="500" class="chart"> </svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // set the dimensions and margins of the graph var margin = {top: 20, right: 40, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // parse the date / time var parseTime = d3.timeParse("%d-%b-%y"); // set the ranges var x = d3.scaleTime().range([0, width]); var y0 = d3.scaleLinear().range([height, 0]); var y1 = d3.scaleLinear().range([height, 0]); var y2 = d3.scaleLinear().range([height, 0]); // define the 1st line var valueline = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y0(d.close); }); // define the 2nd line var valueline2 = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y1(d.open); }); var valueline3 = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y2(Math.log(d.open)); }); // append the svg obgect to the body of the page // appends a 'group' element to 'svg' // moves the 'group' element to the top left margin var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Get the data d3.csv("data4.csv", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.date = parseTime(d.date); d.close = +d.close; d.open = +d.open; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y0.domain([0, d3.max(data, function(d) {return Math.max(d.close);})]); y1.domain([0, d3.max(data, function(d) {return Math.max(d.open); })]); y2.domain([0, d3.max(data, function(d) {return Math.max(Math.log(d.open)); })]); // Add the valueline path. svg.append("path") .data([data]) .attr("class", "line l1") .attr("d", valueline) .on("mouseover", mouseover) .on("mouseout", mouseout); // Add the valueline2 path. svg.append("path") .data([data]) .attr("class", "line l2") .style("stroke", "red") .attr("d", valueline2) .on("mouseover", mouseover) .on("mouseout", mouseout); // Add the valueline3 path. svg.append("path") .data([data]) .attr("class", "line") .style("stroke", "purple") .attr("d", valueline3) .on("mouseover", mouseover) .on("mouseout", mouseout); // Add the X Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Add the Y0 Axis svg.append("g") .attr("class", "axisSteelBlue") .call(d3.axisLeft(y0)); // Add the Y1 Axis svg.append("g") .attr("class", "axisRed") .attr("transform", "translate( " + width + ", 0 )") .call(d3.axisRight(y1)); // Add the Y2 Axis svg.append("g") .attr("class", "axisPurple") .attr("transform", "translate( " + width + ", 0 )") .call(d3.axisLeft(y2)); function mouseover(d) { var me = this; //d3.select(d.line).classed("line--hover", true); d3.selectAll(".line").classed("line--hover", function() { return (this === me); }).classed("line--fade", function() { return (this !== me); }); } function mouseout(d) { d3.selectAll(".line") .classed("line--hover", false) .classed("line--fade", false); } }); </script> </body> </html> Now write a 3 sentence description. Make it under 250 characters, including spaces. It should be suitable for a general audience.Three color-coded lines show how three separate y-axes relate to a shared time axis. Hovering over any line highlights it while dimming the others, making it easy to compare values across different scales.

CConorAspell
76% match