zilvus

@zilvus·4 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customized D3 v5 axes and a linear scale for population values, with a band scale for country names. The code imports specific APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and formats tick labels using `format('.3s')`. Data is loaded from a CSV file and rendered as SVG rectangles with a steelblue fill.

Feb 18, 2020

Loading thumbnail…

Let's Make a Face Part II

A partially completed smiley face is drawn as a static SVG graphic on a yellow circle with black stroke. The face includes two dark eye circles at fixed coordinates, while the mouth is absent, reflecting the “half way” state described in the readme. The implementation uses raw SVG elements—`circle` shapes with specified `cx`, `cy`, and `r` attributes—inside an inline `<svg>` tag with a 960 by 500 viewport. No JavaScript libraries or data sources are involved; the rendering is purely declarative SVG markup.

Feb 16, 2020

Loading thumbnail…

Let's Make a Face Part I

The visualization shows a basic face constructed from three SVG circles: a large yellow circle with a black stroke representing the head, and two smaller black circles representing eyes. The face is incomplete, with the title indicating this is the first step toward a smiley face. The code uses raw SVG elements inside an index.html file, with fixed coordinates in a 960x500 viewport. The rendering is static, relying on SVG's native circle shapes without any JavaScript libraries or data sources.

Feb 15, 2020

Loading thumbnail…

Smile Face Pt 1

This example renders a static smiley face using only Scalable Vector Graphics (SVG) primitives. It consists of a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, all laid out on a 960 by 500 pixel canvas. The code defines the shapes declaratively via SVG's `circle` elements and their `cx`, `cy`, and `r` attributes, with colors and stroke widths set through inline presentation attributes. Rendering is handled directly by the browser's SVG engine, and the example's only interaction with React is a console log of the library itself.

Feb 15, 2020