Sander Rebane

@RebaneS·3 public vizzes

Fork of Simple Bar Chart

This bar chart displays the top 10 most populous countries as of January 1, 2024, using data from the `@curran/un-population-estimates-2024` dataset. It filters for entries of type "Country/Area", sorts by the total population column in descending order, and selects the first ten. The visualization uses D3.js functions like `scaleBand` for the categorical x-axis, `scaleLinear` for the population y-axis, and custom axis label helpers. The code also demonstrates the `.join()` pattern for declarative SVG element creation, and includes a grey inner rectangle to visually frame the plotting area.

Mar 25, 2024

Loading thumbnail…

Fork of Making a Bar Chart

This example visualizes the top 10 most populous countries in 2018, using horizontal bars to compare population estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, removing unnecessary lines and formatting tick labels. The chart is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisBottom` and `axisLeft` to render the axes. Population values are loaded from a CSV file and multiplied by 1,000. The final visualization is rendered as inline SVG, with styled bars and a title.

Mar 3, 2024

Loading thumbnail…

SVG Fundamentals

This example shows a minimal SVG canvas with a fixed 960 by 500 dimensions, currently rendering only a blank white space. The page uses plain HTML, CSS, and JavaScript, with the SVG element defined directly in the markup. The JavaScript console demonstrates basic language features, including variable declarations, arithmetic, an object literal, a for loop, and an arrow function for addition. No data visualization or graphical output is present; the focus is on foundational syntax and SVG setup.

Feb 17, 2024