Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 8, 2023

Created on Mar 8, 2023

This example visualizes the population of two groups, female and male, as horizontal SVG bars from a loaded CSV file. The code uses `d3.csv` to parse the data, then applies `d3.scaleLinear` for bar widths and `d3.scaleBand` for vertical positioning. It appends `<rect>` elements to the SVG canvas, with heights set by the band scale. The chart updates dynamically when the asynchronous CSV data arrives.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example uses D3 v5 to render a horizontal bar chart of population data from a CSV file. The SVG canvas displays each country as a bar, with bar width proportional to population using a linear scale and bar position determined by a band scale. Data is loaded via D3’s `csv` function, and the chart is drawn by appending `rect` elements to the SVG. The code uses `scaleLinear`, `scaleBand`, and `max` from D3 to map values.

一一如既往

85% match

Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM

84% match

Loading thumbnail…

Fork of Bar Chart

This example displays a horizontal bar chart comparing two categories, female and male, by count, using data loaded from a CSV file. The visualization uses D3 v7 with SVG rendering, where `d3.scaleLinear` maps count values to bar widths and `d3.scaleBand` positions the categorical y-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with the x-axis formatted using `d3.format` to abbreviate large numbers. The chart is styled with steelblue rectangles and demonstrates a simple, clean layout with custom margins.

JJustin Roberts

82% match

Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart of country populations using D3 v5. It loads data from a CSV file and appends SVG rectangles scaled by population values. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` to render the country labels. A margin-based layout shifts the bars via an SVG `<g>` transform, with a 1000-person offset added to each population value before rendering.

Ttheodasilva

82% match

Loading thumbnail…

HTML Starter

Ttheodasilva

82% match

Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart of population by country using a small CSV dataset. The code loads data with `d3.csv`, scales the population values, and renders SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It uses `axisLeft` and `axisBottom` for tick marks, with a steelblue fill for bars. D3 v6 is imported from the npm package, and the chart is built imperatively by appending elements to an SVG container.

Nnouralkhoury

82% match

Loading thumbnail…

Fork of Let's make a bar graph

This example displays a horizontal bar chart of country populations using SVG rectangles. It loads data from a local CSV file and renders each bar with D3 v5’s `scaleLinear` for widths and `scaleBand` for vertical positioning. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from the D3 module, fetches the CSV asynchronously, and appends `rect` elements to an SVG. The data values are multiplied by 1,000 to convert population figures.

MMatiasmedrano66

82% match

Loading thumbnail…

HTML Starter

This example uses D3 v5 to render a horizontal bar chart of population data from a CSV file, with each country’s population shown as a steel-blue rectangle. The code loads `data.csv` using `d3.csv`, parses populations with `map`, and builds linear and band scales via `d3.scaleLinear` and `d3.scaleBand`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and all shapes are drawn as SVG elements within a fixed 960×500 viewport.

DDanzeOnn

82% match