voiletymr

@voiletymr·3 public vizzes

Making a Bar Chart

This example presents a horizontal bar chart showing the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to map population values and country names to SVG rectangles. Data is loaded from a CSV file and processed by multiplying the population values by 1000. The chart renders entirely as SVG, with bars styled in steelblue, and the code illustrates a basic data-join and margin setup for reusable visualization.

Dec 5, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example displays a single red circle positioned within an SVG canvas. The visualization demonstrates the basic integration of SVG shapes with external CSS styling. The code uses the native SVG `<circle>` element within an HTML document, with dimensions set to 960 by 500 pixels. Styling is applied through a separate stylesheet that resets the body margin and overflow. No JavaScript libraries are employed; the example relies solely on static SVG markup and CSS for its rendering.

Dec 2, 2018

Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, including eyes, a mouth, and animated eyebrows. The code demonstrates basic DOM manipulation by selecting an SVG element and appending shapes like circles, rectangles, and an arc-based mouth path. D3 v5’s `transition()` method moves the eyebrows up and down over repeated two-second intervals. The face is centered using an SVG group with a translated transform, and all geometry is defined by explicit pixel constants.

Dec 2, 2018