Skip to main content
Log in
A

alesrinija

@alesrinija·3 public vizzes

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays crop areas for six crop types, with each bar’s length proportional to its area value. The visualization uses D3 v5’s `csv` loader to read data, `scaleLinear` and `scaleBand` for positioning, and custom `axisBottom` and `axisLeft` axes. The code removes default axis domains, formats tick labels with `format('.3s')`, and colors bars steelblue via CSS.

Aug 1, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the area cultivated by various crops, using a horizontal layout to emphasize differences in land usage. The chart is rendered with D3 v5 and SVG, scaling the bar widths linearly and positioning categories with a band scale. It reads data from a local CSV file and customizes the axes by removing domain lines and tick lines, while applying custom tick formatting. The visualization also includes axis labels and a title, demonstrating how to refine D3's built-in axis components for a cleaner presentation.

Aug 1, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates, with custom styling applied to the axes. The code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` and `d3.axisLeft` to render axes. It customizes the x-axis tick format with `d3.format`, removing gridlines and domain lines, and adds axis labels and a title via SVG text elements.

Aug 1, 2020