D3 Example

100%

✓ Published0🌍 Public

Last edited May 22, 2015

Created on May 14, 2015

This D3 example visualizes the populations of three cities—Shanghai, Buenos Aires, and Mumbai—as a horizontal bar chart. It shows population magnitudes through bar lengths along a linear x-axis, with city names on the ordinal y-axis. The visualization uses D3.js (v3) to load a CSV file, scale data, and render SVG elements. The code employs `d3.scale.linear`, `d3.scale.ordinal`, and `d3.svg.axis` to construct axes, while formatting tick labels with `d3.format("s")` for compact notation. Data comes from the included `geonames_cities_top3.csv` file.

AI-generated description

A standalone D3 horizontal bar chart.

This is example 105 of the screencast Introduction to D3

Similar vizzes

Loading thumbnail…

D3 Example

This example presents a horizontal bar chart of the ten most populous cities, using D3.js to render SVG elements. It compares population figures sourced from Wikipedia’s list of cities proper by population, displayed via a linear x-scale and an ordinal y-scale with rounded band padding. The chart applies Google Fonts (Poiret One) to axis text and labels, while the D3 CSV loader (`d3.csv`) parses the local `top10cities.csv` file with a custom type function to convert population values to numbers. The code explicitly configures margins, axis ticks with SI formatting, and removes the y-axis line for a clean visual.

CCurran Kelleher

84% match

Loading thumbnail…

Top 3 Largest Cities

A horizontal bar chart displays the population of the top three largest cities—Shanghai, Mumbai, and Sao Paulo—based on 2018 data from the United Nations World Population Prospects. The visualization renders as SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population counts to bar widths and country names to vertical bands. Data is loaded from a CSV file via `d3.csv`, with values parsed as numbers. Green rectangles encode each city’s population, and axes are labeled with default text formatting.

Mmargaretgoode

83% match

Loading thumbnail…

D3 Example

This D3 example displays a bar chart of the top five countries sorted by population, using data from a CSV file. It shows the relative population sizes of China, India, the USA, Indonesia, and Brazil on the y-axis, with country names on the x-axis. The visualization uses D3’s `d3.svg.axis` for axes and ordinal and linear scales for positioning. The y-axis labels are formatted with a custom SI tick format that abbreviates billions as "B". The chart is rendered as an SVG with margins and a bar padding, using a static bar width from `xScale.rangeBand()`.

CCurran Kelleher

82% match

Loading thumbnail…

D3 in depth

This example shows horizontal bar charts for the populations of five cities, with city names positioned to the right of each bar. A hover effect changes the bar color from steelblue to orange. The visualization is built with D3 v7, using selections, data binding, and the `join` method to create SVG `rect` and `text` elements. The data is hard-coded in an array of city objects, and bar widths are scaled by multiplying population values by a constant factor.

SSubhendu Karmakar

82% match

Loading thumbnail…

D3 Tutorial

This example shows a bar chart of country populations using a vertical band scale for categories and a linear scale for values. The code loads data from a CSV file, parses the population numbers, and renders SVG rectangles with steelblue fills. It uses d3.csv, d3.scaleBand, d3.scaleLinear, and d3.axisBottom/axisLeft, with margins and an inner group transform to position the axes. The y-axis tick lines and domain are removed for a cleaner look.

SShivansh Mathur

81% match

Loading thumbnail…

D3

This example shows a horizontal bar chart of population data for ten countries, with population values scaled by a factor of 1,000. The visualization uses D3 v5 to load the CSV, create linear and band scales, and render SVG rectangles with axes. The code demonstrates `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and the chart is built within a React context, with the SVG element targeted by `d3.select`. The bars are styled with steelblue fill, and axes are labeled with a custom font size.

JJeffrey Miiller

81% match

Loading thumbnail…

D3 Making a Bar Chart

This example shows a horizontal bar chart of country populations using data from a CSV file. The chart loads population figures for ten countries, scales them by 1,000, and renders them as steel-blue rectangles with an ordinal y-axis and linear x-axis. The code uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to bind data and draw SVG elements.

GGordon Yang

81% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several global cities, with each bar’s length representing a city’s population. The visualization uses D3 v7 to load a CSV file, then applies `scaleLinear` for the x-axis population scale and `scaleBand` for the y-axis city categories. SVG rectangles are appended and sized using these scales, with `axisLeft` and `axisBottom` rendering the labeled axes. The chart is styled with steelblue fills and a fixed 960×500 SVG canvas.

Ssheafallick

81% match