cost of bad recrutment 2

100%

cost of bad recrutment 2

✓ Published0🌍 Public

Last edited Dec 14, 2017

Created on Dec 14, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

The cost of a bad recrutment

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.

CCharlesGaydon

93% 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…

Cost Analysis

Two side-by-side pie charts compare one-year versus ten-year cost breakdowns for categories including Blue-light and Security Guard, using data loaded from CSV files. The D3 v5 code builds an SVG visualization with a title, and the charts are rendered using `d3.pie` and `d3.arc` with labels generated via `arcLabel.centroid`. A color scale from `d3.scaleOrdinal` and `d3.schemeAccent` distinguishes categories, while text elements display names and dollar values on each slice.

Zzhu

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

64% match

Loading thumbnail…

Donuts

Three nested donut charts show spending by department—Accounting, Sales, and Consulting—with each ring divided into salary, equipment, travel, and extra costs. The example uses the ProtoVis API within an HTML page, calling `pv.Scale.linear` for angular scales and a `pv.Panel` with `pv.Wedge` marks, sized by inner and outer radii. Labels are centered via an anchored `pv.Label`. Data comes from an inline JavaScript array with static numeric values.

Mmbostock

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

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

63% match

Loading thumbnail…

Fork of Fork of piechart ic7

This visualization displays the cost of different master’s degree majors as a pie chart, with each slice representing a course’s total cost. A legend on the right pairs each colored slice with the course name and its cost in thousands. The chart uses D3 v5’s `pie` and `arc` generators to compute angles and render SVG paths, with `scaleOrdinal` assigning colors to slices. Data is loaded asynchronously from a CSV file via `d3.csv`, and the legend values are formatted using `d3.format`.

Rradhadevarapu

63% match