D3 aggregation tutorial

100%

D3 aggregation tutorial

✓ Published0🌍 Public

Last edited Oct 31, 2017

Created on Oct 31, 2017

This example demonstrates how to aggregate and visualize task data by priority using D3.js. The bar chart shows the total time spent on tasks for each priority category, with bars colored via a categorical color scale. The code loads CSV data, groups records using `d3.nest()` with a `rollup` function that computes both task count and summed time, and renders the resulting bars as SVG rects. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales include `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/as-eldlc/'>as-eldlc</a>'s block: <a href='http://bl.ocks.org/as-eldlc/beb149d6d5c4747eccdbc84106417e77'>D3 aggregation tutorial</a>

mit Licensed

Similar vizzes

Loading thumbnail…

tp_d3v2

A stacked bar chart displays task IDs along the x-axis and cumulative time on the y-axis, with bars colored by priority using `d3.scaleOrdinal` and `d3.schemeCategory10`. Each bar’s height reflects the sum of task times up to that point, sorted by time. The visualization is built with D3 v4, rendering SVG via `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` to load the provided CSV dataset.

GGTHamonville

81% match

Loading thumbnail…

D3 treemap tutorial

This example demonstrates a D3 treemap that visualizes task data from a CSV file, aggregated by priority (e.g., WISH, COULD) and then by status (DONE, TODO). Each leaf rectangle’s size encodes the total time spent on tasks in that group, while its color indicates the priority category, with a legend for reference. The visualization uses `d3.nest()` for hierarchical aggregation, `d3.hierarchy()` to build the tree, and `d3.treemap()` to compute tile layouts. Rendering is done with SVG, showing rectangles, text labels, and hover titles.

JJdlv00

81% match

Loading thumbnail…

D3 treemap tutorial

This treemap visualization shows the distribution of task time across different priorities and statuses. It uses D3 v4 with an SVG rendering approach, loading CSV data and aggregating it by two keys (priority and status) using the `d3.nest` and `d3.rollup` functions. The treemap layout is generated with `d3.treemap`, and each rectangle is colored according to its parent priority, displaying a legend below.

GGTHamonville

80% match

Loading thumbnail…

tp_d3

This visualization displays task data as a bar chart, with each bar representing a task and its height corresponding to the task’s time value. The bars are sorted in ascending order of time, and a computed cumulative time is logged to the console but not rendered. The chart uses D3 v4 to load a CSV file with `d3.csv`, scale data with `d3.scaleBand` and `d3.scaleLinear`, and render SVG rectangles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

GGTHamonville

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

72% match

Loading thumbnail…

D3 DataBinding

This example demonstrates a simple bar chart that binds JSON data to SVG elements, showing municipal census values as horizontally sorted bars. The visualization uses D3.js v5 to load data from a GitHub-hosted JSON file and renders two separate SVG containers, though only the first is populated. The code employs D3’s data join pattern with `selectAll`, `data`, and `enter` to append rectangles for bars and text labels for municipality names. A linear scale maps the data domain to pixel widths, while bar heights are fixed and y-positions are computed by index. The chart sorts data in descending order by census value before rendering.

663anp3ca

71% match

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal

71% match

Loading thumbnail…

D3 Layouts - Stacked bar chart

This example shows a stacked bar chart built with D3.js, using the `d3.stack` API to arrange three categories—apples, oranges, and grapes—into cumulative segments for five data groups. The visualization renders directly to an SVG element, with each stacked segment colored via `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. A band scale positions the bars horizontally, while a linear scale maps the cumulative totals to the chart’s height, with the stacking order sorted descending. The input dataset is a hardcoded array of objects.

KKaustav Sen

71% match