Altxis

@Altxis·5 public vizzes

Axis test

Two charts compare how `d3.axisBottom` handles band scales with different domain sizes. The top axis uses a small domain of seven values, displaying every tick, while the bottom axis uses a domain of fifty values and reduces ticks to twenty using `d3.ticks`. Both scales use `d3.scaleBand` and `rangeRound`, with axes rendered as SVG `<g>` groups. The implementation builds axis configurations through a custom `makeAxis` function that conditionally selects tick values based on domain length.

May 14, 2021

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization shows how D3 axis customization works, replacing the default axis labels with abbreviated tick formats and removing unnecessary domain lines. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render the axes with custom tick sizes and formatting. The chart is rendered as an SVG with styled tick text and axis labels.

Nov 8, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries rendered as light green paths on a blue spherical background. Using D3.js and the topojson library, the code fetches geographic data from the `world-atlas` package and applies a `geoNaturalEarth1` projection with `geoPath` to draw the map. The SVG output includes a distinct sphere class and country boundaries with subtle stroke opacity.

May 8, 2020

Loading thumbnail…

Dishonest Bar Chart

This bar chart displays the population of the top 10 most populous countries from a 2018 United Nations estimate, but intentionally omits a zero baseline to exaggerate differences between bars. The visualization loads population data from a CSV file and uses d3.csv to parse it, then renders steelblue rectangles with d3.scaleLinear and d3.scaleBand. The x-axis uses d3.axisBottom with a custom tick formatter that abbreviates numbers, while the y-axis labels are drawn without tick lines. The chart updates after a three-second delay and randomly filters data points, creating a deliberately misleading comparison.

Apr 26, 2020

Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 United Nations population estimates. It shows how to customize D3 axes within an SVG rendering. The code uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries, applying custom tick formatting via `d3.format` to convert values into billions. The chart also removes axis domains, adds grid lines via negative tick sizes, and includes styled labels, all demonstrated through D3 v5 and CSV-loaded data.

Apr 26, 2020