Daniel Korosi

@danielkorosi·2 public vizzes

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, with country names on the y-axis and population values on the x-axis. The code customizes D3 v5 axes by removing domain lines, hiding tick lines on the y-axis, and formatting x-axis ticks to abbreviate numbers with a custom formatter that replaces “G” with “B.” It uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from D3, rendering to SVG.

Jan 30, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and paths. The code uses inline SVG elements within an HTML page, with a separate stylesheet applying stroke properties to line and path elements. Circle and rect elements are colored individually or grouped via the `fill` and `stroke` attributes, while a `transform` scales the entire graphic. The rendering is purely SVG-based, requiring no JavaScript libraries.

Jan 28, 2020