dc.js Experiment

100%

dc.js Experiment

✓ Published0🌍 Public

Last edited Sep 16, 2013

Created on Sep 16, 2013

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.

AI-generated description

Crossfilter via dc.js

This visualization is intended as a demonstrator for describing the use of crossfilter via dc.js.

It includes a subset of the types of graphs possible with dc.js, and is intended to be used in conjunction with a fuller description on d3noob.org and in D3 Tips and Tricks.

The data is from a series of Earthquakes in New Zealand in 2013. and the raw data is available via Geonet.

Similar vizzes

Loading thumbnail…

dc.js Experiment

This dc.js experiment visualizes earthquake data from New Zealand’s Geonet service, displaying events by magnitude and depth as bar charts, a line chart of events per hour, and a sortable data table. Built with crossfilter for multidimensional filtering, dc.js coordinates the charts, while D3.js handles SVG rendering and animated transitions. The dashboard loads a CSV file containing earthquake records and supports interactive filtering across all visualizations simultaneously.

Dd3noob

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

79% match

Loading thumbnail…

LineChart Test

This visualization presents earthquake data as a bubble chart plotting longitude and latitude, with bubble size encoding earthquake magnitude and color representing the continent. It includes interactive filtering by continent through the legend, which also shows size ranges. Built with D3 v7, the code uses `d3.select`, `d3.scaleOrdinal`, and `d3.scaleLinear` to render circles in an SVG, with a custom CSV parser for the earthquake dataset. Hovering over bubbles reveals tooltips showing magnitude and continent details.

DDuc Pham

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

73% match

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

71% match

Loading thumbnail…

A5 - Multidimensional Visualization

This example presents three interactive charts for multidimensional data exploration: a bubble chart, a line chart, and a scatterplot matrix. The bubble chart visualizes earthquake data with tooltips on hover and supports filtering by region via a color legend built with d3-legend. The line chart displays three series with hover tooltips on individual points. The scatterplot matrix uses d3 to show pairwise relationships across multiple dimensions. All visualizations leverage React and D3 for rendering and interactivity.

DDuc Pham

71% match

Loading thumbnail…

Fork of Fork of Interactive Visualization (Brush) - Earthquake Data

This interactive dashboard combines a bar chart, a world map, and a scatter plot to explore earthquake data from 2000 to 2021. The bar chart shows the mean yearly earthquake magnitude, while the world map, built with `d3.geoPath` and a Mercator projection, plots earthquake epicenters with circle radii scaled by Richter magnitude. A linked scatter plot uses `d3.select` to display year against magnitude, with point size representing deaths. The map also includes tooltips on hover, and the data for the bar chart is loaded from a CSV file.

Sspace-captain96

71% match

Loading thumbnail…

New Zealand Earthquakes

This interactive scatterplot visualizes the pattern of earthquakes in New Zealand from July 2010 to August 2012, plotting each event by its week and time of day, with point size reflecting magnitude. The visualization uses D3.js version 3.5.17 to render SVG circles with tooltips, axes, and grid lines. Data is loaded from a CSV file containing dates, times, and magnitudes, and the code employs `d3.time.format` for parsing and formatting temporal values, alongside `d3.svg.axis` for the coordinate scales.

Dd3noob

71% match