KevinRourke

@KevinRourke·3 public vizzes

progressBarManager

A horizontal bar chart visualizes whether a current value is better, worse, or equal to a prior month, with the bar filling from the left for positive values and from the right for negative values, while a statement below the bar fades in with the verdict. The SVG is rendered with animated transitions using D3 and a custom responsive layout. The code uses d3.scale.linear, d3.dispatch for events, SVG transitions for opacity and positioning, and a custom `responsivefy` function to resize the chart. The bar’s fill color and direction depend on the sign of the parsed integer.

Mar 15, 2016

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for named items, with positive bars in steelblue and negative bars in brown. Using D3 v3 with SVG rendering, the visualization employs a linear scale for the x-axis to position bars and an ordinal scale with rangeRoundBands for the y-axis. Rects are positioned conditionally so that their x-coordinate and width correctly handle negative values, while a top-oriented axis and zero line clarify the scale. Data is loaded from a tab-separated file.

Dec 10, 2015

Loading thumbnail…

Open Chord Shared Ad Blocks

This chord diagram visualizes shared ad blocks among five soda brands—7-Up, A&W, Coke, Dr Pepper, and Pepsi—using a matrix of co-occurrence counts. Built with d3.layout.chord, it renders SVG arcs and ribbons with interactive mouseover fading, labels, and tooltips showing exact shared values. The code uses d3.v3, scales, and SVG paths with animated opacity transitions.

Dec 10, 2015