Creating SVG Elements from Data

100%

Creating SVG Elements from Data

✓ Published0🌍 Public

Last edited Apr 8, 2015

Created on Apr 8, 2015

This example shows how girls’ mathematics scores across 37 OECD countries can be represented as a horizontal bar chart, sorted from highest to lowest. Each bar’s width encodes the score, with country labels overlaid on the bars and hover tooltips revealing the exact values. The visualization uses D3 v3’s `d3.csv` to load the data, `d3.descending` for sorting, and SVG `rect` and `text` elements created via data joins. The bars are styled with CSS, and the dataset comes from the OECD_ISA_2012.csv file.

AI-generated description

Similar vizzes

Loading thumbnail…

Creating SVG Elements from Data

A horizontal bar chart ranks 37 OECD countries by girls' average mathematics scores, with Korea at the top and Brazil near the bottom. The bars are created by binding CSV data to SVG `rect` elements, using `d3.scale.linear` for the width axis and `d3.scale.ordinal` with `rangeBands` for the categorical country positions. Hovering reveals a tooltip via an appended `title` element. The code relies on d3.v3’s `d3.csv`, `d3.svg.axis`, and data sorting with `d3.descending`.

Aalebusi

91% match

Loading thumbnail…

Gender Inequality Indices

A horizontal bar chart shows the share of parliamentary seats held by women across countries, sorted from highest to lowest percentage. D3 v3 loads the CSV data, sorts it, and renders SVG rectangles scaled by the value. The code uses `d3.scale.linear` for the bar widths, `d3.scale.ordinal` for country positions, and `d3.svg.axis` for labeled axes. Hovering a bar reveals a tooltip with the country name and its exact value.

BBeaupe

76% match

Loading thumbnail…

PISA visualization for math's grade

A stacked bar chart compares average math scores across countries, segmented by parents' highest education level (ISCED categories). It uses d3.stack, d3.scaleBand, and d3.scaleLinear to render SVG bars, with color encoding via d3.scaleOrdinal. Hovering reveals a tooltip with the country’s score breakdown per education level, sourced from CSV data on father’s, mother’s, and combined parental education.

RRuchita7

76% match

Loading thumbnail…

Sorting Elements

A bar chart displays the number of students in secondary common education across Argentine territorial divisions, sorted in descending order using `d3.descending` on numeric values parsed from a CSV. Each SVG rectangle’s width maps to the student count, with a text label appended beside it showing the value and region. The visualization uses d3.v3’s data join, `d3.scale.linear`, and CSV loading via `d3.csv`, with custom styling for fill colors and typography.

Aa2q

76% match

Loading thumbnail…

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

75% match

Loading thumbnail…

Let's make a BAR CHART with D3.js!

A bar chart displays happiness scores for ten countries, with horizontal bars sorted from Finland’s highest score to Austria’s lowest. The visualization loads data from a CSV file and renders SVG rectangles using D3 v5’s `scaleLinear` for bar widths, `scaleBand` for vertical positioning, and `selectAll`–`data`–`enter` joins. The chart fills the entire 960×500 SVG canvas, with no axes or labels, emphasizing raw score comparisons across countries.

Ssoniyaa-dv

75% match

Loading thumbnail…

SVG

This example demonstrates a horizontal bar chart comparing the populations of five countries, using SVG elements for rendering. The chart loads data from a CSV file and applies D3.js v5 scales, including `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axis components are created with `axisLeft` and `axisBottom`, while number formatting uses `format` to abbreviate large population values. The bars themselves are drawn as `rect` elements with a fixed steelblue fill, and the visualization includes custom margins and a title.

Hhambasicharis1995

75% match

Loading thumbnail…

Let's make a BAR CHART with D3.js!

A horizontal bar chart displays national scores from a CSV dataset, with each bar representing a country and its length corresponding to the score value. The visualization uses D3 v5's `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to render the axes. Bars are drawn as SVG rectangles filled with steelblue via the `selectAll('rect')` data join, with margins and padding for layout. The code reads `data.csv` asynchronously and converts scores to numbers before rendering.

Ssoniyaa-dv

75% match