Skip to main content
100%

Creating SVG Elements from Data

✓ Published0🌍 Public
Aalebusi
Last edited Apr 22, 2015
Created on Apr 22, 2015

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`.

AI-generated description

Similar vizzes

Loading thumbnail…

Creating SVG Elements from Data

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.

Aalebusi
91% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for 27 countries, sorted by decreasing size from China to South Korea. The visualization uses D3 v6 with `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to row positions. Data loads from `data.csv`, multiplies each population value by 1,000, and renders steelblue SVG rectangles on a 960×500 canvas with fixed margins and a left-aligned label axis.

HHan Jinseok
76% 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
76% 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…

csce5320finalfinalproject

This example presents two side-by-side bar charts ranking the top ten countries by GDP per capita and by gross primary education enrollment. The charts use D3.js version 6 to load CSV data from remote GitHub sources and render scalable vector graphics (SVG). Each bar chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for ticks. Interactive tooltips appear on bar mouseover, showing the country name and the corresponding metric value.

Ssriharshakondakindi@gmail.com
75% match
Loading thumbnail…

Data as bar chart

A horizontal bar chart ranks the twenty most populous countries, showing population counts with steel-blue bars and labeled axes. Built with D3 v6, the visualization loads CSV data from Kaggle, maps populations to a linear scale and countries to a band scale, and renders the chart as SVG. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes.

Ccarbuncle-3djs
75% match
Loading thumbnail…

Making a basic bar chart with D3.js!

This example shows a horizontal bar chart ranking seven countries by count, with purple bars, light gray gridlines, and labeled axes. The data loads from a CSV file and multiplies each count by 1,000 before sorting countries in descending order. Rendering uses SVG elements created with D3 v7, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for ticks. A custom axis label and title are added via appended text elements.

RRoman Polulekh
75% 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