Skip to main content
SimilarExport ZIP
100%

dc.js checkbox

✓ Published0🌍 Public
KKatiRG
Last edited Dec 8, 2015
Created on Nov 30, 2015

This example uses dc.js row charts and bar charts with crossfilter to create interactive checkbox-style filters. The row chart renders two square bars labeled "A" and "B", which act as checkboxes for filtering the dataset by index type. A separate dc.barChart displays the count of records for each index (Idx 1, 2, and 3) from a CSV file containing Index and Year columns. Filtering is applied through crossfilter dimensions, and the bar chart updates its counts accordingly while the row chart's fixed-size bars use a value accessor to maintain their checkbox appearance.

AI-generated description

Fakes a pair of checkboxes using a dc rowChart and making the bars square.

Similar vizzes

Loading thumbnail…

dcjs resize

This example demonstrates responsive linked brushing and filtering between a row chart and a bar chart using the dc.js library. It shows how the charts resize automatically when the browser window is adjusted, with each chart updating its dimensions based on the available space. The visualization uses crossfilter to manage data from a CSV file containing index and year values. The code implements custom resize logic that iterates through the chart registry and re-renders each chart, utilizing dc.js chart APIs and D3.js for scaling and axis configuration.

KKatiRG
74% match
Loading thumbnail…

dc.js Experiment

This dc.js experiment uses a crossfilter to coordinate multiple linked charts—bar charts, a line chart, a row chart, and a pie chart—to explore a dataset of 2013 earthquakes from New Zealand's GeoNet service. The visualization includes a data table and a filter count, with all charts updating dynamically to reflect selections. The dimensions (magnitude, depth, time of day, day of week, and island location) are defined via `crossfilter` and used by `dc.barChart`, `dc.lineChart`, `dc.rowChart`, and `dc.pieChart`. Data loading and parsing rely on `d3.csv` and `d3.time.format`, while charts render as SVG elements.

Dd3noob
70% match
Loading thumbnail…

D3.js Graph with Checkbox (Dynamic)

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.

Ffofana1984
69% 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
67% match
Loading thumbnail…

dc.js Experiment

This experiment uses dc.js, built on d3.v3 and crossfilter, to display Leanpub book sales data from a CSV file. It shows interactive line charts for downloads, sales, and royalties per day, alongside row charts for the day of the week. The dc.js API (e.g., `dc.lineChart`, `dc.rowChart`) handles chart creation and linking, while crossfilter dimensions manage data grouping and reduction. Users can brush and filter across the charts, with a reset link to clear selections, illustrating linked brushing for multidimensional time-series exploration.

Dd3noob
67% match
Loading thumbnail…

Dimensional Charting

This example demonstrates interactive dimensional charting with a pie chart and a row chart, both linked through crossfilter to a small dataset of spending records. The pie chart displays spending totals per year, while the row chart shows spending per person. All charts update dynamically based on selections, as crossfilter dimensions and groups are configured to reduce sums. The code uses dc.js, crossfilter.js, and D3.js, loaded from external CDNs, to render the charts in separate divs on the page.

HHariprashanth75
67% match
Loading thumbnail…

Toggle test

This example demonstrates an interactive bar chart where colored squares can be toggled on and off by clicking on corresponding circles below the chart. The visualization uses D3's `select` and `.join` operations to efficiently update the SVG elements, with a `transition()` on rectangle attributes for smooth animations. The data is a static array of colored bars, and the toggle function adds or removes items from the selected dataset before re-rendering the chart. The rendering uses SVG with full viewport dimensions.

Bbjfmbeck
65% match
Loading thumbnail…

Boxplots V2

This example shows a set of boxplots for multiple numerical columns from a small dataset. Users can toggle checkboxes to include or exclude columns, and the chart updates with an animated transition. The visualization is built with React and D3 v5, using `d3.quantile` to compute quartiles, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG with a custom tooltip that displays summary statistics on hover. Data is hardcoded in the script.

SSchmittYannic
63% match