Chromosin13

@Chromosin13·4 public vizzes

Let's make a bar chart!

A horizontal bar chart displays population figures for ten countries, using bar length to represent population in thousands. Built with D3 v5, the visualization loads CSV data via `d3.csv` and applies `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis spacing. SVG rectangles are appended and positioned through D3 data joins, with margins calculated from the SVG's width and height attributes. The code demonstrates fundamental scale and selection patterns for basic bar chart construction.

Nov 5, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates a grey-background SVG face using D3.js v5, with the `select` API targeting the page’s `<svg>` element. It renders a simple face composition using SVG paths, with purple-styled lines defined in CSS classes and rounded stroke joins and caps applied via the `.lines path` rule. The code imports `select` from the D3 library, constructs the drawing in an `index.js` file, and styles everything through an external stylesheet. The result is a static, vector-based face illustration built entirely with SVG elements and D3’s selection methods, without interactivity or data binding.

Oct 27, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates how to construct an animated face using SVG elements and D3.js v5. The visualization builds a face from basic geometric shapes, applying custom styling through CSS classes that define stroke colors and line properties. The code initializes an SVG canvas with fixed dimensions and relies on D3’s selection and data-binding methods to render the face components. The design emphasizes round line joins and caps for a smooth, illustrated appearance, with a compact layout that avoids page scrolling.

Oct 27, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js and animates its eyebrows upward in a repeating two-second cycle. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition` calls to move the eyebrow group’s `transform` attribute. Circles form the eyes and a yellow circle with a black stroke forms the head, all rendered in SVG. The animation demonstrates basic DOM manipulation and timed transitions with D3 v5.

Oct 27, 2021