alvasilvao

@alvasilvao·4 public vizzes

Fork of Making a Bar Chart

This bar chart visualizes the population of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v5’s `scaleLinear` for the x-axis population scale and `scaleBand` for the categorical y-axis, with the population values converted from thousands to absolute numbers before rendering as SVG rectangles. Customized `axisBottom` and `axisLeft` axes remove default domain lines, add grid lines, and label the population axis with a custom tick format that abbreviates large numbers (e.g., replacing "G" with "B").

Feb 19, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face is drawn with two eyes and a curved mouth, and its eyebrows animate by moving upward and then back down in a loop. The example demonstrates fundamental D3.js v5 DOM manipulation using SVG elements like `circle`, `rect`, and `path`. The code uses `select` and `arc` from D3, and the animation is driven by chained `transition().duration(2000)` calls that alter the `transform` attribute on the eyebrow group.

Feb 19, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example displays a set of geometric shapes—circles and rectangles—arranged in a grid, with a separate group of lines and a polyline path drawn below. It demonstrates basic SVG styling and grouping using inline attributes, CSS classes, and the `<g>` element. The rendering relies on raw SVG markup within an HTML file, with CSS controlling margins, overflow, and stroke properties for the line group. SVG transform functions handle scaling and translation, while the `fill`, `stroke`, and `stroke-width` attributes define visual appearance.

Feb 19, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js setup in which a linear scale maps input domain values from 0 to 10 to output pixel ranges from 0 to 600, producing a single scale object. The code uses `d3.scaleLinear` and invokes the scale with a value of 0, though no visual output is rendered beyond an empty SVG element containing a translated group. The page loads d3 v7 from a CDN and renders via SVG, with the body styled at a very large font size for emphasis.

Feb 18, 2022