tp_d3v2

100%

✓ Published0🌍 Public

Last edited Nov 10, 2017

Created on Nov 7, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GTHamonville/'>GTHamonville</a>'s block: <a href='http://bl.ocks.org/GTHamonville/dca437b638a502e5efda7a8370c8189f'>tp_d3</a>

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

D3 aggregation tutorial

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`.

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

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

74% match

Loading thumbnail…

Fork of Gantt2 (overlapping titles)

This example visualizes a Gantt chart with horizontal bars representing task durations, colored green or red by status, and includes overlapping time labels for tasks sharing the same start time. It uses D3 v7 to load CSV data, scaleTime for the x-axis, scaleBand for task categories, and SVG rendering with axisLeft and axisBottom. The code filters out labels that collide horizontally, and adds a tooltip on mouseover showing task details.

RRoman Polulekh

73% match

Loading thumbnail…

Stacked bar chart v4 - TP3

This example shows a stacked bar chart with five series of ten random values each, rendered as vertically stacked color-coded bar segments. The chart uses D3 v4 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.stack` to map data to positions and heights, with SVG rectangles for each segment. The bars are colored via an ordinal palette, and the x-axis is a band scale with a small padding, while the y-axis domain is set to the sample count.

AAlxClt

73% match

Loading thumbnail…

Bar chart TT

This example displays a vertical bar chart of yearly values from a CSV file, using D3 v4 (loaded via both a CDN link and the `d3.v4.js` script). The visualization uses SVG rendering with the `d3.select` and `d3.scaleBand`/`d3.scaleLinear` APIs to map years and values to bar positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. The bars are drawn as `rect` elements, styled with a class from the provided CSS.

Hhanulik.ondrej@gmail.com

73% match

Loading thumbnail…

TP3

This example shows a stacked bar chart of average monthly stock prices for four companies over eleven years, with a click interaction that toggles between stacked and grouped modes. The bars animate smoothly between the two layouts using chained `transition` calls. It uses D3 v4’s `d3.nest()` to aggregate the CSV data, `d3.stack()` for stacking, and `d3.scaleBand`/`d3.scaleLinear` for positioning. The SVG rectangles transition their `x`, `y`, `width`, and `height` attributes over time.

AAlxClt

73% match