Fork of Fork of Shapes and Colors with SVG and CSS-- ME

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

Shapes and Colors with SVG and CSS

This visualization displays the number of months requested per industry category using horizontal bars, with each bar’s length mapped to the numeric month value from the loaded CSV dataset. The code uses d3.csv to parse data.csv, d3.scaleLinear for the x-axis, d3.scaleBand with padding for the y-axis, and d3.axisBottom and d3.axisLeft to render axes. Rects are appended to an SVG group, styled with a steelblue fill via CSS, while the axis domain lines and ticks for the y-axis are explicitly removed.

KKateryna

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of population data for ten countries, using SVG rectangles rendered with D3 v5. The visualization scales bar lengths with `d3.scaleLinear` and spaces categories using `d3.scaleBand`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. CSS styles the bars in pink, and the code reads from a CSV file, formats tick labels with `d3.format`, and logs clicked elements to the console.

OOsekovS

Fork of Fork of data visulization

This example shows a horizontal bar chart of country populations, using bar length to encode population values and vertical position to encode country names. The visualization renders as SVG with steel-blue bars and axes, drawing from a CSV file that is loaded asynchronously and preprocessed by multiplying population values by 1,000. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `max` within a React context, though the primary rendering is handled directly with D3 selections and SVG elements.

Yyingzhe-z

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of country populations using SVG shapes styled with CSS. The bars are drawn as `rect` elements with a pink fill, and the chart includes axes rendered via D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. Population values from a CSV file are loaded with `csv()` and scaled against the chart’s width, while `selectAll` and data joins append the rectangles. The code relies on D3 v5 and SVG, with CSS controlling font size and rectangle color.

OOsekovS

Shapes and Colors with SVG and CSS

OOsekovS

Fork of Shapes with SVG

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.

Aabhimanyu-dhar

Fork of Fork of Fork of Fork of bar_char 5 styles

This example renders a horizontal bar chart of UN population data for 10 countries in 2020, colored teal with labeled axes. Built with React components and D3 v5 scales, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, drawing SVG rectangles per country. The code formats tick labels using D3’s `format` function, abbreviates values (e.g., “1.2B”), and supports tooltips via SVG `<title>` elements. Data is loaded asynchronously with D3’s `csv` utility.

TTanupat B.