Skip to main content
SimilarExport ZIP
100%

The cost of a bad recrutment

✓ Published0🌍 Public
CCharlesGaydon
Last edited Dec 3, 2017
Created on Dec 1, 2017

This donut chart displays the financial breakdown of a failed recruitment process, with three cost categories and their values. Clicking the "randomize" button re-renders the visualization with the same data, demonstrating animated transitions. The chart uses `d3.layout.pie` for the arc geometry, `d3.svg.arc` for nested arcs, and `transition().attrTween()` to smoothly interpolate slice paths, label positions, and leader lines. Labels are positioned using arc centroids with text-anchor adjustments based on slice angle, while polyline connectors link slices to their labels. The code is adapted from a fork by dbuezas.

AI-generated description

This variation of a donut chart demonstrates how to add labels with lines. Clicking on the button changes the displayed data. Check Pie Chart with Labels and Missing Data to see how to handle transitions with missing/new data.

forked from <a href='http://bl.ocks.org/dbuezas/'>dbuezas</a>'s block: <a href='http://bl.ocks.org/dbuezas/9306799'>The cost of a bad recrutment</a>

mit Licensed

Similar vizzes

Loading thumbnail…

cost of bad recrutment 2

A donut chart illustrates the cost components of a bad recruitment decision, featuring three fixed values: travel expenses, salary paid, and benefits. The visualization uses D3.js v3 to render an SVG, with the arc, text labels, and connector polyline elements animating as users click the "randomize" button. The code relies on `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to smoothly interpolate between pie slices and their associated labels, while `d3.scale.ordinal` assigns colors to each category. The data is hardcoded in the script, demonstrated through a direct mapping of labels to monetary values.

CCharlesGaydon
93% match
Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

FFrissAnalytics
68% match
Loading thumbnail…

Pie Chart Labels with missing data

This donut chart demonstrates how to label slices with external text and leader lines, and it gracefully handles missing or new data when the button is clicked. The randomized data updates trigger smooth animated transitions using `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate between states. Labels and polylines reposition via `outerArc.centroid` and tweened transforms, with the duration controlled by a slider. The example uses D3 v3 to render SVG, and it merges old and new datasets to keep removed slices from disappearing abruptly.

KKacieW
68% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
67% match
Loading thumbnail…

Cost Analysis

The visualization compares one-year versus ten-year costs for two job roles, shown as a pair of side-by-side pie charts. It uses D3 v5’s `d3.pie` and `d3.arc` to generate the slices, with `d3.scaleOrdinal` assigning categorical colors. Data is loaded from two separate CSV files via `d3.csv`, and both charts are rendered as SVG inside a shared `<svg>` container. The title “one year cost vs ten years” and dollar-value labels make the quantitative comparison explicit.

LLex
66% match
Loading thumbnail…

Donut Charts - Attrition Level per Categories

A set of donut charts displays the number of attrited versus existing bank customers across five categorical variables: income level, education level, marital status, card category, and gender. A dropdown menu lets the user switch between these categories, and the charts animate smoothly when the selection changes. The visualization is rendered with SVG using D3.js, leveraging the pie and arc generators to create the donut segments. Each slice’s fill color encodes customer status, and tooltips reveal exact counts on hover. The data comes from a Bank Customers Dataset loaded as a CSV, and a custom summary function aggregates counts per group.

RRaul Gamez
66% match
Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica
65% match
Loading thumbnail…

Reusable Donut Chart in D3 v4

This reusable donut chart, built with D3 v4, displays the probability distribution of bacterial species in a sample. It renders an interactive SVG donut with labeled slices and connecting lines, and shows a tooltip in the center when hovering over a slice or species name. The chart is implemented as a reusable function using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with data loaded from a tab-separated values file. It features animated transitions and customizable parameters like corner radius and pad angle.

EEndNight95
65% match