Skip to main content
Log in
A

Andres Bizzarri

@andresbiz93·6 public vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top ten most populous countries, with the x-axis formatted in billions and the y-axis stripped of its domain line and ticks for a cleaner look. The chart loads population data from a CSV file, multiplies the raw values by 1,000, and renders SVG bars using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The y-axis is customized by removing its domain and tick lines, while the x-axis tick labels use D3’s `format(".3s")` to abbreviate numbers and replace "G" with "B".

Jan 4, 2020
Loading thumbnail…

Let's Make a Face!

This visualization shows a simple, stylized face constructed from basic SVG shapes, including a yellow circle head, black circular eyes, red arc mouth, and rectangular eyebrows. A smooth, repeated animation moves the eyebrows upward and back down over two seconds, creating an expressive effect. Built using D3 v5, the code leverages SVG primitives and D3’s transition API to animate the eyebrow group’s transform property. The face is centered using a translated group, and the mouth is drawn with a d3.arc path generator.

Jan 3, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled using CSS, presenting circles, rectangles, lines, and a path within a single viewport. The code uses inline SVG elements with attributes like `fill`, `stroke`, and `stroke-width`, while a dedicated stylesheet defines class-based rules for the line and path elements, including `stroke-linejoin` and `stroke-linecap`. A nested `<g>` element applies a shared fill and stroke, and transforms such as `scale` and `translate` position the shapes. The rendering approach is purely SVG with CSS styling.

Jan 3, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

Shapes and Colors with SVG and CSS demonstrates basic vector graphics primitives and styling. Circles and rectangles appear with default black fills, then explicit inline fills like red and `#83cc2a`, and a grouped set with a light fill and black stroke. The example uses SVG elements `circle`, `rect`, `line`, and `path`, with CSS classes (`.lines`) controlling stroke properties on paths. A `transform` attribute scales the entire drawing while nested `translate` groups position elements. Styling combines presentation attributes, inline styles, and an external stylesheet.

Jan 3, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black features is rendered in SVG, and its eyebrows move up and down repeatedly. The example demonstrates fundamental D3.js DOM manipulation by selecting the `svg` element and appending groups, circles, and rectangles for the face, eyes, and eyebrows. A `path` built with `d3.arc` forms the mouth. Perpetual eyebrow motion is achieved using chained `transition().duration(2000)` calls that alternate the transform attribute. The face is centered via a translate transform on a group element.

Jan 3, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

Shapes and Colors with SVG and CSS demonstrates basic vector graphics primitives and styling. Circles and rectangles appear with default black fills, then explicit inline fills like red and `#83cc2a`, and a grouped set with a light fill and black stroke. The example uses SVG elements `circle`, `rect`, `line`, and `path`, with CSS classes (`.lines`) controlling stroke properties on paths. A `transform` attribute scales the entire drawing while nested `translate` groups position elements. Styling combines presentation attributes, inline styles, and an external stylesheet.

Dec 30, 2019