使用“D3.js”和“SVG”来制作“柱状图”

100%

使用“D3.js”和“SVG”来制作“柱状图”

✓ Published1🌍 Public

Last edited Sep 20, 2021

Created on Sep 20, 2021

This horizontal bar chart displays population estimates for ten countries, using an SVG canvas with D3.js v7. The code loads data from a CSV file, maps population values to a linear scale, and country names to a band scale. It renders axes using `axisLeft` and `axisBottom`, then draws colored rectangles for each bar. The chart demonstrates D3 data joins, scales, and margin-based layout within a fixed 960×400 SVG viewport.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population estimates for the ten most populous countries, scaled in thousands. The visualization uses D3 v7 with an SVG renderer, loading data from a CSV file and encoding population with a linear scale and country names with a band scale. The code imports specific D3 modules like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct axes, while bars are appended as SVG `rect` elements with steelblue fill.

JJuyeonee

84% match

Loading thumbnail…

D3 Making a Bar Chart

This example shows a horizontal bar chart of country populations using data from a CSV file. The chart loads population figures for ten countries, scales them by 1,000, and renders them as steel-blue rectangles with an ordinal y-axis and linear x-axis. The code uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to bind data and draw SVG elements.

GGordon Yang

84% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population estimates for ten countries, using a CSV data file. The bars are rendered as SVG rectangles with a steelblue fill, and the chart includes left and bottom axes. The code uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, map population values to widths, and position country labels. Population numbers are read as strings and converted to numeric values before scaling.

Mmagua

83% match

Loading thumbnail…

Bar Chart!

This example shows a horizontal bar chart comparing the populations of ten countries, drawn as SVG rectangles scaled by a linear population axis. The code imports specific D3 v5 modules—`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to load data from `data.csv`, transform population values by multiplying by 1000, and render axes and bars. Margins define an inner plotting area, and the bar heights come from the band scale’s bandwidth.

Mmeihaoming

83% match

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of population figures for ten countries, sourced from a CSV file. The visualization uses D3.v7 to load the data, scale the bars with a linear population axis and a banded country axis, and render SVG rectangles with steelblue fill. It also demonstrates axis generation, margins, and basic SVG styling for a clean, readable chart.

Wwisam-ahmed

83% match

Loading thumbnail…

Let's do a barchart with D3.js

A bar chart displays population figures for ten countries, with horizontal bars scaled by population and labeled by country. The visualization uses D3 v5 to load CSV data, convert population values, and render SVG rectangles via scales and axes. It employs `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for labels, with a steelblue fill style.

JJasonXQH

83% match

Loading thumbnail…

Bar Chart D3.js!

A bar chart displays population counts for ten countries using D3.js v5 with SVG rendering. The code loads data from a CSV file and uses `d3.csv`, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the categorical y-axis. Rectangles are appended via data joins, with widths proportional to population values (converted from thousands to absolute numbers). The example demonstrates core D3 selection, scaling, and DOM manipulation patterns in a straightforward horizontal bar layout.

BBenjamin Gorman

83% match

Loading thumbnail…

Making a bar chart!

This horizontal bar chart displays population figures for ten countries, using the D3 v7 library to render an SVG graphic. The code imports specific functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module. It loads data from a local CSV file, multiplies the population values by 1000, and plots ranked bars with steelblue rectangles. Axis labels and tick marks are generated through D3’s SVG-based axis APIs, with margins surrounding the plot area.

Mmikeferri

83% match