Cornelia

@evolveris·3 public vizzes

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values in thousands. The visualization demonstrates custom axis styling in D3 v5, including tick formatting that abbreviates large numbers with suffixes like "B" for billions, rotated tick labels, and removed axis domain lines. The chart uses `scaleLinear` for the population axis and `scaleBand` for countries, with `axisBottom` and `axisLeft` for the axes. The code also adds custom titles and axis labels, while styling ticks, lines, and text through CSS.

Jan 19, 2020

Loading thumbnail…

Let's make a face

A smiling face rendered in SVG uses D3's `select` and `arc` APIs to compose a yellow circle head, two black eye circles, and a mouth path formed by a donut-like arc with an inner radius of 150 and an outer radius of 170. The eyes are positioned symmetrically around the center, offset by 100 pixels horizontally and 70 pixels vertically. All elements are drawn directly via D3 selections, with the head and mouth grouped inside a translated `<g>` element, while the eyes are appended to the root SVG.

Jan 19, 2020

Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shape rendering with static, hand-coded data. It shows circles, rectangles, lines, and paths drawn directly in an HTML document, with a black stroke and distinct fill colors like aqua and orange. The visualization uses the SVG API within a simple `index.html` file, applying a scale transformation and a translation to position the elements. No JavaScript libraries are required, as the rendering is purely declarative markup with CSS styling for the overall page layout.

Jan 18, 2020