Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Aug 10, 2020

Created on Jun 23, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

A bar chart displays population sizes for ten countries, with horizontal bars ordered by country name. SVG rectangles are positioned using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, driven by data loaded from a CSV file. The visualization renders entirely with SVG elements, styled via external CSS that removes page margins and hides overflow. Population values are converted from thousands to absolute numbers during data preprocessing.

DDHasanC

92% match

Loading thumbnail…

Shapes with SVG

This example displays a horizontal bar chart of population data for ten countries, with bars rendered as SVG rectangles. The visualization uses D3 v6 scales (`scaleLinear` for the x-axis and `scaleBand` for the y-axis) to position the bars, and employs `axisLeft` and `axisBottom` to generate the axes. The data is loaded from a CSV file using `d3.csv`, and the values are explicitly converted to numbers before rendering. The chart area is inset with margins and a group translation, with bars styled in a solid steelblue color.

Uujjwalgarad

92% 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

90% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

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.

Ssergey-kvachenok

90% match

Loading thumbnail…

Shape with SVG and CSS

This example displays a horizontal bar chart of population data for ten countries, using SVG rectangles scaled by a linear population axis and a band scale for country names. The visualization is built with React and D3 v5, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart. Data from a CSV file is loaded via `csv`, with populations multiplied by 1000, and styled through CSS properties like `fill: steelblue` on the bars.

CCassie-Xiao-Yu

89% match

Loading thumbnail…

Shapes with SVG

This example displays a horizontal bar chart of country populations as SVG rectangles, using a linear scale for population values and a band scale for country names. The bars are rendered via `d3.selectAll` and `.enter()`, with axes generated through `axisLeft` and `axisBottom`. Data loads from a CSV file and converts population strings to numbers. The chart includes custom tick formatting that abbreviates numbers using `d3.format` and replaces "G" with "B" for billions.

Ffborgomano

89% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of country populations using SVG shapes styled with CSS. The bars are drawn as `rect` elements with a pink fill, and the chart includes axes rendered via D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. Population values from a CSV file are loaded with `csv()` and scaled against the chart’s width, while `selectAll` and data joins append the rectangles. The code relies on D3 v5 and SVG, with CSS controlling font size and rectangle color.

OOsekovS

88% match