RaiyanRashid86

@RaiyanRashid86·2 public vizzes

Customizing Axes

This example shows a horizontal bar chart of the top 10 countries by population as of 2022, using data from Worldometer. The chart uses D3 v7 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom tick formatting via `format('.3s')` to display numbers in billions. Both `axisBottom` and `axisLeft` are customized by removing domain lines and tick marks for a cleaner visual, with all bars rendered as styled SVG rectangles.

Jan 6, 2022

Loading thumbnail…

Making a Bar Chart

This example shows the top 10 countries by population in 2022 using a horizontal bar chart, with countries on the y-axis and population counts on the x-axis. The code uses d3.csv to load data from a local CSV file, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes. It loads a dataset from Worldometer, parses population values as numbers, and appends SVG rectangles styled with steelblue fills to visualize the bars within a predefined margin layout.

Jan 6, 2022