Kevin Bolger (@kgbolger), VizHub

Making a Barchart!

This example shows a horizontal bar chart displaying the `c1` values for three peril categories from a CSV file. The chart uses D3 v5 to load the data, create linear and band scales, and render SVG rectangles with axes. The code explicitly imports `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3, and it converts string values to numbers before rendering.

Feb 23, 2020

Loading thumbnail…

Making a smiley face!

A smiley face is rendered as a yellow circle with black outlines, featuring animated eyebrows that raise and lower via chained D3 transitions. The visualization constructs the face using SVG primitives: a circle for the head, circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrow groups translate vertically over two 2000-millisecond transitions, creating a continuous up-and-down motion. Data from char-data.csv defines peril values, though the current code does not use this file in the visible implementation.

Feb 22, 2020

Loading thumbnail…

Making a smiley face!

A smiley face is rendered as a yellow circle with black outlines, featuring animated eyebrows that raise and lower via chained D3 transitions. The visualization constructs the face using SVG primitives: a circle for the head, circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrow groups translate vertically over two 2000-millisecond transitions, creating a continuous up-and-down motion. Data from char-data.csv defines peril values, though the current code does not use this file in the visible implementation.

Feb 22, 2020