Skip to main content
SimilarExport ZIP
100%

tp_d3

✓ Published0🌍 Public
GGTHamonville
Last edited Oct 31, 2017
Created on Oct 31, 2017

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

AI-generated description

Built with blockbuilder.org

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

TP3_DataViz

This visualization displays a line chart of stock prices over time, with data loaded from an external CSV file. The chart uses an SVG-based D3.js v3 layout, employing a time-scaled x-axis and a linear y-axis to map date and price values. The line itself is drawn using `d3.svg.line`, while axes are generated with `d3.svg.axis` (implied by `d3.axisBottom` and `d3.axisLeft`). Although the code references an area path and dataset.json, the visible rendering is a simple black line, suggesting a minimal line chart focused on temporal price trends.

BBarbierJeremy
75% match
Loading thumbnail…

Gantt Chart

This Gantt chart visualizes project tasks, including development, coding, promotion, and celebration phases, as horizontal bars positioned along a linear time scale. The chart uses D3 v5 to parse dates with `d3.timeParse`, scale time with `d3.scaleTime`, and render colored rectangles within an SVG container. Task categories are distinguished by a gradient color scale using `d3.scaleLinear` with HCL interpolation. Hovering over a task reveals a tooltip with its name and duration details, while the grid and labels are also generated with D3.

JJoker-tr
75% 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
74% match
Loading thumbnail…

Gantt2

This visualization displays a Gantt chart tracking the timing and status of recurring software tasks, such as "Reload License Monitor" and "Reload Operations Monitor," over a single day. Each horizontal bar represents a task execution, colored green for successful completions and red for failures, with a tooltip on hover revealing task details. Using D3 v7, the code builds the chart with `scaleTime` for the time axis, `scaleBand` for task categories, and `axisLeft`/`axisBottom` for gridlines. Data comes from a static JavaScript array, rendered as SVG rectangles with text labels.

RRoman Polulekh
74% match
Loading thumbnail…

Worktime

This stacked bar chart visualizes worktime patterns by day, using a CSV file of start and end timestamps. Each bar represents a day, and segments within the bar show the duration of activities (e.g., “slq,” “edm”) between 7:30 AM and 7:30 PM. The chart uses D3 v4 with SVG, employing d3-dsv to parse data, d3-scale for positioning and color encoding, d3-axis for the time-based y-axis, and d3-shape for stacking. Hovering over a segment highlights it and displays a tooltip.

BBrunoDumas
73% 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
73% match