From bars to scatter plot with revert x and y

100%

From bars to scatter plot with revert x and y

✓ Published1🌍 Public

Last edited Jul 6, 2019

Created on Jul 6, 2019

This example transforms a bar chart into a scatter plot by swapping the x and y axes, displaying country populations as evenly spaced circles with a fixed radius. The visualization uses D3 v5’s `scaleLinear` for the population axis and `scalePoint` for the categorical country axis, with `axisBottom` and `axisLeft` generating gridlines. Data comes from a local CSV loaded via `d3.csv`, and circles are appended to an SVG with click handlers that log each data point to the console.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Modifying Bar plot to a scatter plot D3.js

This example transforms a simple bar chart of population data by country into a scatter plot using D3.js. D3's `scaleLinear` maps population values to the x-axis, while `scalePoint` positions each country name along the y-axis, with circles rendered as the marks. The visualization reads from a CSV file and uses `axisLeft` and `axisBottom` to generate the axes, with tick labels formatted using D3's `format` function.

Ggorfoula

86% match

Loading thumbnail…

Gonna make a Scatter Plot

This example shows a horizontal bar chart of country populations, with each bar’s length scaled to the population value and its vertical position set by a categorical scale for country names. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleBand`, and `csv` to load and parse the data, then appends SVG `<rect>` elements. The population values are multiplied by 1,000 after loading, and bars are rendered in black against a full-viewport SVG canvas.

Jjohncoder21

84% match

Loading thumbnail…

Scatter plot

This scatter plot uses a point scale for the y-axis and a linear scale for the x-axis to display top countries by population. D3 v5 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` are used to render the SVG circles and axes. The chart reads from a CSV file, though the example uses dummy school data in place of the expected population dataset. The y-axis is labeled with school names while the x-axis shows population values, with axis labels and ticks styled via CSS.

Aarths-glitch

83% match

Loading thumbnail…

Scatter plot

A scatter plot displays population figures for ten countries using horizontal bars, with each bar’s length proportional to population. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data from `data.csv` is loaded via `csv()`, and population values are multiplied by 1000. Axes are rendered with `axisLeft` and `axisBottom`, while rectangles are appended to the SVG group to represent the bars.

LLonwabo11

82% match

Loading thumbnail…

Scatter plot

LLonwabo11

82% match

Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady

82% match

Loading thumbnail…

Scatter Plot of Country Populations from CSV file

This example displays a scatter plot of country populations from a CSV file, with each circle positioned along a point scale for countries and a linear scale for population values. The visualization includes labeled axes, grid lines, and a formatted x-axis that abbreviates large numbers. Using D3 v5, the code loads data with `d3.csv`, scales it with `d3.scaleLinear` and `d3.scalePoint`, and renders the chart as SVG elements including axes and circles.

Fframptonb

82% match

Loading thumbnail…

Scatter Plot

Using d3.csv to load population data for ten countries, this scatter plot displays each nation as a circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses d3.axisBottom and d3.axisLeft with custom tick formatting that abbreviates large numbers, while SVG circles are rendered with a fixed radius. Population values from the CSV are multiplied by 1000, and the chart includes labeled axes and a title.

Bben-chin-43

82% match