D3.js Graph with Checkbox (Dynamic)

100%

D3.js Graph with Checkbox (Dynamic)

✓ Published0🌍 Public

Ffofana1984

Last edited May 24, 2023

Created on May 24, 2023

This example shows a dynamic multi-line chart where each line corresponds to a data column, toggled on and off via checkboxes. Using D3.js v6, it renders SVG paths for three series (`rt1`, `rt2`, `rt3`) against a linear mass scale, with a color scale based on `d3.schemeCategory10`. The checkboxes are generated from the data keys, and the `on("change")` handler updates line visibility by toggling the `display` attribute. The data is hardcoded in the script.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Test

This example demonstrates a reusable D3 checkbox component that can be configured with custom sizes, positions, colors, and checked states. Three checkboxes are rendered on an SVG canvas, and clicking them updates a text label to display their boolean statuses. The implementation defines a `d3CheckBox` factory function that builds interactive SVG elements with rectangular boxes and path-based check marks, using D3 version 3’s `d3.svg.line()` for the mark geometry. A click event toggles opacity and triggers a callback showing how the component supports custom interaction logic.

PPhilip Rago

74% match

Loading thumbnail…

svg & d3 - example

This example demonstrates a simple bar chart built with D3.js v4, using an SVG-based rendering approach. It displays a small dataset of four numeric values as horizontal bars, with a separate checklist interface above the chart that lists the same data points as labeled checkboxes. The visualization pairs categorical data with an interactive checklist, though the chart itself is static and does not respond to checkbox state. The code uses D3 selections and data binding (`d3.select`, `selectAll`, `data`, `enter`, `append`) to create both the label inputs and the bar elements, while CSS styles define the bar colors and text alignment. The chart is rendered as a series of `div` elements within a container, with widths proportional to the data values.

BBharath4259

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

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

73% match

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar

72% match

Loading thumbnail…

Chart Controls I

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.

11Cr18Ni9

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

72% match

Loading thumbnail…

D3 Selections

This example demonstrates a dynamic line chart created with D3, where 15 points oscillate vertically over time based on a sine function. The visualization uses D3's `select` and `range` APIs to build an SVG canvas and animate both circles and a connected path. Using D3's `.join()` method, the code efficiently updates element attributes on each frame, with a `setInterval` timer driving the animation at 20ms intervals. The implementation uses the React framework and renders purely through SVG elements, with the data generated procedurally from a mathematical function rather than external sources.

Ddanperkins

72% match