ngannie

@ngannie·3 public vizzes

Bar Chart

This bar chart displays population estimates for the ten most populous countries, using horizontal bars ordered alphabetically by country name. The visualization loads data from a CSV file and renders it as SVG rectangles. It employs D3 v4’s `scaleLinear` for the population axis, `scaleBand` for categorical country positioning, and `axisLeft`/`axisBottom` to generate the chart’s axes. Population values are parsed and multiplied by 1,000 to reflect actual counts from the source data.

Jul 16, 2023

Loading thumbnail…

Face with D3

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping transition. The example uses D3 v4 selections to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth. All elements are centered within an SVG using a group transform, and the eyebrow motion is driven by chained `transition.attr()` calls on the group’s transform attribute.

Jul 16, 2023

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report listing three used vehicles with prices, alongside a hand-coded SVG visualization. The SVG displays colored circles and rectangles, including a translated group with blue shapes, and a line path with rounded joins. The code demonstrates basic D3 version 6 usage indirectly through the embedded tutorial video, while the SVG rendering uses core APIs like `transform`, `scale`, and `translate`. Styling is handled via CSS classes such as `.highlighted` and `.lines`, which apply red text and black stroke properties respectively.

Jul 10, 2023