Chart Controls I

100%

Chart Controls I

✓ Published0🌍 Public

Last edited Jan 8, 2017

Created on Jan 8, 2017

This example demonstrates an interactive multi-series line chart where users can toggle the visibility of data for Europe, Asia, and America using radio buttons. The chart renders three time-series lines from a TSV file, with each line colored via a categorical scale. The code uses D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` for scaling and axes. Radio button changes apply a CSS class to hide or show entire paths within the SVG group.

AI-generated description

Built with blockbuilder.org

This example is ameliorated from the book Create Web Charts with D3 's chapter 10, with my personal tastes.

That book's example focus on functional redraw.

mit Licensed

Similar vizzes

Loading thumbnail…

Chart Controls II

Three line charts compare monthly values for Europe, Asia, and America, with users selecting a region via radio buttons to highlight one series while the others remain visible. Dashed grid lines and labeled axes provide reference points, and the selected path updates in place through a transition animation rather than fading in and out. The visualization uses D3 v3 APIs including `d3.time.scale`, `d3.svg.line`, `d3.svg.axis`, and the `transition` method, with data loaded from a TSV file.

11Cr18Ni9

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

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

75% match

Loading thumbnail…

Chained Transitions

This example shows a line chart of daily temperatures for New York and San Francisco, with radio buttons to switch between the two cities. When a button is clicked, the line and its label first animate to the new data values, and then the y-axis rescales to fit the new range. Built with d3.v3, the SVG chart uses d3.time.scale, d3.scale.linear, d3.svg.line, and d3.svg.axis, and chains two d3 transitions to sequence the line movement and axis update.

Mmbostock

74% match

Loading thumbnail…

chartjs

This example demonstrates an interactive line chart built with Chart.js, where React state controls which data series are visible. Toggle buttons below the chart let users show or hide different colored categories, and the chart updates reactively through a custom `useChart` hook that instantiates new Chart instances on each render. The visualization renders to a canvas element, with a dataset containing labels, values, and color properties for filtering. The legend is enabled with red font, and the y-axis starts at zero.

Mmfakboo

74% match

Loading thumbnail…

multi line chart- d3

This multi-line chart visualizes changes in six continental populations—Africa, Asia, Europe, North America, Oceania, and South America—over time using data loaded from a remote CSV file via `d3.text`. The code renders six distinct colored lines using `d3.line` paths within an SVG, with each region assigned a unique stroke color. The chart uses `d3.scaleBand` for x-axis months and `d3.scaleLinear` for y-axis values, which is fixed between 1,000 and 3,600,000. Interactive circular markers, created with SVG `circle` elements, display tooltips on mouseover via `d3.select` and event listeners, showing the specific data values for each month. The visualization is built with React, utilizes D3.js version 7, and is rendered entirely as vector graphics.

Yyellahemalatha@gmail.com

74% match

Loading thumbnail…

D3 multi-series line chart with tooltips and legend

This interactive multi-series line chart displays four data columns over time, with a dropdown menu to switch between three value groups. Users hover over the lines to see tooltips with the series name, formatted value, and date, powered by the jQuery Tipsy plugin. The visualization uses D3.js v3 to render SVG elements, including axes and animated transitions when the selection changes, while a legend updates based on the current data subset. Data is loaded from a CSV file using `d3.csv`.

MMatthew-Weber

74% match

Loading thumbnail…

Untitled

This example shows a multi-series line chart with a dropdown menu to switch between different data groups, highlighting one series at a time. The code uses d3.csv to load a dataset from a GitHub repository, then creates an SVG chart with d3.scaleLinear for axes and a d3.scaleOrdinal color scale based on d3.schemeSet2. Selecting a new group triggers the update function, which animates a transition on the path’s d attribute over 1000ms, changing its stroke color accordingly. The visualization is built with d3.v4 and includes an HTML select element populated with group names.

CCrossZeigler

74% match