sammytheindi

@sammytheindi·3 public vizzes

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart demonstrates customizing D3 axes, including removing axis domains and tick lines, formatting tick labels with `format`, and repositioning axis labels. Built with d3.v5 and rendered as SVG, it uses `scaleLinear` for the population axis and `scaleBand` for the country axis, with data loaded via `csv` from a local file.

Dec 11, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how to build SVG shapes and style them with CSS, using D3.js to select and manipulate the SVG container. The page renders a blank 960 by 500 pixel SVG element and applies black stroke styling to line groups, with rounded path strokes in a teal color. The code imports `select` from d3 v5 and uses CSS classes to control line thickness, stroke color, and line join/cap styles. The minimal setup demonstrates the interplay between D3 selections and external stylesheets for visual presentation.

Dec 11, 2019

Loading thumbnail…

Let's make a face with D3.js!

A D3.js visualization assembles a smiley face from SVG shapes, including a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth. The code demonstrates fundamental DOM manipulation by building each facial feature through chained `attr` and `append` calls. Using `d3.select`, `d3.transition`, and the `d3.arc` path generator, the eyebrows animate over four seconds, alternately shifting downward and returning, while the static features remain unchanged. The SVG canvas is 960 by 500 pixels.

Dec 11, 2019