Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Ssergey-kvachenok
Last edited Jan 10, 2021
Created on Jan 9, 2021

This bar chart displays the population of the top 10 most populous countries, with countries on the y-axis and population on the x-axis. It uses D3 v6’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to construct the chart within an SVG element. The data is loaded from a CSV file and rendered as steelblue rectangles, with gridlines and styled text via CSS.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

A horizontal bar chart displays the populations of the ten most populous countries. The visualization uses D3.js version 5, with `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The SVG rendering is styled with CSS, including steelblue rectangles and custom axis labels. The `csv` function loads the population data, which is multiplied by 1000 for display. The chart includes a custom x-axis format that converts large numbers to billions.

IIhorFedorkiv94
90% match
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart using SVG rendering. It loads population data from a CSV file via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and formats axis ticks with `d3.format`. The chart uses `d3.axisLeft` and `d3.axisBottom` for axes, with custom labels and a steelblue fill for bars.

0057SatvikDamera
90% match
Loading thumbnail…

Fork of Fork of Bar Chart

This horizontal bar chart visualizes the top 10 countries by population, using a steelblue SVG canvas. The chart maps country names to the y-axis with a band scale and population to a linear x-axis. Rendered using D3 v6, the code loads data from a CSV file and applies `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot. Rectangles are appended to the SVG group, with their widths and positions derived from the scaled data values.

Sshikharpa
89% match
Loading thumbnail…

Shapes with SVG and CSS

This bar chart displays population estimates for ten countries from a supplied CSV, ranking them from largest to smallest. Built with D3 v5, it uses `scaleLinear` for the x-axis and `scaleBand` for y-axis categories, with `axisLeft` and `axisBottom` for ticks. Rectangles are styled with a steelblue fill via CSS.

RRob Foggo
89% match
Loading thumbnail…

Fork of Let's make a bar chart with D3.js!

This horizontal bar chart displays the populations of the top ten most populous countries, using a D3.js v5 SVG rendering. Data from a CSV file is loaded and scaled linearly for the x-axis and as a banded scale for the y-axis. The code demonstrates fundamental DOM manipulation by appending rectangles and text elements, with axes and labels formatted using D3’s `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` utilities.

DDomen Hribernik
89% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of population data for ten countries, using SVG rectangles rendered with D3 v5. The visualization scales bar lengths with `d3.scaleLinear` and spaces categories using `d3.scaleBand`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. CSS styles the bars in pink, and the code reads from a CSV file, formats tick labels with `d3.format`, and logs clicked elements to the console.

OOsekovS
88% match
Loading thumbnail…

Fork of Making a Bar Chart

This chart visualizes the top 10 most populous countries, with horizontal bars ranked by population using 2018 data from the United Nations World Population Prospects. Built with D3 v5, it renders as an SVG and customizes the axes, removing domain lines and formatting tick labels to abbreviate large numbers (e.g., ‘B’ for billions). The code relies on D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while styling bars with steelblue fill via CSS.

Ddeep221b
88% match
Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, sorted vertically by country name. It uses D3 v5’s `csv` loader and `scaleLinear` and `scaleBand` to map population values and country categories, with axes generated by `axisLeft` and `axisBottom`. The SVG bars are rendered in steel blue, and population labels use the `format` function with abbreviated suffixes. Data comes from a local CSV file, and all rendering is done via SVG elements.

Kkkwyoung
88% match