data viz d3

100%

✓ Published0🌍 Public

Last edited May 31, 2021

Created on May 31, 2021

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.

AI-generated description

A template for creating SVG with D3 and CSS.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Barchart

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.

Ddabrze3@gmail.com

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

87% 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

83% 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

82% 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

80% 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

74% match

Loading thumbnail…

Data Visualization with D3

This example shows a bar chart of population values for a list of countries, with each bar’s length scaled linearly and countries arranged along a categorical band scale. It uses D3 v5 with SVG rendering, applying `d3.scaleLinear` and `d3.scaleBand` to map data to positions, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file via `d3.csv`, and population figures are parsed and multiplied before rendering.

Ssvensonneveld

74% match

Loading thumbnail…

D3 Chart

This example shows a horizontal bar chart of country populations, with bars scaled linearly by population and countries ordered alphabetically along the vertical axis. The chart uses D3 v5’s `csv` loader to parse data.csv, `scaleLinear` and `scaleBand` to map values, and `axisLeft`/`axisBottom` for labeled axes. Rects are appended to an SVG group and filled with steelblue, while the page includes a rotated text label. The data is loaded asynchronously from a CSV file and rendered entirely in SVG.

Iikimes

74% match