nvelden

@nvelden·5 public vizzes

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It shows how D3 v5’s `scaleLinear` and `scaleBand` map population values to bar widths and country names to vertical positions, respectively. The chart renders as SVG rectangles with a steelblue fill, and axis customization is demonstrated through the use of `d3.axisBottom` and `d3.axisLeft`. Population data, stored in a CSV and loaded via `d3.csv`, is multiplied by 1000 for accuracy.

Apr 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

The smiley face drawing uses D3.js v5 to build and animate SVG elements, with eyebrows and a small circle that move in looping transitions. The code constructs a yellow head, eyes, eyebrows, and a mouth via `append()` and `attr()`, using `arc()` for the mouth path and `transition()` sequences with `.duration()` and `.on("end")` callbacks to repeat animations. The animation alternates the eyebrow group’s `transform` translation between two positions and rotates the circle’s `transform`, demonstrating fundamental DOM manipulation and timed attribute tweening in a simple, playful scene.

Apr 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds an animated bar chart from a CSV of country populations using D3.js v5. It loads the data with `d3.csv`, maps each population value to a linear scale, and renders the bars as SVG rectangles positioned by a band scale. The chart displays the ten most populous countries with bar widths proportional to their populations, showing how straightforward D3’s data-join and scaling APIs are for creating visualizations.

Apr 10, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with basic SVG shapes in D3.js, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows animate vertically in a looping transition using `transition()` and `attr()` to move a rectangle group, demonstrating fundamental DOM manipulation with `d3.select` and `d3.arc`. The code uses D3 v5 and renders entirely in SVG, with the face centered using SVG transform attributes.

Apr 9, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes styled with CSS, including circles, rectangles, and a line, arranged in a static composition. The SVG markup defines elements with explicit coordinates and fill colors, while a separate stylesheet controls global layout and stroke properties. The code uses native SVG elements such as `<circle>`, `<rect>`, `<line>`, and the `<g>` grouping element with a `transform` attribute. No JavaScript libraries appear; the visualization relies solely on SVG and CSS for rendering. A line serves as a shared axis, with shapes positioned above and below it.

Apr 8, 2020