Fork of Shapes with SVG

100%

Fork of Shapes with SVG

✓ Published0🌍 Public

Last edited May 9, 2021

Created on May 9, 2021

This visualization displays population data for 14 countries using horizontal bars rendered as SVG rectangles. The code loads data from a CSV file and multiplies the population values by 1000. It uses d3.scaleLinear for the x-axis scale and d3.scaleBand for the y-axis, though the bar heights are fixed at 300 pixels and the y-scale is not applied to the rectangles. The example demonstrates basic data loading with d3.csv, scaling, and SVG element creation.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

86% match

Loading thumbnail…

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

A horizontal bar chart displays population data for ten countries, sorted by size, using SVG rectangles. The visualization builds scales with `d3.scaleLinear` and `d3.scaleBand`, adds axes via `d3.axisLeft` and `d3.axisBottom`, and loads the dataset from a CSV file using `d3.csv`. Population values are multiplied by 1000 before rendering, and the chart is positioned with margins and a translated group element. The example demonstrates basic data binding and SVG manipulation with D3 v5.

KKiara

85% match

Loading thumbnail…

Fork of SVG Starter

This bar chart displays population estimates for ten countries, ordered along the y-axis with population sizes extending horizontally. The visualization uses a CSV data source loaded via d3.csv, with d3.scaleLinear and d3.scaleBand for positioning. SVG rectangles are drawn and styled with steelblue, while d3.axisLeft and d3.axisBottom render the axes. The code leverages D3 v6 modules imported through ES6 syntax, applying margins and padding to structure the chart layout.

Rrajan1508

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

85% match

Loading thumbnail…

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

This visualization maps population data for ten countries as horizontal bars, with each bar’s width proportional to its population and height set by a categorical y-axis. It loads data from a CSV file, converts the population values, and uses d3.scaleLinear and d3.scaleBand to position the bars within an SVG. The code relies on d3.csv for data parsing and d3.select to append SVG rectangles.

Zzenoe

85% match