Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Jjhansi
Last edited Mar 22, 2022
Created on Mar 14, 2022
Forked from Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates custom D3 v4 axis styling, including hidden x-axis path lines and percentage-formatted y-axis ticks. The SVG visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and handles window resizing by redrawing the chart with `getBoundingClientRect`. Data is loaded from a TSV file, with hover effects changing bar color to pink.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v4 to render SVG rectangles and axes, with data loaded from a CSV file. The code includes commented-out interactive features like mouseover tooltips and hover effects, though the active script also draws a separate line path using `d3.line` with hardcoded points. The chart is styled with custom CSS for layout and tooltip formatting.

Jjl-tan
94% match
Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It builds on a basic bar chart example and demonstrates customization of D3 axes. The visualization uses d3.v4 to create SVG rectangles, with bar width calculated from the dataset length and bar height proportional to population values. The chart’s background is styled via CSS, and the code includes a simple dataset array of nine values for illustration.

CClair Sun
94% match
Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. It uses d3.scale.linear for the x-axis and d3.scale.ordinal with rangeRoundBands for the y-axis, along with d3.svg.axis to render custom tick labels. The SVG rendering includes rotated x-axis labels and a steelblue fill for each rectangle, demonstrating axis customization in D3 v3.

VVijay2051
94% match
Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3’s `select` and `csv` to load data and render the chart. It customizes D3 axes with styled tick lines, tick text, and an axis label, while the CSS applies a steelblue fill to rectangles and adjusts font sizes for clarity. The title and axis annotations are positioned with D3’s selection methods, demonstrating a polished, readable bar chart.

DD2552
93% match
Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customization of D3 axes, with styled tick marks, labels, and a title. The chart uses D3 to load the CSV data and render bars, with the y-axis and x-axis formatted for readability. The bar fill is steelblue, and all text elements use sans-serif fonts. The example builds on a previous bar chart tutorial and includes a button that triggers a JavaScript function.

HHassan Abdullah
92% match
Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries for the year 2020, using data from the United Nations World Population Prospects 2019. The visualization uses a horizontal bar layout, where each bar’s length encodes population, with a formatted axis label converting values into a readable "B" (billions) format. Built with React and D3 v5, the code constructs a linear scale (`d3.scaleLinear`) for the x-axis and a band scale (`d3.scaleBand`) for the categorical y-axis. The rendering is SVG-based, with interactive tooltips showing exact population values on hover. The chart is styled with a teal color for bars and a clean sans-serif font, presenting the data in an accessible, static format.

HHaileabGH
92% match
Loading thumbnail…

CS399

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It demonstrates axis customization, including a formatted x-axis that abbreviates large numbers (e.g., "1.42B") and removed axis lines. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes. Rectangles are drawn in SVG with a steelblue fill, and custom text styling is applied via CSS classes.

Kkth2242
92% match
Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries in 2020, using horizontal bars to compare population sizes. The visualization loads data from a United Nations World Population Prospects 2019 CSV file via d3.csv, then renders it with React and SVG. The code uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.format to abbreviate tick labels (e.g., converting billions to "B"). Each bar includes a native SVG title tooltip showing the population value, with axes and labels rendered as custom React components.

Ssamemurk21
92% match