CodeXmonk

@CodeXmonk·3 public vizzes

Simple modification based on mbostock's Bullet Charts.

Two bullet charts display T-scores for Hungarian men and women’s height and weight, comparing raw sample values against population norms. The visualization uses blue background bands for population-standardized ranges (below average, average, above average) and gray measures for sample-derived standard deviations, with a black line marker indicating the sample mean and a vertical bar for the individual’s computed T-score. Built with D3 v3, the custom `d3.bulleT` function renders SVG rects and lines, handling both horizontal and rotated vertical orientations via inline transforms and scale calculations.

Nov 8, 2013

Loading thumbnail…

D3.chart.BulleT example

This example presents bullet charts built with D3 v3 and the d3.chart.js reusable chart framework, demonstrating a variant of Mike Bostock’s bullet chart. It shows multiple vertical and horizontal charts sharing the same dataset, with an additional "humble" chart that contains only a subject’s score—no sample statistics—highlighting how uncertainty or lack of background data affects interpretation. The visualization uses SVG and animated transitions (1-second duration), with buttons to randomize or reset the data. The design emphasizes the concept of “humble data”: when sample statistics are unknown, only raw scores can be compared to general population data. The implementation shows how to reuse a single chart definition across different orientations and datasets, following the reusable chart pattern. The code is structured with D3 v3 and d3.chart.js, and the example includes a single vertical chart with different data from the other charts.

Aug 27, 2013

Loading thumbnail…

D3.chart Likert (even-point) example

The example displays a four-point Likert scale survey visualization using d3.chart and d3.v3, presenting five survey items as horizontal stacked bars with colored segments for each response category. Each bar shows percentage distributions across four response options (e.g., “Strongly disagree” to “Agree”), with labels aligned to the left or right to suggest forced-choice responses. The chart uses SVG rendering with animated transitions when the “Randomize” button is clicked, which updates percentages via a normalization algorithm that scales four random values to total 100. The visualization builds on Mike Bostock’s bullet chart, with custom chart classes (`LikertEven`, `LikertEvens`) managing layers for backgrounds, grid lines, and bar segments. Axis labels and tick formatting show absolute values, while the final row demonstrates the scale’s semantics with dimension descriptions.

Aug 22, 2013