Benjamin Ogorek

@baogorek·4 public vizzes

Bar chart with D3

A horizontal bar chart displays workout volume for muscle groups, with bars sized by sets per week and grid lines for readability. The chart uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate SVG elements from a CSV file loaded via `d3.csv`. Axis labels and a title are added via SVG text, while tick formatting uses `d3.format`. The code removes default axis lines and relies on CSS classes for styling, including steelblue bars and custom font sizes.

Mar 28, 2020

Loading thumbnail…

Collapsible List 2

This example demonstrates a collapsible list that expands and collapses nested tree data on click. It uses d3’s `select`, `selectAll`, `data`, `enter`, and `append` methods to bind an array of objects (with “Letter” and “Number” parent nodes) to HTML `li` elements inside a `ul`. Clicking a parent toggles its child items by adding or removing a nested `ul` via event handlers `expand` and `collapse`. The visualization relies on D3’s data join to manage the dynamic list structure.

Mar 21, 2020

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face with black-outlined features is drawn in an SVG canvas, centered by a D3.js transform. The face includes a circle head, two eyes, rectangular eyebrows, and a semicircular mouth created with `d3.arc`. The eyebrows animate vertically using chained D3 transitions, moving up and down over two seconds each way. The example demonstrates basic SVG drawing and animation with D3 v5, using direct DOM selection and attribute manipulation.

Mar 12, 2020

Loading thumbnail…

Untitled

This example shows a clickable hamburger menu icon that animates into an “X” shape. The HTML and CSS define three horizontal bars, while the JavaScript `classList.toggle` method applies a `.change` class that triggers CSS transforms—rotating the top and bottom bars and fading out the middle one. No external libraries are used; the interaction relies on native browser APIs and CSS transitions.

Mar 11, 2020