{"version":"1.0","type":"rich","title":"15 - Show / hide elements on mouse click with d3.js","description":"This example demonstrates how to toggle the visibility of line chart elements by clicking on legend text. The visualization displays two time-series lines—a blue line for closing values and a red line for opening values—plotted against dual Y axes on an SVG canvas using D3 v3. The data is parsed from a small CSV-like array of dates and numeric values. Clicking on the “Blue line” or “Red line” legend labels toggles the opacity of the corresponding line and its associated axis, effectively hiding or showing that data series. The interaction is implemented with D3’s click event handler, which checks the active state of each line and updates the opacity of both the path and the matching axis. This example demonstrates how to add simple interactive show/hide functionality to a multi-series line chart.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-f2d65d3e936d06c2fbd2a38f78eb6bdf?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}