Skip to main content
SimilarExport ZIP
100%

柱状图

✓ Published1🌍 Public
Lluojiandan
Last edited Apr 18, 2020
Created on Apr 18, 2020

This bar chart displays population estimates for six global regions in 2019, with horizontal bars ordered by region name. The visualization uses D3 v5 with SVG rendering, leveraging `scaleLinear` for the population axis and `scaleBand` for categorical region placement. Data is loaded from a CSV file via `d3.csv`, and population values are multiplied by 1000 before mapping to bar widths. Axes are generated with `axisLeft` and `axisBottom`, while rectangles represent each region’s population, styled with steelblue fill.

AI-generated description

柱状图测试，引用数据来源于各州2019的人口数据

2020年4月18日 步骤： 1、读取数据，并处理数据 2、分别创建坐标轴，创建坐标轴时，需要使用相应的比例尺 3、绘图：数据、辅助信息（坐标轴、标题） 4、绘图时，一般对要素进行分组处理，如：X轴（含注记）、Y轴（含注记） 5、通过鼠标右键，查看“检查”，获取元素信息，方便通过d3.select选择元素

MIT Licensed

Similar vizzes

Loading thumbnail…

自定义坐标轴

This bar chart displays the 2019 population of global regions, with a custom y-axis and a horizontal bar layout. The chart uses D3 v5’s `scaleBand` and `scaleLinear` to map regions and population values, while `axisBottom` and `axisLeft` render the axes. Population labels are formatted with the `format` function, replacing "G" with "B" for billions. The data is loaded from an external CSV file, and the visualization is rendered as SVG elements, with gridlines and a title styled via CSS.

Lluojiandan
85% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays population figures for 18 countries, with each bar’s length representing population in thousands and countries ordered along the vertical axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to pixel coordinates, while `axisLeft` and `axisBottom` generate the labeled axes. Population data is loaded from a CSV file via `d3.csv`, and rectangles are appended to an SVG canvas, styled with a purple fill. The chart’s margins and inner dimensions are computed dynamically from the SVG’s width and height attributes.

Yyktan89
83% match
Loading thumbnail…

Making a bar chart

A bar chart displays population estimates for six global regions from a CSV file, showing Africa, Asia, Europe, Latin America and the Caribbean, Northern America, and Oceania. The visualization uses D3 v5’s `select` and `csv` methods to load the data, then converts each population value from millions to thousands. The SVG chart is rendered at 960 by 500 pixels, with the page styled to remove margins and hide overflow. The code currently logs the processed data to the console, laying the foundation for drawing bars.

Ppengming0807
83% match
Loading thumbnail…

Bar chart

This bar chart displays the population of seven global regions using circles scaled along a linear axis, with country names on a point scale. Built with D3 v5, the visualization loads data from a CSV file, converts population values, and renders SVG elements. It uses `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `tickFormat` to format values in billions, while custom margins and axis styling enhance readability.

Kkavi-kumaran
83% match
Loading thumbnail…

Bar chart using D3.js

This bar chart displays population estimates for the ten most populous countries, using horizontal bars sorted alphabetically by country with steel-blue rectangles. The visualization loads data from a CSV file and renders it as SVG elements, with the D3 v5 library handling the core logic. It employs `scaleLinear` for the x-axis population values and `scaleBand` for the y-axis country categories. The chart adds axes through `axisLeft` and `axisBottom`, appends a group element with margins, and positions rectangles using the scales.

AAbhishek Chandarana
83% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for the ten most populous countries, with horizontal bars ordered by country name. The visualization uses D3 v6 with SVG rendering, scaling population values linearly and country names on a band scale. Data is loaded from a CSV file and converted from thousands to absolute numbers. Axes are generated using d3.axisLeft and d3.axisBottom, while bars are appended as SVG rectangles with a steelblue fill.

Jjkmingwen
83% match
Loading thumbnail…

Bar chart

This bar chart displays the populations of seven global regions using a horizontal layout, with the population values loaded from a CSV file and formatted in billions. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to SVG rectangles, while `axisLeft` and `axisBottom` generate the chart’s axes. The code also demonstrates DOM manipulation through D3 selections, appending elements, and applying attributes. A title and axis label are added via SVG text elements, and the styling is handled through an external CSS file.

Kkavi-kumaran
83% match
Loading thumbnail…

Bar Chart

This bar chart displays population estimates for ten countries in 2018, ordered alphabetically from China to Mexico. The height of each steel-blue rectangle corresponds to the country’s population value, scaled linearly along the horizontal axis using `scaleLinear`, while the vertical axis positions countries with `scaleBand`. The SVG is rendered with D3 v5, using `csv` to load the data and `axisLeft`/`axisBottom` to generate axes. A fixed margin is applied via a translated `<g>` element.

Ssploitfun
83% match