Skip to main content
SimilarExport ZIP
100%

dc.js - Row Chart Example

✓ Published0🌍 Public
MMrSteve2
Last edited Aug 27, 2017
Created on Aug 27, 2017

This example demonstrates a dc.js row chart that visualizes experimental data loaded from a CSV file. The chart displays horizontal bars representing each experimental run, with bar lengths determined by a reduceSum of the Speed and Run values divided by 1000. Using crossfilter for data manipulation, the code creates a dimension on the Run field and applies the reduction to the Speed values. The chart uses d3.scale.linear with an elastic x-axis that adjusts to the data domain, rendering within a 768 by 480 pixel container.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
75% 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
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
72% match
Loading thumbnail…

Simple Template Example

This example demonstrates an interactive bar chart built with D3.js that visualizes CSV data. The chart is rendered as an SVG and includes three buttons—"Prices," "Transmission Limits," and "List"—that allow users to load different datasets (prices, transmission, or list data) and redraw the bars. The visualization highlights D3's data join pattern: entering rectangles are added in dark red, updates are colored green, and exiting elements are removed, illustrating the enter-update-exit selection model. The bar heights are scaled linearly to the maximum value in the dataset, and the chart is displayed within a bordered SVG container. The example serves as a teaching tool for D3 selections, scales, and basic bar chart construction.

CCBasis
70% match
Loading thumbnail…

Bar Chart

This bar chart example demonstrates how to load and display CSV data using React and D3 v7. The visualization shows summary statistics about the dataset, including file size in kilobytes, row count, and column count, rendered as text output. The code uses D3’s `csv` function to fetch data from a remote GitHub gist containing CSS named colors, and React’s `useState` and `useEffect` hooks manage the asynchronous data loading and state updates.

Rrammy81
69% match
Loading thumbnail…

1: Rendering Data With React

This example uses React to render a horizontal stacked bar chart from a CSV file of CSS named colors. The app fetches the data with d3.csv, displays a brief loading message, then maps each row to a colored div based on the RGB hex value. The chart uses fixed dimensions of 960 pixels wide by 5 pixels tall per color row, creating a striped spectrum. React’s useState and useEffect manage the asynchronous data loading and rendering state.

HHumanistic Quality Management
69% match
Loading thumbnail…

Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse an external CSV file using D3.js, rendering the resulting data as an interactive bar chart. The visualization uses `d3.csv()` to fetch the dataset and `d3.rollup()` to aggregate values by category. Each bar is drawn as an SVG rect, with its height and position calculated using D3's linear scale for the y-axis and band scale for the x-axis. The chart includes axes with tick labels, and a hover effect highlights individual bars while displaying the corresponding data value in a tooltip. The design uses a clean white background with colored bars, making the data easy to compare at a glance. This example demonstrates D3's data loading, parsing, and binding workflow.

AArun
69% match
Loading thumbnail…

Bar Chart Example with CSV Dataset

This example shows a bar chart comparing dog breed data loaded from a remote CSV file. The chart uses D3.js v6 within an HTML page to render SVG bars scaled by value, with x and y axes positioned using margins. It creates a linear y-scale and a band x-scale, then appends rectangles for each data row. The data is fetched via `d3.csv`, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Aachyutanandmishra17@gmail.com
69% match