D3 Barchart

100%

✓ Published0🌍 Public

Last edited May 30, 2021

Created on May 30, 2021

This example visualizes the diameters of planets in our solar system using a horizontal bar chart built with D3.js. The bars are rendered as SVG rectangles, scaled using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, which lists planet names sorted in descending order by diameter. The chart imports data from `planets.csv`, converts the diameter strings to numbers, and displays axes generated with `d3.axisLeft` and `d3.axisBottom`. The SVG canvas is 960 by 500 pixels, with margins applied via a group transformation.

AI-generated description

Reading in data and creating a bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

data viz d3

This example shows a horizontal bar chart of planetary diameters, sorted in descending order from Jupiter to Pluto. The visualization uses D3 v6’s `scaleLinear` and `scaleBand` to map diameter values and planet names, rendering SVG rectangles bound to data from a CSV file. The chart reads the `planets.csv` dataset, converting the `Diameter` field to numbers, and displays a clean, static layout with margins and a white background.

Aannprzy

88% match

Loading thumbnail…

DV Group 2

This example shows the diameters of the eight planets and Pluto as horizontal bars, sorted from largest to smallest, using an SVG bar chart. The chart is generated with D3 v6, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file and rendered as `rect` elements.

Ddabrze3@gmail.com

86% match

Loading thumbnail…

DV Group 1

This chart shows the diameters of the planets in our solar system as a horizontal bar chart, using data loaded from a CSV file. The bars are drawn as SVG rectangles, with a linear scale for the diameter values and a band scale for the planet names, sorted in descending order. The visualization is built with D3 v6, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered into an SVG element within an HTML page.

Ddabrze3@gmail.com

85% match

Loading thumbnail…

Untitled

This example shows the diameters of planets in kilometers, with each planet represented as a dot on an SVG scatterplot rather than a bar chart. The x-axis maps planet names using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` for diameter values. Data is loaded from a CSV via `d3.csv`, and circles are appended to a group container with an explicit transform offset. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the visualization is built entirely with D3 v7 and SVG, drawing from a dataset of planet measurements.

Hhollyjpotter

81% match

Loading thumbnail…

DV vizualization 1

This visualization displays the physical characteristics of planets in SVG using D3.js v6. It loads planetary data from a CSV file and maps each planet’s Diameter to a linear scale, `d3.scaleLinear`, for potential horizontal positioning. The code initializes an SVG canvas with fixed dimensions and sets a white background, while the rendered output remains incomplete as data loading and drawing logic are only partially implemented. The visualization relies on D3’s selection and scale APIs, with styling defined in an external CSS file.

Sskszymon20

79% match

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart ranking star systems by their distance from Earth in light-years, using data from a local CSV file. The visualization is built with D3 v5, employing `scaleLinear` and `scaleBand` to map distances and star names to SVG rectangles. Axes are generated using `axisLeft` and `axisBottom`, while the bar widths are scaled proportionally to each distance value. The chart is rendered entirely as SVG elements within a 960 by 500 canvas.

MMinaTvkl

77% match

Loading thumbnail…

D3 Barchart

This example shows a horizontal bar chart comparing population values for six countries (A–F), with bars rendered as SVG rectangles and axes labeled accordingly. The chart loads data from a CSV file, converts population strings to numbers, and uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` with padding for the y-axis. The code builds the visualization by appending a group, calling `d3.axisLeft` and `d3.axisBottom` for the axes, and binding the data to rectangles with the D3 data-join pattern. All styling comes from a stylesheet setting bars to steelblue.

MMahmudul Hasan Bhuiyan

77% match

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of country populations, using D3 v6 to load data from a CSV file and render it as SVG rectangles. The visualization orders countries by descending population, with bar lengths scaled linearly and categorical spacing handled by `d3.scaleBand`. The code uses `d3.csv` to parse the data, `d3.scaleLinear` for the x-axis, `d3.axisLeft` and `d3.axisBottom` for labeled axes, and appends styled `<rect>` elements to the SVG.

SSimonPlanje

75% match