EP03 | 學會 D3.js 製作圖表 - 製作長條圖(Bar)

100%

EP03 | 學會 D3.js 製作圖表 - 製作長條圖(Bar)

✓ Published2🌍 Public

Last edited Nov 5, 2021

Created on Nov 5, 2021

This bar chart visualizes the populations of the top twelve countries in 2020, using horizontal bars sorted by population size. Built with D3.js v7 and rendered as an SVG, the chart applies `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It uses `axisLeft` and `axisBottom` to generate axes, with custom tick formatting to display billions. The data is loaded from a CSV file, and CSS classes style the title and axis labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

EP04 | 學會 D3.js 製作圖表 - 製作散佈圖(Scatter Plot)

This scatter plot displays the populations of the top 12 countries in 2020, with each circle representing a country positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG axes and circles. Data is loaded from a CSV file via `d3.csv`, with population values converted from strings to numbers and multiplied by 1000. Custom styling through CSS classes formats tick labels, axis lines, and the title.

CCeleste6666

90% match

Loading thumbnail…

Ep 24 Bar Chart ReactD3 Styliazed

This example shows a horizontal bar chart displaying the top 10 countries by population for the year 2020, drawn using React and D3 v6. The SVG-based visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are formatted using D3’s `format` function, converting values like "1.4B" for billions, and data is loaded from a CSV file via `d3.csv`. The chart features a Poppins font, styled gridlines, and tooltips showing the formatted population for each country on hover.

GGordon Yang

84% match

Loading thumbnail…

Ep23 Bar Chart ReactD3 Refactor

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG elements in a React component. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to map country names and population values to pixel coordinates, while React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the rendering of axes and bars. Data is loaded asynchronously from a CSV file using D3’s `csv` method. The code demonstrates a refactored pattern where D3 handles scales and data loading, while React manages the DOM updates.

GGordon Yang

83% match

Loading thumbnail…

D3.js

This visualization displays a bar chart of the top 10 most populous countries, with population values scaled linearly along the x-axis and country names ordered along a band scale on the y-axis. The code uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes with custom tick formatting. The chart is rendered as SVG within a React framework, with bars colored green and a title labeling the dataset.

WWholebitmedia

82% match

Loading thumbnail…

Ep21 Bar Chart with React/D3

This example displays a horizontal bar chart of the top ten countries by projected 2020 population, sourced from a UN population dataset (CSV). Built with React and D3 v6, the app fetches data via `d3.csv`, sorts it, and renders SVG `<rect>` elements. It uses `scaleBand` for the y-axis countries and `scaleLinear` for the x-axis population values, with bar widths mapped to population counts and heights set by the band’s `bandwidth`. React’s `useState` and `useEffect` handle data loading, while `ReactDOM.render` mounts the chart into the root div.

GGordon Yang

82% match

Loading thumbnail…

Let's make a bar chart with D3.js

This bar chart displays the populations of ten countries, with bars extending horizontally from a left-aligned axis. The visualization uses D3.js v5 within a React framework to load CSV data and render SVG elements, employing `d3.scaleLinear` and `d3.scaleBand` for proportional scaling. It generates left and bottom axes via `d3.axisLeft` and `d3.axisBottom`, and appends rectangles through a data join to encode population values.

Ssingularity6033

81% match

Loading thumbnail…

Let's make a bar chart with D3.js

This example shows a bar chart of country populations using D3.js, with each bar’s height scaled linearly from the population values and positioned along a categorical axis for country names. It renders entirely as SVG, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisLeft` to draw tick marks. Population data comes from a CSV file loaded via `csv`, and the bars are appended as `rect` elements with a steelblue fill. The chart uses margins to place the plot area within a fixed 960×500 SVG canvas.

Xx1umao

81% match

Loading thumbnail…

D3.js

A bar chart displays population counts for ten countries, using horizontal bars to compare values from a CSV dataset. The visualization renders as an SVG element with a light gray background, where bar lengths correspond to population magnitudes via a linear scale. Built with React and D3 v5, the code uses `d3.csv` to load data, `d3.max` for domain calculation, and SVG `rect` elements styled with steelblue fills. The y-axis positions are mapped using `d3.scaleBand`, though no axis labels or tick marks are rendered in the final output.

Aaizazhussain234

81% match