CharlesGaydon

@CharlesGaydon·5 public vizzes

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.

Dec 14, 2017

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.

Dec 3, 2017

Loading thumbnail…

A map of Influenza in France

A choropleth map of metropolitan France displays regional influenza case counts across 52 weeks in 2014. A slider selects a week, and the map updates color fills using `d3.scaleQuantize` with `d3.geoPath` and a conic conformal projection. Hovering a region shows a tooltip with its name and weekly count. The code loads CSV data and merges it with GeoJSON regions, summing weekly values per region.

Nov 30, 2017

Loading thumbnail…

Multiple lines

This visualization displays the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as multiple colored lines on a single chart. The chart uses a time-scaled x-axis and a linear y-axis for price, with each company’s line labeled directly. Built with D3 v4, the code loads data from a CSV, nests it by stock symbol, and renders using SVG paths. It also includes commented-out attempts at streamgraphs and area charts.

Nov 29, 2017

Loading thumbnail…

TP 2.1 Interactive Line Chart

An interactive line chart displays twelve monthly data points from January to December 2016, encoded as a black path with gray circles. Hovering over a circle highlights it in red, reveals its numeric value label, and shows a dashed vertical guide line to the x-axis. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with SVG elements. Data is loaded from an external JSON file, and all labels and grid lines are rendered as SVG text and line elements with mouse event handlers.

Nov 9, 2017